feat(shell): show background jobs in the phone's layout, not a popover
The header indicator is a disclosure anchored to a bar 3.25em tall on a screen 439 CSS px tall, and it was reported as unreadable behind other UI. Background work is the one thing a phone should not make you open something to see, and #57 deletes the bar it hangs from and is blocked on it having somewhere else to live. Below 600px the indicator stands down and <job-band> takes over. It is the existing job-panel at `kinds="*"`, so pause, cancel, Details and the log come along, and so does applyJobControl. **It is in the layout, not over it**, and that was measured rather than assumed. The first version put the panel in notification-host's fixed band: it renders correctly, sits on top and stays inside the viewport, and is unusable -- at 424x439 a compact panel showing two jobs is ~216px of a 439px screen, drawn over the content and swallowing every tap under it. Four e2e specs caught it, and none of them was about jobs: two phone-shell journeys and the header's action menu, all failing on clicks the band was intercepting. As a grid row above the main panel it pushes instead, which is #24's one sentence deciding a layout question -- a band that hides the app to say the app is busy has traded the popover's fault for a worse one. It renders nothing above 600px, from matchMedia rather than a media query, because that decides whether the element exists: Settings already holds four job-panels and a fifth answering for every kind is bottom-nav's "resolved to 2 elements" trap again. index.css keeps it display:none off the phone for a second reason -- an in-flow grid child with no named area is auto-placed into one of the shell's rows, which is what the skip link is absolutely positioned to avoid. top-bar-fit's 390px case asserted the indicator was up, so that it could not pass by measuring the idle case under another name. At phone width it is now deliberately away, so the assertion takes the other branch of the same rule -- the indicator is hidden, the band has the row, and the bar still has nothing hanging out of it -- rather than the width being quietly dropped from the list. The report's own symptom is deliberately not asserted anywhere: it did not reproduce in this tier. Measured at 424x439 the popover was neither clipped nor covered, so a spec claiming a stacking fix would be asserting something that was never true here. The spec says so. Closes #62
This commit is contained in:
@@ -414,6 +414,7 @@ body div.sidebar {
|
||||
body {
|
||||
grid-template:
|
||||
"top-bar" 3.25em
|
||||
"jobs-band" auto
|
||||
"main-panel" 1fr
|
||||
"bottom-bar" auto
|
||||
"bottom-nav" auto
|
||||
@@ -522,3 +523,45 @@ body div.sidebar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Out of the desktop grid entirely. `job-band` renders nothing above
|
||||
600px anyway, but an in-flow grid child with no named area is
|
||||
auto-placed into a row of the shell -- the same trap the skip link is
|
||||
absolutely positioned to avoid. */
|
||||
body job-band {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* #62. The job indicator stands down on the phone, and its work is
|
||||
shown in the notification band instead (notification-host).
|
||||
|
||||
Three reasons, and the first is the report: its popover is anchored
|
||||
to the top bar, which is 3.25em here on a viewport 439 CSS px tall,
|
||||
and it was reported as unreadable behind other UI. The second is
|
||||
that a popover is a disclosure, and background work is the one thing
|
||||
a phone should not make you disclose. The third is #57, which
|
||||
deletes this bar entirely and is blocked on the indicator having
|
||||
somewhere else to live -- this is that somewhere.
|
||||
|
||||
`display: none` rather than a fit step: `services/top-bar-fit.ts`
|
||||
already skips children whose computed display is none, so the bar's
|
||||
measurement simply sees one fewer child, and `[compact]` toggling on
|
||||
a hidden element costs nothing. */
|
||||
@media (max-width: 599px) {
|
||||
.top-bar job-indicator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ...and its rows appear here, in the grid row above the content.
|
||||
In flow rather than over it: a fixed band reads fine in a
|
||||
screenshot and is unusable, because at 424x439 a compact panel
|
||||
is ~200px of a 439px screen and it *covers* what is under it.
|
||||
Measured, not assumed -- four e2e specs failed on that version,
|
||||
two phone-shell journeys and the header's action menu, because
|
||||
the panel was intercepting the taps. */
|
||||
body job-band {
|
||||
display: block;
|
||||
grid-area: jobs-band;
|
||||
background-color: var(--yj-bg-elevated, #343a40);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user