feat(ui): expand compact density to sidebar / header / composer (LC-218) #260

Merged

nrupard merged 2 commits from feat/lc-218-density-compact-expanded into main 2026-05-29 18:33:43 +02:00

Conversation 0 Commits 2 Files changed 6 +42 -9

nrupard commented 2026-05-29 18:24:40 +02:00

Owner

Copy link

Summary

User on staging: "setting density to 'compact' appears to do nothing." Strictly false (LC-194 tightened non-follow-up message rows by 8 px) but every other surface (sidebar, header, composer) stayed unchanged so the toggle reads as dead.

Expand the [data-density="compact"] CSS block to consume three new opt-in attributes (data-lc-density-tight="row|header|composer") on the small set of stable container hooks that should respond. Attribute-driven (not class-string-coupled) so future Tailwind utility swaps don't silently un-compact a surface. Also replaces the brittle [id^="msg-"]:not([class*="py-0"]) substring selector from LC-194.

Surfaces affected

• Message rows (non-follow-up): tightened further (0.125 rem vs prior 0.25 rem).
• Sidebar room + peer rows: tightened.
• Room topbar / header: tightened + 0.9 em base font.
• Composer wrapper: TOP padding halved. lc-pb-safe bottom inset (LC-199 iOS home-indicator floor) preserved.

Out of scope

• Sidebar category headers: already a 10 px uppercase strip; the header rule would expand rather than tighten. Needs a separate shrink-only variant.
• Admin tables / settings forms: defer to a follow-up sweep after LC-219 admin nav scroll lands.

Test plan

• just build-css rebuilds Tailwind CSS clean.
• cargo check -p lets-chat-server clean.
• Visual smoke on staging under all four themes: toggle Comfortable -> Compact at /settings. Sidebar rows visibly tighter, room header visibly tighter, composer's top padding halved, message rows still tighter than comfortable.
• iOS safe-area: composer's bottom inset on a notched device is unchanged in compact mode (verified via env(safe-area-inset-bottom)).
• Keyboard focus rings still visible on sidebar rows.

Related blocker

