Mobile web UI [7/7]: Give task titles the width the status select was holding - #299
Open
alex-clickhouse wants to merge 1 commit into
Open
Conversation
alex-clickhouse
changed the title
There was a problem hiding this comment.
Pull request overview
Improves mobile task-card density by reallocating space from status controls to task titles.
Changes:
- Moves status controls beside metadata on mobile.
- Hides the redundant mobile status badge.
- Preserves the desktop layout through responsive ordering.
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
On a phone the status select sat beside the title in a shrink-0 column, holding ~110px of a ~330px card. The title wrapped inside what was left, so a normal task ran to three lines. Below `sm` the select drops to the meta line, where "5m ago · from manual" leaves room to spare, and the title takes the full card. Titles that took three lines now take two, and a screenful goes from five cards to six. The status badge is hidden at the same breakpoint: the select beside it names the status already, and one value is not worth two controls and a row of vertical space. Done by ordering rather than duplication — one DOM, no second copy of the select to keep in sync: phone title / meta + controls ≥ sm title + controls / meta Desktop keeps the badge, the select at the top right, and the meta line beneath, exactly as before. Refs #271
alex-clickhouse
force-pushed
the
alex-clickhouse/mobile-taskcard
branch
from
August 9, 2026 18:32
4e4efcd to
8d40ebe
Compare
alex-clickhouse
marked this pull request as ready for review
August 9, 2026 18:40
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Follow-up on #271, stacked on #298. Reported from the phone: the task status select was crowding out the title.
Before
The select sat beside the title in a
shrink-0column, holding ~110px of a ~330px card whatever the viewport. The title wrapped in what was left, so an ordinary task ran to three lines:After
Below
smthe select drops to the meta line — where5m ago · from manualleaves room to spare — and the title takes the full card:Three-line titles become two, and a screenful goes from five cards to six.
The status badge is hidden at the same breakpoint. The select beside it already names the status, so on a phone it was one value rendered twice, costing a row of vertical space to say nothing new.
How
Ordering, not duplication — one DOM, no second copy of the select to keep in sync:
smThe meta block carries
sm:basis-fullso it wraps beneath on desktop, and the controls carryml-autoso they stay right-aligned in both arrangements.Verification
npm run buildandeslintcleanstopPropagationwrapper moved with it)