Summary
The expand-panel hand-drawn icon stays at a flat 192px from desktop down to the 720px mobile breakpoint. The intended responsive cascade — 192 on desktop, 128 at ≤1180px, hidden at ≤720px — does not currently work, because <ItemIcon size={192}> hardcodes its wrapper dimensions inline, so the CSS media query cannot take effect.
PR #99 originally tried to ship the responsive cascade as CSS-only (.ac-expand-icon { width: 128px; height: 128px } inside @media (max-width: 1180px)). Copilot's review on that PR caught that the inline sizing on <ItemIcon>'s wrapper would override the CSS shrink, so the icon would overflow its 128 container. The 1180 step was dropped and the icon flattened to 192 across desktop and tablet to ship a coherent state.
Tradeoff that lives today
At 980–1180px viewports (small laptops, narrow desktop windows, landscape tablets), the 192 icon eats more of the panel than the design intended. The MonthGrid and stats column still fit, but they are tighter than they would be at 128. Acceptable for the v0.9.2 first-icons release; not the long-term answer.
Options for a real fix
- Responsive size in React. Add a
useMediaQuery('(max-width: 1180px)') hook (or equivalent) and pass size={isTablet ? 128 : 192} from ItemExpandPanel. Smallest delta, but it pulls layout decisions into the component tree.
- Fluid
<ItemIcon> mode. Refactor <ItemIcon> so the wrapper's width/height can be CSS-driven (e.g. size="fluid" makes the wrapper 100% and the parent — .ac-expand-icon here — sizes it via media queries). Cleaner separation, larger surface change.
Option two is the better long-term shape; option one is a faster bridge if the urgency is to land tablet ergonomics before a broader <ItemIcon> refactor.
Repro
- Open the dev preview in a viewport between 980px and 1180px wide (or use DevTools to set the viewport to ~1100px).
- Open any town's category tab and expand a row whose item has a hand-drawn icon (e.g. ACGCN fish/sea-bass or fish/koi).
- Observe the icon at 192px — eats more left padding than is comfortable for the MonthGrid + stats column at that viewport width.
References
Out of scope here
Summary
The expand-panel hand-drawn icon stays at a flat 192px from desktop down to the 720px mobile breakpoint. The intended responsive cascade — 192 on desktop, 128 at ≤1180px, hidden at ≤720px — does not currently work, because
<ItemIcon size={192}>hardcodes its wrapper dimensions inline, so the CSS media query cannot take effect.PR #99 originally tried to ship the responsive cascade as CSS-only (
.ac-expand-icon { width: 128px; height: 128px }inside@media (max-width: 1180px)). Copilot's review on that PR caught that the inline sizing on<ItemIcon>'s wrapper would override the CSS shrink, so the icon would overflow its 128 container. The 1180 step was dropped and the icon flattened to 192 across desktop and tablet to ship a coherent state.Tradeoff that lives today
At 980–1180px viewports (small laptops, narrow desktop windows, landscape tablets), the 192 icon eats more of the panel than the design intended. The MonthGrid and stats column still fit, but they are tighter than they would be at 128. Acceptable for the v0.9.2 first-icons release; not the long-term answer.
Options for a real fix
useMediaQuery('(max-width: 1180px)')hook (or equivalent) and passsize={isTablet ? 128 : 192}fromItemExpandPanel. Smallest delta, but it pulls layout decisions into the component tree.<ItemIcon>mode. Refactor<ItemIcon>so the wrapper's width/height can be CSS-driven (e.g.size="fluid"makes the wrapper100%and the parent —.ac-expand-iconhere — sizes it via media queries). Cleaner separation, larger surface change.Option two is the better long-term shape; option one is a faster bridge if the urgency is to land tablet ergonomics before a broader
<ItemIcon>refactor.Repro
References
src/components/ItemIcon.tsx:67–80— the inlinewidth: size, height: sizestyle on the wrapper span that prevents CSS shrinking.src/index.css— the.ac-expand-iconrule and the existing 720px hide rule. The 1180 step was removed in commit451e9fe.Out of scope here