fix(homepage): increase skill card abacus container width
Remove overflow:hidden and increase the abacus container width from 75px to responsive widths (95px mobile, 110px desktop) to properly accommodate the abacus visualizations without clipping. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
556a0eb194
commit
e65e96952f
|
|
@ -256,7 +256,6 @@ export default function HomePage() {
|
||||||
: '0 4px 12px rgba(0, 0, 0, 0.3)',
|
: '0 4px 12px rgba(0, 0, 0, 0.3)',
|
||||||
transition: 'all 0.2s',
|
transition: 'all 0.2s',
|
||||||
cursor: 'pointer',
|
cursor: 'pointer',
|
||||||
overflow: 'hidden',
|
|
||||||
_hover: {
|
_hover: {
|
||||||
bg: isSelected
|
bg: isSelected
|
||||||
? 'linear-gradient(135deg, rgba(250, 204, 21, 0.2), rgba(250, 204, 21, 0.12))'
|
? 'linear-gradient(135deg, rgba(250, 204, 21, 0.2), rgba(250, 204, 21, 0.12))'
|
||||||
|
|
@ -275,7 +274,7 @@ export default function HomePage() {
|
||||||
<div
|
<div
|
||||||
className={css({
|
className={css({
|
||||||
fontSize: '3xl',
|
fontSize: '3xl',
|
||||||
width: '75px',
|
width: { base: '95px', lg: '110px' },
|
||||||
minHeight: { base: '115px', lg: '140px' },
|
minHeight: { base: '115px', lg: '140px' },
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue