Keep case-row delete button beside the preview on narrow viewports #11

New Issue

2026-05-30T17:26:13+02:00

Brummel commented

2026-05-30 17:26:13 +02:00

Context

The responsive WebUI work in a37a1ae (closing #10; plan at
docs/plans/2026-05-30-responsive-webui.md) added a
@media (max-width: 640px) block to server/templates/my_cases.html
(block at my_cases.html:81).

Observation (verified)

On the desktop layout each case row is a two-column grid —
grid-template-columns: 1fr auto (my_cases.html:20) — with the
content (timestamp line + expandable analysis preview) in the 1fr
column and the action icons (.case-row .actions, my_cases.html:55)
in the auto column, vertically centred beside the content.

The narrow-viewport block collapses every row variant to a single
column — grid-template-columns: 1fr (my_cases.html:84-86). That
moves .case-row .actions onto its own row below the content.
Combined with the 44px touch-target rule on the icons
(my_cases.html:91-92), the delete/reopen button now occupies a full
~44px-tall strip stacked under the expandable analysis preview, costing
noticeable vertical space per row on a phone.

Desired outcome

On narrow viewports the case-row delete (and reopen) action sits
beside the preview text, as it does on desktop, rather than on a
separate row below it.
Vertical space per row on a ~390px viewport is reduced accordingly.
The 44px touch-target minimum for the action icons is preserved.
Desktop layout (>=900px) stays unchanged.

Possible direction

Claim (unverified): retaining the trailing auto actions column for
.case-row on narrow widths (i.e. keeping grid-template-columns: 1fr auto instead of collapsing to 1fr) would place the actions
beside the content again; only the content sub-elements that genuinely
overflow would then need to stack. The .has-bulk row variants
(my_cases.html:21-22) carry a leading checkbox column and may need a
separate column template. To be confirmed when scoped.

## Context The responsive WebUI work in `a37a1ae` (closing #10; plan at `docs/plans/2026-05-30-responsive-webui.md`) added a `@media (max-width: 640px)` block to `server/templates/my_cases.html` (block at `my_cases.html:81`). ## Observation (verified) On the desktop layout each case row is a two-column grid — `grid-template-columns: 1fr auto` (`my_cases.html:20`) — with the content (timestamp line + expandable analysis preview) in the `1fr` column and the action icons (`.case-row .actions`, `my_cases.html:55`) in the `auto` column, vertically centred beside the content. The narrow-viewport block collapses every row variant to a single column — `grid-template-columns: 1fr` (`my_cases.html:84-86`). That moves `.case-row .actions` onto its own row *below* the content. Combined with the 44px touch-target rule on the icons (`my_cases.html:91-92`), the delete/reopen button now occupies a full ~44px-tall strip stacked under the expandable analysis preview, costing noticeable vertical space per row on a phone. ## Desired outcome - [ ] On narrow viewports the case-row delete (and reopen) action sits *beside* the preview text, as it does on desktop, rather than on a separate row below it. - [ ] Vertical space per row on a ~390px viewport is reduced accordingly. - [ ] The 44px touch-target minimum for the action icons is preserved. - [ ] Desktop layout (>=900px) stays unchanged. ## Possible direction Claim (unverified): retaining the trailing `auto` actions column for `.case-row` on narrow widths (i.e. keeping `grid-template-columns: 1fr auto` instead of collapsing to `1fr`) would place the actions beside the content again; only the content sub-elements that genuinely overflow would then need to stack. The `.has-bulk` row variants (`my_cases.html:21-22`) carry a leading checkbox column and may need a separate column template. To be confirmed when scoped.

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: Brummel/doctate#11