From a463d088d763ffc9708e8a7d2a94369b1cc6d414 Mon Sep 17 00:00:00 2001 From: Thomas Hallock Date: Mon, 10 Nov 2025 14:23:59 -0600 Subject: [PATCH] fix: prevent skill name wrapping in mini cards with single-line ellipsis MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The skill name heading was wrapping to multiple lines for long names like 'Two-digit with ones place regrouping', causing the card height to change and buttons to shift position. **Fix:** - Added whiteSpace: 'nowrap' to force single line - Added overflow: 'hidden' and textOverflow: 'ellipsis' to truncate - Added flex: 1 to allow name to take available space Now the skill name always stays on exactly one line with ellipsis (...) if it's too long, keeping the card height perfectly consistent. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .../addition/components/config-panel/MasteryModePanel.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/apps/web/src/app/create/worksheets/addition/components/config-panel/MasteryModePanel.tsx b/apps/web/src/app/create/worksheets/addition/components/config-panel/MasteryModePanel.tsx index b566f0ee..00f43fdf 100644 --- a/apps/web/src/app/create/worksheets/addition/components/config-panel/MasteryModePanel.tsx +++ b/apps/web/src/app/create/worksheets/addition/components/config-panel/MasteryModePanel.tsx @@ -320,6 +320,10 @@ export function MasteryModePanel({ formState, onChange, isDark = false }: Master fontWeight: '600', color: isDark ? 'white' : 'gray.900', lineHeight: '1.2', + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', + flex: 1, })} > {currentAdditionSkill.name} @@ -479,6 +483,10 @@ export function MasteryModePanel({ formState, onChange, isDark = false }: Master fontWeight: '600', color: isDark ? 'white' : 'gray.900', lineHeight: '1.2', + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', + flex: 1, })} > {currentSubtractionSkill.name}