githubnext/chopinPublic

Let's compose rich plans together

Keep every icon at its declared size beside wrapping text #398

MergedMaggieAppletonmerged 2 commits intomainfromrefs/pull/398/head
  1. MA

    ## Why

    Icons shrink when the text beside them wraps. Shared icons are flex items with the default `flex-shrink: 1` and no minimum size, so a long label squeezes them. In the resolved decision popover the check and cross render at different tiny sizes on two-line options (about 8×14 px instead of 14×14), and the settled decision line's icon drops to 6–10 px. This change fixes the shared cause.

    ## What changed

    - **Icons never shrink.** `apps/web/src/theme.css` holds shared UI icons (`[data-nucleo-icon]`, plus a static `data-filled-icon` marker on the brand icons, including `ChopinIcon` and `GitHubIcon`) at `flex-shrink: 0` in the base layer, so a utility can still opt out. Faces, question keys and checks, and research badges already had `flex: none`/`shrink-0`. - **One first-line utility.** `icon-first-line` (`align-self: flex-start; translate: 0 calc(0.5lh - 50%)`) centres an icon on the first line of wrapping text at any icon size, with no per-site offsets. It's used on the resolved popover's answers and meta clock (replacing the old `.plan-decision-meta > p > svg` margin rule), the settled decision line, the Chat composer notice, and Chat tool rows. - **Guards.** `packages/icons/src/icon.test.tsx` checks that every exported icon renders a marker the stylesheet holds, and `icon-assets.test.ts` checks the base-layer rule. `e2e/icon-size.e2e.ts` seeds decisions with long, wrapping options at phone width, then checks that every visible icon in the settled line, resolved popover, Decisions tab, header, document menu, Chat and sidebar keeps its declared size. Rows are also squeezed to force wrapping. For the popover answers and settled line it also checks that the icon sits on the first line.

    #393 was closed; this PR covers its settled-line case.

    ## Screenshots

    Before (left) / after (right). Resolved popover, desktop:

    ![Resolved popover desktop](https://github.com/user-attachments/assets/97ea13d6-5384-41fb-b172-7c51c5791736)

    Resolved popover, phone:

    ![Resolved popover phone](https://github.com/user-attachments/assets/7615d651-b95f-4f53-8d7c-3a3755f7d4fd)

    Settled decision line, desktop and phone:

    ![Settled line desktop](https://github.com/user-attachments/assets/fe8739ca-9fec-4213-8303-a59711f23cd8)

    ![Settled line phone](https://github.com/user-attachments/assets/2d63bd66-5423-4efa-b0be-c12f40cf4d3d)

    The settled-line screenshots predate #376's updated write-up copy.

    ## Verification

    - Two feature commits are prepared on the refreshed local stack; the missing `GitHubIcon` marker fix is folded into the first. - Focused icon tests: 10 passed. `bun run fix`, `bun run ci`, `bun run types`, and `bun run build` passed; reviewed design hashes are renewed. - The earlier isolated browser check passed 2/2 against this change and failed 2/2 against the old main, confirming it detects shrinking icons. - The prepared build's initial JavaScript is 251,596 B raw / 79,422 B gzip, 4,404 bytes below the raw limit. Fresh GitHub CI will be confirmed after publication.

    ## Design-contract review

    The exception renewals cover static `icon-first-line` classes and static `data-filled-icon` markers on brand icons. No dynamic class or style logic was added.

  2. MaggieAppletonauto-rebase-enabledlast month on GitHub

  3. MaggieAppletonauto-merge-disabledlast month on GitHub

  4. MaggieAppletonhead-ref-force-pushed 2e48fb8ed1e1last month on GitHub

  5. MaggieAppletonmerged 3bd2ff585d2clast month on GitHub

  6. MaggieAppletonclosedlast month on GitHub

  7. MaggieAppletonhead-ref-deletedlast month on GitHub

  8. MaggieAppletonreferenced this in Scope PR readiness scans to event-related stacks #402last month on GitHub