fix: shortcuts overflow when text of reset button is large

[joaovictorjs]

When the reset button text is too long, the shortcuts dialog content overflows its bounds. This occurs in the Spanish language.

Problem - Preview:

Fix:

• Increased the dialog max width slightly (from 420px to 460px)
• Set a max width on the button (200px)
• Wrapped the button text in a <span> with truncate
• Added tooltip support for longer texts

Summary by CodeRabbit

• Style
  • Improved the shortcuts configuration dialog layout with enhanced spacing for better content display.
  • Enhanced text overflow handling to prevent label truncation issues within the dialog.
  • Added tooltip support and refined button styling for improved usability of the reset-to-defaults action.

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 439ddbeb-4e9a-4275-969a-fca36d8d3ca7

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• ✅ Review completed - (🔄 Check again to review again)

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Tip

You can validate your CodeRabbit configuration file in your editor.

If your editor has YAML language server, you can enable auto-completion and validation by adding # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json at the top of your CodeRabbit configuration file.

[coderabbitai]

🧹 Nitpick comments (1)

src/components/video-editor/ShortcutsConfigDialog.tsx (1)

200-207: Apply proper shrink constraints for reliable text truncation in flex layouts.

The truncate utility on line 207 may not work reliably in the parent inline-flex container without explicit shrink constraints. In flex layouts, child elements don't shrink below content size unless the item has min-w-0 or equivalent sizing.

Suggested improvement

          <Button
             title={t('shortcutsConfig.resetToDefaults')}
             variant="ghost"
             size="sm"
-            className="text-slate-400 hover:text-white hover:bg-white/10 gap-1.5 max-w-[200px]"
+            className="text-slate-400 hover:text-white hover:bg-white/10 gap-1.5 max-w-[200px] min-w-0"
             onClick={handleReset}
           >
             <RotateCcw className="w-3 h-3" />
-            <span className="truncate">{t('shortcutsConfig.resetToDefaults')}</span>
+            <span className="truncate min-w-0 flex-1 block">{t('shortcutsConfig.resetToDefaults')}</span>
           </Button>

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/video-editor/ShortcutsConfigDialog.tsx` around lines 200 -
207, The truncate span inside ShortcutsConfigDialog's reset button won't
reliably ellipsize in its inline-flex parent; update the element with an
explicit shrink constraint (e.g., add the utility such as min-w-0 or
overflow-hidden/flex-shrink-0 removal) on the truncating element or its
immediate flex container so the text can shrink; locate the <span
className="truncate"> inside the reset button (the component using RotateCcw and
handleReset) and add min-w-0 (or equivalent shrink/overflow classes) to enable
correct truncation.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@src/components/video-editor/ShortcutsConfigDialog.tsx`:
- Around line 200-207: The truncate span inside ShortcutsConfigDialog's reset
button won't reliably ellipsize in its inline-flex parent; update the element
with an explicit shrink constraint (e.g., add the utility such as min-w-0 or
overflow-hidden/flex-shrink-0 removal) on the truncating element or its
immediate flex container so the text can shrink; locate the <span
className="truncate"> inside the reset button (the component using RotateCcw and
handleReset) and add min-w-0 (or equivalent shrink/overflow classes) to enable
correct truncation.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: d67c8d75-af51-4bf5-86a6-718e33d52630

📥 Commits

Reviewing files that changed from the base of the PR and between 8bb4ad4 and eadc0d6.

📒 Files selected for processing (1)

• src/components/video-editor/ShortcutsConfigDialog.tsx