m/paliad
1
0
Fork 0
Code Issues 146 Pull Requests 8 Actions 1 Packages Projects Releases Wiki Activity

Paliadin chat bubble overlays bottom navbar on PWA mobile — lift above the navbar #100

New Issue
Open
opened 2026-05-25 13:22:02 +00:00 by mAi · 1 comment
mAi commented 2026-05-25 13:22:02 +00:00
Collaborator
Copy Link

m's report (2026-05-25 15:21)

And the ai chat bubble is overlaying the bottom navbar for the pwa - can we put it higher on mobile?

Scope

On mobile (especially PWA install / standalone display) the Paliadin chat bubble (the floating button that opens the widget) sits at a bottom: N value that collides with the PWA's bottom navigation bar. Bubble should clear the navbar visually.

What to do

  1. Find the chat bubble's positioning in frontend/src/client/paliadin*.ts / paliadin-widget.ts or frontend/src/styles/global.css (.paliadin-fab, .paliadin-bubble, similar class).
  2. Add a mobile-breakpoint rule that raises the bubble above the bottom navbar. Two options:
    • A. Hardcoded offset — bottom: calc(var(--bottom-nav-height) + 16px) if a CSS variable exists for the navbar height; else hardcoded e.g. bottom: 72px on mobile breakpoint.
    • B. Use env(safe-area-inset-bottom) + add a literal nav-bar offset.
  3. Verify on mobile viewports 320 / 375 / 414 / 768 px AND in standalone PWA display mode (display-mode: standalone).
  4. Desktop layout unchanged.

Files most likely touched

  • frontend/src/styles/global.css (mobile breakpoint rule for the bubble)
  • Possibly frontend/src/client/paliadin-widget.ts if positioning is JS-driven

Hard rules

  • Don't change desktop bubble position.
  • Don't break the widget open/close animation.
  • go build ./... && go test ./internal/... && cd frontend && bun run build clean.
  • Branch: mai/<worker>/paliadin-bubble-mobile-offset.

Out of scope

  • Resizing the bubble.
  • Adding a hide-on-scroll behavior.

Reporting

mai report completed with branch + SHAs + verification: open paliad.de on mobile, scroll near the bottom navbar, confirm the chat bubble sits above the navbar with comfortable spacing.

## m's report (2026-05-25 15:21) > And the ai chat bubble is overlaying the bottom navbar for the pwa - can we put it higher on mobile? ## Scope On mobile (especially PWA install / standalone display) the Paliadin chat bubble (the floating button that opens the widget) sits at a `bottom: N` value that collides with the PWA's bottom navigation bar. Bubble should clear the navbar visually. ## What to do 1. Find the chat bubble's positioning in `frontend/src/client/paliadin*.ts` / `paliadin-widget.ts` or `frontend/src/styles/global.css` (`.paliadin-fab`, `.paliadin-bubble`, similar class). 2. Add a mobile-breakpoint rule that raises the bubble above the bottom navbar. Two options: - **A. Hardcoded offset** — `bottom: calc(var(--bottom-nav-height) + 16px)` if a CSS variable exists for the navbar height; else hardcoded e.g. `bottom: 72px` on mobile breakpoint. - **B. Use `env(safe-area-inset-bottom)`** + add a literal nav-bar offset. 3. Verify on mobile viewports 320 / 375 / 414 / 768 px AND in standalone PWA display mode (`display-mode: standalone`). 4. Desktop layout unchanged. ## Files most likely touched - `frontend/src/styles/global.css` (mobile breakpoint rule for the bubble) - Possibly `frontend/src/client/paliadin-widget.ts` if positioning is JS-driven ## Hard rules - Don't change desktop bubble position. - Don't break the widget open/close animation. - `go build ./... && go test ./internal/... && cd frontend && bun run build` clean. - Branch: `mai/<worker>/paliadin-bubble-mobile-offset`. ## Out of scope - Resizing the bubble. - Adding a hide-on-scroll behavior. ## Reporting `mai report completed` with branch + SHAs + verification: open paliad.de on mobile, scroll near the bottom navbar, confirm the chat bubble sits above the navbar with comfortable spacing.
mAi self-assigned this 2026-05-25 13:22:02 +00:00
mAi commented 2026-05-25 13:59:11 +00:00
Author
Collaborator
Copy Link

Fix

Root cause was a breakpoint mismatch, not a math bug: the trigger's lift rule was scoped to @media (max-width: 640px) while .bottom-nav itself appears at @media (max-width: 767px). Phones in landscape and small tablets between 641–767 px saw the desktop bottom: 20px and got covered by the navbar. On smaller PWA viewports (≤640 px) the lift was firing but the gap was tight (16 px) on top of a hardcoded 72px offset, which would silently drift if --bottom-nav-height ever changed.

Two changes in frontend/src/styles/global.css:

  1. Widened the trigger lift breakpoint to 767 px so it matches the .bottom-nav breakpoint exactly — no gap window where the navbar shows but the bubble doesn't lift.
  2. Replaced hardcoded 72px with calc(var(--bottom-nav-height, 56px) + 16px + env(safe-area-inset-bottom, 0px)) so the math tracks the navbar-height variable already used elsewhere (e.g. .dashboard-save-toast at line 9691, .dashboard-modal-content margin at 4036–4037).

