fix: prevent skill name wrapping in mini cards with single-line ellipsis
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 <noreply@anthropic.com>
This commit is contained in:
parent
d7bec423e0
commit
a463d088d7
|
|
@ -320,6 +320,10 @@ export function MasteryModePanel({ formState, onChange, isDark = false }: Master
|
||||||
fontWeight: '600',
|
fontWeight: '600',
|
||||||
color: isDark ? 'white' : 'gray.900',
|
color: isDark ? 'white' : 'gray.900',
|
||||||
lineHeight: '1.2',
|
lineHeight: '1.2',
|
||||||
|
overflow: 'hidden',
|
||||||
|
textOverflow: 'ellipsis',
|
||||||
|
whiteSpace: 'nowrap',
|
||||||
|
flex: 1,
|
||||||
})}
|
})}
|
||||||
>
|
>
|
||||||
{currentAdditionSkill.name}
|
{currentAdditionSkill.name}
|
||||||
|
|
@ -479,6 +483,10 @@ export function MasteryModePanel({ formState, onChange, isDark = false }: Master
|
||||||
fontWeight: '600',
|
fontWeight: '600',
|
||||||
color: isDark ? 'white' : 'gray.900',
|
color: isDark ? 'white' : 'gray.900',
|
||||||
lineHeight: '1.2',
|
lineHeight: '1.2',
|
||||||
|
overflow: 'hidden',
|
||||||
|
textOverflow: 'ellipsis',
|
||||||
|
whiteSpace: 'nowrap',
|
||||||
|
flex: 1,
|
||||||
})}
|
})}
|
||||||
>
|
>
|
||||||
{currentSubtractionSkill.name}
|
{currentSubtractionSkill.name}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue