fix(desktop): draw the folded title bar's offline mark as its buttons draw their glyphs

Merged
DA
6d ago
+12-3

Summary

Follow-up to #3523 from the task "Add UI to show when offline" (https://tryluke.dev/stage/plan/519afac9-0e94-428c-bb83-2afe6908a2d0). The developer reported that the folded title bar looked broken offline, on the Inbox and other pages.

  • Root cause of what was reported (already fixed on main by #3631). #3523 widened --sidebar-toggle-clearance and sized the title-bar mark with --control-height and --control-gap. #3524 and #3569 had retired those aliases after #3523's branch was cut, so the override became invalid at computed-value time while offline. The Inbox bar's grid-template-columns then fell back to implicit auto tracks, and the "Inbox" heading slid under the traffic lights and the sidebar toggle. Every other folded toolbar lost its clearance the same way. #3631 renamed those reads to --luke-control-height and --luke-control-gap and added the repository check that refuses a read nothing declares. A build from before #3631 still shows the bug.
  • This PR. With the clearance valid, the folded mark was still a tinted 30px circle. The Inbox heading sits right against it, 2px off its fill, so the row looked cramped. The mark now draws like the buttons beside it: the amber glyph on no fill, at --luke-control-icon, one button wide. A heading next to it keeps the same gap it keeps next to New task when online. The pill in the sidebar's foot and on the sign-in screen is unchanged.

Evidence

  • Measured in Chromium with the built dist/renderer/styles.css and a copy of the folded Inbox bar's DOM (318px list):
    • With the CSS as #3523 merged it (--control-*), offline: the heading starts at 70.6px and the grid falls back to 56.6px 95.8px 124.6px. This reproduces the screenshot.
    • On main, offline: the heading starts at 179px, right after the cluster, which ends at 177px. Online it is 149 after 147.
    • After this change the offline row reads like the online one, with the glyph standing where a button would.
  • scripts/repository-checks.sh ✅ (including the undeclared-property check from #3631), biome check ✅. CSS only.

Invariants

  • ./scripts/check.sh green. (CI)
  • JSON Schema goldens unchanged.
  • Every behavior change has, in this PR, the test that fails without it; no change-detector test added. CSS only: desktop-shell.test.ts already covers the mark standing in the folded title bar, and jsdom computes no layout.
  • Gateway envelope goldens unchanged.
  • No new as type assertion.
  • No Effect.runPromise/runSync/runFork outside the runtime edges.
  • No new raw async primitives.
  • No Effect, Stream, or Layer dropped.
  • Test count unchanged.
  • No hand-rolled file replaced.
  • No CLAUDE.md/AGENTS.md sentence names a changed part.
  • PRIVACY.md unchanged.
  • Package deps unchanged.
  • Barrel/door rule unaffected.

Notes

  • Not checked on a Mac. Fold the sidebar, turn Wi-Fi off, and open the Inbox. The amber glyph should stand beside New task, with "Inbox" centred after it the way it is online.

Made with Luke

Devin Review

Summary by cubic

Fixes the folded title bar's offline mark so it draws like the buttons beside it.

The mark was a tinted 30px circle sitting 2px off the "Inbox" heading, which looked cramped. It now draws the amber glyph on no fill, at --luke-control-icon size and one button wide, keeping the same gap a heading keeps beside New task when online. The pill in the sidebar's foot and on the sign-in screen is unchanged.