db_custom_emojis::set_share_emojis_globally_round_trips and 17 other test files have a pre-existing migration-list drift from LC-217 (PR #259): hand-rolled migration arrays stop at 0056 and miss the new 0057_enclave_msg_rate_limit.sql. Running cargo test --test db_custom_emojis after LC-217 merged surfaces this. Independent of LC-218's changes; tracked as a follow-up. CI may go red on this branch until the sibling fix lands.

## Summary User on staging: "setting density to 'compact' appears to do nothing." Strictly false (LC-194 tightened non-follow-up message rows by 8 px) but every other surface (sidebar, header, composer) stayed unchanged so the toggle reads as dead. Expand the `[data-density="compact"]` CSS block to consume three new opt-in attributes (`data-lc-density-tight="row|header|composer"`) on the small set of stable container hooks that should respond. Attribute-driven (not class-string-coupled) so future Tailwind utility swaps don't silently un-compact a surface. Also replaces the brittle `[id^="msg-"]:not([class*="py-0"])` substring selector from LC-194. ## Surfaces affected - Message rows (non-follow-up): tightened further (0.125 rem vs prior 0.25 rem). - Sidebar room + peer rows: tightened. - Room topbar / header: tightened + 0.9 em base font. - Composer wrapper: TOP padding halved. `lc-pb-safe` bottom inset (LC-199 iOS home-indicator floor) preserved. ## Out of scope - Sidebar category headers: already a 10 px uppercase strip; the `header` rule would expand rather than tighten. Needs a separate shrink-only variant. - Admin tables / settings forms: defer to a follow-up sweep after LC-219 admin nav scroll lands. ## Test plan - [x] `just build-css` rebuilds Tailwind CSS clean. - [x] `cargo check -p lets-chat-server` clean. - [ ] Visual smoke on staging under all four themes: toggle Comfortable -> Compact at `/settings`. Sidebar rows visibly tighter, room header visibly tighter, composer's top padding halved, message rows still tighter than comfortable. - [ ] iOS safe-area: composer's bottom inset on a notched device is unchanged in compact mode (verified via `env(safe-area-inset-bottom)`). - [ ] Keyboard focus rings still visible on sidebar rows. ## Related blocker `db_custom_emojis::set_share_emojis_globally_round_trips` and 17 other test files have a pre-existing migration-list drift from LC-217 (PR #259): hand-rolled migration arrays stop at 0056 and miss the new `0057_enclave_msg_rate_limit.sql`. Running `cargo test --test db_custom_emojis` after LC-217 merged surfaces this. Independent of LC-218's changes; tracked as a follow-up. CI may go red on this branch until the sibling fix lands.

nrupard added 1 commit 2026-05-29 18:24:40 +02:00

feat(ui): expand compact density to sidebar / header / composer (LC-218) ... 377660d556

LC-194 added the compact density toggle and wired the cookie / localStorage / `data-density` attribute end-to-end, but the CSS that actually responded to `[data-density="compact"]` only tightened non-follow-up message rows (8 px per row) and markdown paragraph margins. User on staging reported "setting density to 'compact' appears to do nothing" because every other surface (sidebar rows, room header, composer) stayed unchanged; the message-row reduction is too subtle to notice without scrolling and side-by-side comparison.

Expand the `[data-density="compact"]` block to consume three new opt-in attributes (`data-lc-density-tight="row|header|composer"`) on the small set of stable container hooks that should respond. Attribute-driven so future utility-class swaps in templates do not silently un-compact a surface; replaces the brittle `[id^="msg-"]:not([class*="py-0"])` substring match the original LC-194 used.

CSS shape (`server/assets/main.css`):
- `[data-lc-density-tight="row"]` halves vertical padding to 0.125 rem (was 0.25 rem under the prior LC-194 rule; tighter still).
- `[data-lc-density-tight="header"]` shrinks header padding to 0.25 rem and drops base font to 0.9 em.
- `[data-lc-density-tight="composer"]` halves the composer's TOP padding only. Preserves the iOS safe-area bottom inset from LC-199's `lc-pb-safe` (never erodes the home-indicator floor).
- Markdown paragraph spacing inside a message keeps the existing 0.3 rem rule.

Templates carrying the new attribute:
- `room/message.html:14` non-follow-up message rows (gated on `!message.is_follow_up`; follow-ups keep their existing 0 vertical padding and skip the attribute).
- `partials/sidebar_room_row.html:2` and `partials/sidebar_peer_row.html:2` carry `row` on the link element so the sidebar visibly tightens.
- `partials/room_header.html:1` carries `header` on the `<header>` element so the room topbar tightens + slight font reduction.
- `room/composer.html:46` carries `composer` on the `<form>` so the composer's top padding halves.

Out of scope and deliberately untouched:
- Sidebar category headers (`partials/sidebar_nav.html`): already a 10 px uppercase strip; the `header` rule would EXPAND them (`padding-top: 0.25 rem` is more than the current 0). Density-tight on category headers needs a separate "shrink-only" attribute variant.
- Admin tables / settings forms: a follow-up sweep can opt them in as `row`/`header` once the LC-219 admin nav scroll work lands; for this ticket the goal is the four main-window surfaces a user inspects when they toggle compact.

Verified: `just build-css` rebuilds Tailwind CSS clean; `cargo check -p lets-chat-server` clean. Visual smoke on staging is the test plan for the reviewer.

#LC-218

nrupard added 1 commit 2026-05-29 18:32:32 +02:00

fix(ui): split density row and row-dense for proportional compression (LC-218) ... 3e91c707ad

Code-review finding: the `row` rule at 0.125 rem applied to message rows is a 4x compression from comfortable (`py-2` = 0.5 rem -> 0.125 rem), which is too tight for messages. LC-194 originally chose 0.25 rem (2x) and the user can read a thread without losing visual rhythm between actor + body + timestamp.

But sidebar rows are different: comfortable is `py-1` = 0.25 rem, so a single 0.25 rem compact rule would leave them unchanged. The whole point of LC-218 is that the user sees the sidebar tighten when they toggle compact.

Split the single attribute into two ratios:

- `row` (0.25 rem) — tall rows that come in at `py-2`. Halves to LC-194's chosen ratio. Used by non-follow-up message rows.
- `row-dense` (0.125 rem) — short rows that come in at `py-1`. Halves a row that's already tight so the toggle is still visible. Used by sidebar room/peer rows.

Both rules still preserve the LC-194 / LC-218 intent: compact halves vertical padding from comfortable, and the user sees the change on every surface they care about (sidebar AND messages).

Templates:
- `partials/sidebar_room_row.html:2`: `row` -> `row-dense`.
- `partials/sidebar_peer_row.html:2`: `row` -> `row-dense`.
- `room/message.html:14`: stays at `row` (the 0.25 rem ratio is correct for `py-2` rows).

Updated comment block in `main.css` explaining the two variants.

Verified: `just build-css` clean, `cargo check -p lets-chat-server` clean.

#LC-218

nrupard merged commit f20b025d74 into main 2026-05-29 18:33:43 +02:00

nrupard deleted branch feat/lc-218-density-compact-expanded 2026-05-29 18:33:44 +02:00

nrupard referenced this pull request from a commit 2026-05-29 18:33:45 +02:00

Merge pull request 'feat(ui): expand compact density to sidebar / header / composer (LC-218)' (#260) from feat/lc-218-density-compact-expanded into main

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels

No items

No labels

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference

psa-systems/lets-chat!260

No description provided.