admin-mrrm/mrrmlabapp

Fork 0

[Bug] Web-Drawer (Mobile-Viewport) öffnet als Bottom-Sheet — Items kleben unten, kein klassischer Side-Drawer #347

New issue

Closed

opened 2026-05-19 22:39:51 +02:00 by admin-mrrm · 1 comment

admin-mrrm commented

2026-05-19 22:39:51 +02:00

Owner

Beobachtetes Verhalten

Auf Mobile-Viewport (Web) öffnet der Hamburger-Button keinen klassischen Side-Drawer, sondern ein Bottom-Sheet, das nahezu die gesamte Viewport-Höhe einnimmt. Die Navigations-Items kleben am unteren Bildschirmrand, der gesamte obere Bereich ist leer. Siehe Screenshot.

Erwartetes Verhalten

Off-Canvas Side-Drawer von links (Material/HIG-Konvention für Hamburger):

Breite ~280–320 px (nicht volle Viewport-Breite)
Items oben ausgerichtet, direkt unter optionalem Header
Halbtransparentes Backdrop über dem Rest des Screens
Schließt per Tap aufs Backdrop oder Swipe nach links

Reproduktion

App im Mobile-Viewport öffnen (z.B. app.mrrm.de auf Smartphone-Browser, oder DevTools Responsive Mode < $gtSm Breakpoint)
Hamburger-Icon (☰) oben links antippen
Drawer öffnet als Bottom-Sheet, Items unten

Umgebung

