Skip to main content

max / goingson

Let the narrow pass hide what it says it hides The mobile task card set `display: flex !important` on every cell. The generated hiding rules are not important and sit in tables.css, which loads first, so all four of them lost: the priority letter, the recurrence cell and an empty progress cell were back on the card from the moment ca0d396 replaced the hand-written rules, which had said `display: none !important` and won. The rule keeps its overflow and padding and gives up the display. The two cells that need to be flex already declare it themselves and unscoped -- .task-description for its badge row, .task-actions-cell for its right alignment -- so nothing on the card changes shape. The actions column becomes Secondary rather than Optional. Every other table drops its actions column first, but the task row on a narrow screen is not a narrow table, it is a card, and the kebab is the only affordance left on it. The card orders it fourth and three separate touch rules keep it visible, so a description that dropped it disagreed with the layout it describes. Progress stays Optional and keeps its exception: the card re-shows it when it holds a bar, which is a condition the column description cannot carry. Desktop output is unchanged. Mobile hides three columns and has four tracks.
Co-Authored-By
Claude Opus 5 (1M context) <noreply@anthropic.com>
Author: Max Johnson <me@maxj.phd> · 2026-07-30 15:54 UTC
Signed with PGP, not checked
Commit: 6fa37daea552df657fc62c0ea0adcf7850a2cac9
Parent: 163617b
2 files changed, +16 insertions, -3 deletions
@@ -46,10 +46,14 @@
46 46 width: Width::Fixed,
47 47 priority: Priority::Optional,
48 48 },
49 + // Secondary, unlike every other table's actions column: on a narrow screen
50 + // the task row reflows into a card, and the kebab is the only affordance it
51 + // has left. The card orders it fourth and the touch rules make it always
52 + // visible, so dropping it here would contradict both.
49 53 Column {
50 54 name: "actions",
51 55 width: Width::Fixed,
52 - priority: Priority::Optional,
56 + priority: Priority::Secondary,
53 57 },
54 58 ];
55 59
@@ -152,7 +156,12 @@
152 156 // The narrow pass carries its own lengths: the columns that survive are not
153 157 // the same size on a phone as on a desktop.
154 158 let task_narrow = Sizing {
155 - lengths: &[("description", "0"), ("project", "80px"), ("due", "80px")],
159 + lengths: &[
160 + ("description", "0"),
161 + ("project", "80px"),
162 + ("due", "80px"),
163 + ("actions", "40px"),
164 + ],
156 165 fallback: "",
157 166 };
158 167
@@ -7644,8 +7644,12 @@
7644 7644 .ui-mode-mobile .task-row:has(.priority-m) { border-left-color: var(--warning); }
7645 7645 .ui-mode-mobile .task-row:has(.priority-l) { border-left-color: var(--content-muted); }
7646 7646
7647 + /* No display here. The narrow pass in css/tables.css hides the columns the card
7648 + drops, and a blanket `display: flex !important` on every cell out-ranked it,
7649 + so the priority letter and the recurrence cell came back. The two cells that
7650 + need to be flex say so themselves, unscoped: .task-description and
7651 + .task-actions-cell. */
7647 7652 .ui-mode-mobile .task-row .task-cell {
7648 - display: flex !important;
7649 7653 overflow: visible;
7650 7654 padding: 0;
7651 7655 }