fix(editor): keep the camera preset labels inside their button - #614
Conversation
`.cursorCell` was drawn for the cursor grid: a square, icon-only cell. The camera shape and camera background rows reuse it with a label under the icon, and the label does not fit. The inspector is 300 px, the row is four tracks wide, so each cell gets 61 px and 43 px of inner width. "Personnalisé" needs about 65 px at 11 px, so it spilled over its own border and crowded the green ring of the active cell next to it. `minmax(0, 1fr)` and `minWidth: 0` had already stopped the text from pushing the grid track; nothing stopped it from painting outside the button. Not a French problem: es "Personalizado", it "Personalizzato" and ru "Пользовательский" overflow the same way, and en "Original" sits right on the limit. So the clip goes on `.cursorCell > span` once, where both rows and any future labelled cell pick it up, rather than on a per-locale hope that the strings stay short. Side padding drops from 8 px to 4 px, which buys back 8 px of label room: only the genuinely oversized labels reach the ellipsis now, and `title` carries the full string for those.
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Team Run ID: 📒 Files selected for processing (2)
Included review availability: Your plan provides up to 8 included reviews per hour; 6 remain after this review. 📝 WalkthroughWalkthroughThe editor now truncates long cursor-cell labels. Camera shape and background mode buttons use narrower horizontal padding and expose localized labels through ChangesEditor label layout
Estimated code review effort: 1 (Trivial) | ~5 minutes Merge Risk: ⚪ Minimal · up to Camera preset labels now remain within their controls, with full localized text available on hover. The change is limited to editor presentation behavior and has no identified merge-blocking risk. Suggested reviewers: 🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
Full details: Description checkExplanation The description explains the cause, fix, affected labels, visual verification, and test limitation, but it does not follow the required template and omits the related issue, change type, release impact, desktop impact, and screenshots or video sections. Resolution Use the required section headings. Add the related issue entry, select the applicable change type, release impact, and desktop impact, and include screenshots or video for this visual change. Keep the existing testing details under the Testing section. Full details: Docstring CoverageExplanation Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 1 functions across 1 files. (1 skipped: 1 unsupported.)
✨ Finishing Touches 💡 1📝 Generate docstrings 💡
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
1 participant
Les libellés des presets caméra (forme et arrière-plan) débordaient de leur bouton et venaient coller le cadre vert de la cellule active.
Cause.
.cursorCella été dessiné pour la grille de curseurs : une cellule carrée, icône seule. Les deux rangées « forme de la webcam » et « arrière-plan de la caméra » la réutilisent avec un libellé sous l'icône. L'inspecteur fait 300 px, la rangée fait quatre pistes, donc 61 px par cellule et 43 px utiles. « Personnalisé » demande ~65 px en 11 px : il peint hors de sa bordure.minmax(0, 1fr)etminWidth: 0empêchaient déjà le texte de pousser la piste, rien ne l'empêchait de sortir du bouton.Correctif.
.cursorCell > spanclippé en ellipsis, une fois, pour les deux rangées et toute cellule libellée à venir. Ce n'est pas un problème de traduction française : es « Personalizado », it « Personalizzato », ru « Пользовательский » débordent pareil, et en « Original » est pile à la limite.titlesur le libellé pour lire la chaîne complète au survol quand elle est tronquée.Vérification. Repro isolée à la largeur réelle de l'inspecteur (300 px, tokens du thème sombre) : avant, « Détouré » et « Personnalisé » sortent de leur cadre ; après, « Original / Détouré / Flouté » tiennent en entier et « Personnalisé » se tronque proprement. Les tests n'ont pas été lancés,
node_modulesde ce clone est incomplet (vitestabsent) ; le changement est du CSS plus un attributtitle, les requêtesgetByTextexistantes restent valides.🤖 Generated with Claude Code
Summary by CodeRabbit
Bug Fixes
Style