App: web
Version / Commit: aktueller main (post-#336)
OS / Browser / Device: Android, Vivaldi auf app.mrrm.de (vom User getestet)

Code-Hinweis

apps/web/src/routes/layout.tsx:75-89 verwendet Tamagui Sheet mit snapPointsMode="fit". Tamagui Sheet ist explizit ein Bottom-Sheet — kein Side-Mode verfügbar. Für Side-Drawer-Verhalten braucht es:

Eigene Off-Canvas-Implementierung (absolute YStack + Backdrop + translateX-Animation), oder
Dialog mit eigenem Positioning, oder
Externe Komponente (z.B. react-spring Drawer)

Mobile (Expo) nutzt bereits @react-navigation/drawer — dort ist das Verhalten korrekt. Dieser Bug-Report betrifft nur die Web-Variante.

Bezug

Einführung: #336 (App-Shell-Refactor)
Milestone: v0.4.5 (App-Shell & Listen-UX) — sollte zusammen mit #336-Followup behoben werden, damit App-Shell konsistent ausgeliefert wird

## Beobachtetes Verhalten Auf Mobile-Viewport (Web) öffnet der Hamburger-Button keinen klassischen Side-Drawer, sondern ein **Bottom-Sheet**, das nahezu die gesamte Viewport-Höhe einnimmt. Die Navigations-Items kleben am unteren Bildschirmrand, der gesamte obere Bereich ist leer. Siehe Screenshot. ## Erwartetes Verhalten **Off-Canvas Side-Drawer von links** (Material/HIG-Konvention für Hamburger): - Breite ~280–320 px (nicht volle Viewport-Breite) - Items **oben** ausgerichtet, direkt unter optionalem Header - Halbtransparentes Backdrop über dem Rest des Screens - Schließt per Tap aufs Backdrop oder Swipe nach links ## Reproduktion 1. App im Mobile-Viewport öffnen (z.B. `app.mrrm.de` auf Smartphone-Browser, oder DevTools Responsive Mode < `$gtSm` Breakpoint) 2. Hamburger-Icon (☰) oben links antippen 3. Drawer öffnet als Bottom-Sheet, Items unten ## Umgebung - App: **web** - Version / Commit: aktueller `main` (post-#336) - OS / Browser / Device: Android, Vivaldi auf `app.mrrm.de` (vom User getestet) ## Code-Hinweis `apps/web/src/routes/layout.tsx:75-89` verwendet Tamagui `Sheet` mit `snapPointsMode="fit"`. Tamagui `Sheet` ist explizit ein **Bottom-Sheet** — kein Side-Mode verfügbar. Für Side-Drawer-Verhalten braucht es: - Eigene Off-Canvas-Implementierung (absolute YStack + Backdrop + translateX-Animation), **oder** - `Dialog` mit eigenem Positioning, **oder** - Externe Komponente (z.B. `react-spring` Drawer) Mobile (Expo) nutzt bereits `@react-navigation/drawer` — dort ist das Verhalten korrekt. Dieser Bug-Report betrifft nur die Web-Variante. ## Bezug - Einführung: #336 (App-Shell-Refactor) - Milestone: v0.4.5 (App-Shell & Listen-UX) — sollte zusammen mit #336-Followup behoben werden, damit App-Shell konsistent ausgeliefert wird

admin-mrrm added this to the v0.4.5 — App-Shell & Listen-UX milestone

2026-05-19 22:39:51 +02:00

admin-mrrm added the

type/bug

area/ui

area/web

labels

2026-05-19 22:39:51 +02:00

admin-mrrm referenced this issue

2026-05-19 22:44:38 +02:00

[Bug] Einstellungs-Bereich: Settings-Navigation soll den Drawer/Sidebar kapern, statt eigener Top-/Side-Bar (Web) #348

admin-mrrm referenced this issue from a commit

2026-05-20 07:18:46 +02:00

fix(#347): Web-Drawer als Side-Drawer statt Bottom-Sheet

admin-mrrm referenced this issue

2026-05-20 07:18:57 +02:00

fix(#347): Web-Drawer als Side-Drawer statt Bottom-Sheet #357

admin-mrrm referenced this issue

2026-05-20 07:23:44 +02:00

fix(#348): Settings-Nav kapert den globalen Drawer/Sidebar #358

admin-mrrm referenced this issue from a commit

2026-05-20 07:41:03 +02:00

Merge pull request 'fix(#347): Web-Drawer als Side-Drawer statt Bottom-Sheet' (#357) from fix/347-web-side-drawer into main

admin-mrrm referenced this issue

2026-05-20 07:50:55 +02:00

feat(app-shell): Navigation in Sidebar links + Profil-Menü rechts oben + separater Einstellungsbereich (Web + Mobile) #336

pm-bot added a new dependency

2026-05-24 18:15:54 +02:00

#336 feat(app-shell): Navigation in Sidebar links + Profil-Menü rechts oben + separater Einstellungsbereich (Web + Mobile)

pm-bot referenced this issue

2026-05-24 18:15:55 +02:00

[Sprint-Queue] v0.4.5 — Reihenfolge für Devs #400

pm-bot commented

2026-05-24 18:31:06 +02:00

Collaborator

PM-Housekeeping: Fix wurde bereits am 2026-05-20 via PR #357 (Commit f5e0109) auf main gemerged und ist seitdem in Prod ausgerollt. Issue wurde nur nicht automatisch geschlossen weil der Commit-Title fix(#347): statt Fixes #347 verwendet.

Schließe als verifiziert-implementiert. Falls bei dir lokal das Verhalten noch nicht funktioniert: bitte App-Cache leeren und neu laden — wieder öffnen wenn der Bug reproduzierbar bleibt.

**PM-Housekeeping:** Fix wurde bereits am 2026-05-20 via PR #357 (Commit `f5e0109`) auf `main` gemerged und ist seitdem in Prod ausgerollt. Issue wurde nur nicht automatisch geschlossen weil der Commit-Title `fix(#347):` statt `Fixes #347` verwendet. Schließe als verifiziert-implementiert. Falls bei dir lokal das Verhalten noch nicht funktioniert: bitte App-Cache leeren und neu laden — wieder öffnen wenn der Bug reproduzierbar bleibt.

pm-bot closed this issue

2026-05-24 18:31:06 +02:00

pm-bot referenced this issue

2026-05-25 11:41:38 +02:00

[arch-question] CI-Guard für Close-Keyword-Convention in Merge-Commits #406

~~pm-bot referenced this issue 2026-05-27 22:43:32 +02:00~~

Portfolio-Status KW 2026-W22 #412

pm-bot referenced this issue

2026-06-05 06:54:08 +02:00

feat(ci): pr-convention-check Drone-Step + Branch-Protection #434