fix(toast): top-anchor toast family on mobile to clear bottom-nav (lr-2fdd)#297
Conversation
…-2fdd)
base .toast, .sw-update-banner, and .toast-diagnostic all hard-anchored
bottom:80px, occluding the mobile bottom-nav / input box / content
(iOS screenshot: PREFLIGHT WARNING toast covering the UPCOMING card
above the Projects/Chat/Team/More nav). Andy confirmed the SW
update/reload banner has the same issue.
Top-anchor the whole toast family at <=768px, using --safe-top so it
clears the notch/status bar, per Andy's steer ('should top align more
than bottom align'). Desktop placement unchanged.
![clagentic-reviewer[bot]](https://avatars.githubusercontent.com/in/3944489?s=60&v=4){kind=small}
There was a problem hiding this comment.
PEACHES — clean
Reviewed PR #297 (fix/lr-2fdd-toast-mobile-anchoring) against the rulebook. No blocking findings.
Coverage
-
Toast family consistency (all three mobile-anchored):
.toast(base.css ~207–229): base statebottom:80px; mobile override (lines 294–298) top-anchors tocalc(var(--safe-top) + 12px)withbottom:auto.sw-update-banner(base.css ~237–261): base statebottom:80px; mobile override (lines 294–298) top-anchors consistently.toast-diagnostic(diagnostics.css ~161–185): base statebottom:80px(inherited); mobile override (lines 273–274) top-anchors consistently with matching calc expression- Verdict: All three use identical mobile formula. No drift or partial fix.
-
Safe-area inset properly defined:
--safe-topdeclared at:root(base.css line 105):env(safe-area-inset-top, 0px)— iOS notch and status bar safe zone is respected; fallback to 0 for non-notched devices- Formula
calc(var(--safe-top) + 12px)adds breathing room below the safe area
-
Media query scope (mobile-only, desktop unchanged):
@media (max-width: 768px)in base.css (lines 293–304) and diagnostics.css (lines 261–279) — strict viewport guard- Base styles (bottom:80px) remain active for ≥769px
- Desktop layout preserved
-
Transform animations preserved:
- Visible state (
.toast.visible,.sw-update-banner.visible):transform: translateX(-50%) translateY(0)(lines 300–303) - Hidden state:
transform: translateX(-50%) translateY(-8px)(line 298) — off-screen translation works with top-anchoring .toast-diagnostic.visible(lines 276–278):transform: translateY(0)(margin-left:auto removed, left:16px/right:16px layout on mobile only, correct)
- Visible state (
-
z-index / stacking context:
.toastand.sw-update-bannerremain z-index 400 (no change).toast-diagnosticremains z-index 450 (no change)- No regress: toasts will sit above the notch
-
Brand rules (clagentic-console.*):
- CSS-only fix; no user-facing strings touched
- Comments correctly reference lr-2fdd and quote Andy's steer ("should top align more than bottom align")
-
No JS inline styles (AMoS code-craft — assertion verified):
lib/public/modules/notifications.js: Applies only.visibleclass; nostyle.top/style.bottommanipulationlib/public/modules/utils.js:showToast()applies classes only; detailcssTextis layout-independentlib/public/modules/diagnostics.js: Toast creation uses class-based styling only; no inline positioning- Verdict: CSS fix is pure; no JS touch. BOBBIE skip is sound.
Conclusion
The fix is narrow, consistent, and addresses the reported iOS occlusion issue. All three toast families (.toast, .sw-update-banner, .toast-diagnostic) are mobile-anchored to a common formula respecting the safe-area inset. Desktop placement is unchanged. No blocking issues found.
clagentic gate-note — authorized
Authorize rationale: PEACHES clean at 76c0e25 (pullrequestreview-4612275948); BOBBIE skipped per task lr-2fdd (CSS-only diff, no code-exposure surface, reviewer_required:false); tests 587/588 (1 known pre-existing unrelated failure settings-preflight-lr-1a26). Authorized by holden on behalf of andy. |
|
This issue has been resolved in version 1.6.0-beta.2 (beta). To update, run: |
What changed
Top-anchors the entire toast family on mobile (<=768px) instead of bottom-anchoring at
bottom: 80px:.toast(base.css:207) +.toast.visible.sw-update-banner(base.css:236) +.sw-update-banner.visible.toast-diagnostic(diagnostics.css:161) +.toast-diagnostic.visible(mobile override block, diagnostics.css:261)All three now use
top: calc(var(--safe-top) + 12px); bottom: auto;inside a@media (max-width: 768px)block, with the slide-in transform flipped from translateY(8px)->0 to translateY(-8px)->0 so the entrance animation still reads correctly from the new anchor side. Desktop (position: fixed; bottom: 80px) is unchanged.Approach justification
Andy's steer was explicit: "should top align more than bottom align." Of the three options in the task brief:
Result: this is a CSS-only change. No JS files were touched, so BOBBIE is skippable per the task brief (JS code paths untouched).
--safe-top (env(safe-area-inset-top, 0px)) already existed as a root custom property (base.css:105) and is used elsewhere, so this reuses the existing safe-area convention rather than introducing a new one.
Verify
Tests
npm test: 588 tests, 587 pass, 1 pre-existing failure (test/settings-preflight-lr-1a26.test.js:100, "validateSettingsObject: multiple unknown hook keys produce one warning each") -- matches the known pre-existing failure named in the task brief. No new failures introduced by this change (CSS-only diff, no code paths touched by that test).
Task
lr-2fdd
Land via AMoS -> PEACHES -> NAOMI. CSS/positioning-only; BOBBIE skippable (no JS touched).