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>
2 files changed,
+16 insertions,
-3 deletions
| 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 |
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 |
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 |
|
}
|