githubnext/chopinPublic

Let's compose rich plans together

Keep decision cards at document width and header icons from shrinking #289

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

    Decision cards fill their available document measure without changing width as text grows. Header icons retain their 14px width under long titles.

    The CSS conflict was resolved by keeping main’s newer 1.5rem top spacing and adding only `width: 100%`. Static icon/truncation classes preserve the existing header behavior.

    Local checks, types and the interface-quality browser suite pass. The updated long-title test checks icon widths on desktop and phone. Final GitHub CI is running.

    <details><summary>Original proposal and screenshots</summary>

    ## Why - Decisions tab: cards were ~375px wide, then jumped to ~649px as a long option was typed, and were narrower than the same cards in the document (~673px). `.plan-decisions-content` had `margin-inline: auto` and a max-width but no width, so it shrink-wrapped inside the flex column. - Phone header: a long document title squashed the document icon to ~5px (and the chevron with it).

    ## What changed - `.plan-decisions-content` gets `width: 100%`, still capped by the existing `--plan-measure` max-width, so cards match the document measure and stay put. - Header: the document icon and the title trigger's chevron are `shrink-0`; the title span is `min-w-0 truncate`. The archived badge already has `flex: 0 0 auto`. - e2e: the existing long-title rename test (390px and 1280px) now asserts no header icon is narrower than 14px.

    ## Screenshots Decisions, desktop, while typing a long option (before = 375 to 649px, after = 673px, no jump):

    Before: ![before](https://github.com/user-attachments/assets/3d885398-a31a-49f2-93eb-4d24c9efa941) After: ![after](https://github.com/user-attachments/assets/321560b2-0c86-4346-82b0-ecd798a8f43d)

    Phone header with a 118-character title (before icon 5px, after 14px, chevron visible):

    Before: ![before](https://github.com/user-attachments/assets/66698ff2-bbaf-4241-866a-bb3c0ed3c435) After: ![after](https://github.com/user-attachments/assets/55cd11ee-25e0-4040-84df-090fbf84d7af)

    ## Testing - `bun run fix`, `bun run ci`, `bun run types`: pass. - Measured in headless Chromium against main and this branch: card width 375 to 649 before, 673 constant after; phone header icon 5px before, 14px after. - Local e2e is suspended; the browser-integration CI job runs the updated `e2e/interface-quality.e2e.ts`.

    🤖 Generated with [Claude Code](https://claude.com/claude-code)

    </details>

  2. MA
    Author

    **Review:** Looks good

    Checked in a worktree against main (8795) at 1440x900, 820 and 390x844, with a long title and the Decisions tab. `bun run ci` passes with no review-hash failures.

    - **Decisions width:** at 1440 the `.plan-decisions-content` box was 503px wide at x=776, so the cards were 375px wide and off-centre. It is now 801px (the full pane) and the cards are 673px, the same as the Document-tab cards. Tablet gives 399px cards; phone is unchanged. - **Header icons:** at 390 the document icon was 8x14 and the chevron 14x8 with a long title. Both are now 14x14. At 1440 and 820 they were already 14px and are unchanged. The title still truncates with an ellipsis, and the avatar and sidebar toggle do not move. The title text starts about 6px further right on phones because the icon is no longer squashed. - **Empty Decisions state:** I swapped the empty-state paragraph into the container, since it can't be reached with seeded decisions. It stays centred at the same position as before (text 673px wide vs 554px before, but centred text, so no visible change). No oddness. - **Test:** the new assertion checks that the narrowest SVG in `banner` is at least 14px, at both 1280 and 390 widths. It would fail on the old code at 390. It is slightly loose because it covers every banner icon, not only the document icon and chevron, but that is acceptable.

    Nits (non-blocking): - `e2e/interface-quality.e2e.ts` hosts this check inside the "delete confirmation" test, so the name no longer describes everything the test checks. - `Decisions` cards were not pixel-compared while typing, only the container width, which is now deterministic.

  3. lavaman131referenced 22117c9aae05last month on GitHub

  4. MA
    Author

    <!-- pr-rebase:6d87ec90ed30a1c6d013d317f870faf614d72e5e:964535bb81cb00d3583301d3ec90d55393c278ca --> PR babysitter could not rebase this branch cleanly onto main. The branch is unchanged. Please resolve the rebase conflict locally; automation will try again after the branch changes.

  5. MA
    Author

    <!-- pr-rebase:6d87ec90ed30a1c6d013d317f870faf614d72e5e:8675f8e57182b28d0b2dc34c8089d0d928d00191 --> PR babysitter could not rebase this branch cleanly onto main. The branch is unchanged. Please resolve the rebase conflict locally; automation will try again after the branch changes.

  6. MA
    Author

    <!-- pr-rebase:6d87ec90ed30a1c6d013d317f870faf614d72e5e:e6b7bb333ce8948d0dac0c8aff61cf3d4fb8dc8b --> PR babysitter could not rebase this branch cleanly onto main. The branch is unchanged. Please resolve the rebase conflict locally; automation will try again after the branch changes.

  7. MA
    Author

    <!-- pr-rebase:6d87ec90ed30a1c6d013d317f870faf614d72e5e:b919317f14f29799be257eee49ba5ab753592371 --> PR babysitter could not rebase this branch cleanly onto main. The branch is unchanged. Please resolve the rebase conflict locally; automation will try again after the branch changes.

  8. MA
    Author

    <!-- pr-rebase:6d87ec90ed30a1c6d013d317f870faf614d72e5e:02318fbb573819262ebe55d01d2a9bfc4fc85c33 --> PR babysitter could not rebase this branch cleanly onto main. The branch is unchanged. Please resolve the rebase conflict locally; automation will try again after the branch changes.

  9. MaggieAppletonhead-ref-force-pushed 9b87ef511b5flast month on GitHub

  10. MaggieAppletonreferenced this in Show decision evidence as a summary row with objections #361last month on GitHub

  11. MaggieAppletonhead-ref-force-pushed 86ada93fe259last month on GitHub

  12. MaggieAppletonmerged f5cd63f9f525last month on GitHub

  13. MaggieAppletonclosedlast month on GitHub

  14. MaggieAppletonhead-ref-deletedlast month on GitHub