The drawer's full-screen rule (.paliadin-widget-drawer { width: 100vw }) stays at ≤640px — only the trigger lift moves.

Math check (≤767 px)

  • .bottom-nav visual height: 56 px (--bottom-nav-height) + env(safe-area-inset-bottom)
  • .paliadin-widget-trigger bottom: 56 + 16 + env(safe-area-inset-bottom)
  • Gap between bubble bottom edge and navbar top edge: 16 px
  • Bubble is 56 px tall and right-aligned (right: 20px) — out of the center FAB-circle's column entirely.

Verification

  • go build ./... — clean
  • go test ./internal/... — all green (auth, branding, calc, changelog, db, handlers, offices, services)
  • cd frontend && bun run build — clean (i18n codegen: 2862 keys (unchanged), i18n scan: data-i18n attributes clean)
  • dist/assets/global.css shipped the new @media (max-width: 767px) block with the calc-based offset
  • Visual PWA-mode check not run from the worker (widget is owner-gated to m's email; in-page verification needs m's login). The math is straightforward and matches the existing pattern used by .dashboard-save-toast (line 9691) — please eyeball on your phone after deploy and re-open this issue if anything still touches the navbar.

Hard-rule audit

  • Desktop bubble position unchanged (bottom: 20px outside the media query)
  • Widget open/close transitions unchanged (.paliadin-widget-drawer--visible and .paliadin-widget-scrim--visible untouched)
  • No JS changes

Out of scope (left alone)

  • Bubble size
  • Hide-on-scroll behavior

Files touched

  • frontend/src/styles/global.css — only the Paliadin inline widget block (lines ~15171–15268)

Branch + commit

  • Branch: mai/demeter/gitster-paliadin-chat
  • Commit: 013facb9db
## Fix Root cause was a breakpoint mismatch, not a math bug: the trigger's lift rule was scoped to `@media (max-width: 640px)` while `.bottom-nav` itself appears at `@media (max-width: 767px)`. Phones in landscape and small tablets between 641–767 px saw the desktop `bottom: 20px` and got covered by the navbar. On smaller PWA viewports (≤640 px) the lift was firing but the gap was tight (16 px) on top of a hardcoded `72px` offset, which would silently drift if `--bottom-nav-height` ever changed. Two changes in `frontend/src/styles/global.css`: 1. **Widened the trigger lift breakpoint to 767 px** so it matches the `.bottom-nav` breakpoint exactly — no gap window where the navbar shows but the bubble doesn't lift. 2. **Replaced hardcoded `72px` with `calc(var(--bottom-nav-height, 56px) + 16px + env(safe-area-inset-bottom, 0px))`** so the math tracks the navbar-height variable already used elsewhere (e.g. `.dashboard-save-toast` at line 9691, `.dashboard-modal-content` margin at 4036–4037). The drawer's full-screen rule (`.paliadin-widget-drawer { width: 100vw }`) stays at `≤640px` — only the trigger lift moves. ## Math check (≤767 px) - `.bottom-nav` visual height: `56 px (--bottom-nav-height) + env(safe-area-inset-bottom)` - `.paliadin-widget-trigger` `bottom`: `56 + 16 + env(safe-area-inset-bottom)` - Gap between bubble bottom edge and navbar top edge: **16 px** - Bubble is 56 px tall and right-aligned (`right: 20px`) — out of the center FAB-circle's column entirely. ## Verification - `go build ./...` — clean - `go test ./internal/...` — all green (auth, branding, calc, changelog, db, handlers, offices, services) - `cd frontend && bun run build` — clean (`i18n codegen: 2862 keys (unchanged)`, `i18n scan: data-i18n attributes clean`) - `dist/assets/global.css` shipped the new `@media (max-width: 767px)` block with the calc-based offset - Visual PWA-mode check not run from the worker (widget is owner-gated to m's email; in-page verification needs m's login). The math is straightforward and matches the existing pattern used by `.dashboard-save-toast` (line 9691) — please eyeball on your phone after deploy and re-open this issue if anything still touches the navbar. ## Hard-rule audit - Desktop bubble position unchanged (`bottom: 20px` outside the media query) - Widget open/close transitions unchanged (`.paliadin-widget-drawer--visible` and `.paliadin-widget-scrim--visible` untouched) - No JS changes ## Out of scope (left alone) - Bubble size - Hide-on-scroll behavior ## Files touched - `frontend/src/styles/global.css` — only the Paliadin inline widget block (lines ~15171–15268) ## Branch + commit - Branch: `mai/demeter/gitster-paliadin-chat` - Commit: https://mgit.msbls.de/m/paliad/commit/013facb9dbdd6ac9c5a1de7392253767d94e0be5
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
deferred
Parked — not pursuing now, may un-park later
done
Work completed by an agent; awaiting m to close
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
mAi m
No Assignees mAi
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: m/paliad#100
No description provided.
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?