Skip to content

Mobile expand-panel icon doesn't bump to enlarged size #100

@jacuzzicoding

Description

@jacuzzicoding

Summary

The inline expand panel (ItemExpandPanel) icon is invisible on mobile. Desktop renders the bumped 192px (and 128px at ≤1180px) correctly per PR #99, but at ≤720px the icon does not appear at any size.

Expected

The hand-drawn icon shows at a meaningful size on mobile — either the desktop 192/128 stepping continues into the mobile range, or a dedicated mobile size lands somewhere between row size (48) and the 128 step.

Actual

The icon is hidden entirely at ≤720px. The expand panel renders without an icon.

Repro

  1. Open the app at a viewport ≤720px (mobile, narrow window, or DevTools device emulation).
  2. Open any town's category tab (e.g. fish).
  3. Expand a row whose item has a hand-drawn icon committed (e.g. fish/sea-bass or fish/koi on an ACGCN town).
  4. Observe: the expand panel shows MonthGrid + stats, but no icon.

Suspected cause

src/index.css line 1528–1530 hides the icon on mobile via:

@media (max-width: 720px) {
  .ac-expand { padding-left: 18px; }
  .ac-expand-icon { display: none; }
}

This rule is pre-existing — it was introduced when <ItemIcon> first landed in v0.9.1 (commit bdaea9a) and was preserved in PR #99 alongside the new desktop responsive steps. The original motivation was that the 64px icon competed with the MonthGrid + stats stack on a narrow single-column layout. With hand-drawn art now treated as a specimen-card centerpiece, hiding it on mobile is at odds with the design intent.

So this is not a PR #99 regression — it is a pre-existing CSS choice that the new aesthetic makes wrong.

Suggested fix

Remove the display: none rule and pick a mobile-appropriate size. Two options:

  • Continue the 192 → 128 cascade with a 96 (or 80) step at ≤720px, keeping the icon absolute-positioned and adjusting padding-left accordingly. Lower-risk; small CSS delta.
  • Restructure the panel on mobile so the icon flows inline above the MonthGrid (top-of-card hero treatment) rather than absolute-positioned in the corner. Cleaner at narrow widths but a larger change.

The first option is the lower-risk path; the second is the better long-term answer if mobile becomes more central.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingenhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions