From fd94c58fea0b6d8be98a41681f08259765fb51d3 Mon Sep 17 00:00:00 2001 From: Ulas Date: Tue, 31 Mar 2026 12:26:59 +0200 Subject: [PATCH] fix: hide FAB when virtual keyboard is open on mobile Uses visualViewport resize event to detect keyboard state (viewport height < 75% of window height). Sets body.keyboard-visible class; CSS hides .fab and .page-fab via visibility:hidden on screens < 1024px. Co-Authored-By: Claude Sonnet 4.6 --- CHANGELOG.md | 1 + public/router.js | 12 ++++++++++++ public/styles/layout.css | 9 +++++++++ 3 files changed, 22 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 04f0872..0e9e317 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed - Mobile: toast notifications no longer overlap with the bottom navigation bar — introduced `--nav-bottom-height` token (scroll area 56px + dots indicator 12px) used consistently by toast container and app content padding +- Mobile: FAB and page-FAB are now hidden when the virtual keyboard is open, preventing them from covering form inputs; detection uses `visualViewport.resize` with a 75% height threshold ### Added - Notes: client-side full-text search bar in toolbar — filters by title and content instantly; shows "Keine Treffer" empty state when no match diff --git a/public/router.js b/public/router.js index 19ff1ea..435514a 100644 --- a/public/router.js +++ b/public/router.js @@ -410,6 +410,18 @@ window.addEventListener('auth:expired', () => { navigate('/login'); }); +// -------------------------------------------------------- +// Virtuelle Tastatur: FAB ausblenden wenn Keyboard offen +// Erkennung via visualViewport — Höhe < 75% des Fensters = Keyboard aktiv. +// Nur auf Mobilgeräten relevant (< 1024px), Desktop hat keine virtuelle Tastatur. +// -------------------------------------------------------- +if (window.visualViewport) { + window.visualViewport.addEventListener('resize', () => { + const keyboardVisible = window.visualViewport.height < window.innerHeight * 0.75; + document.body.classList.toggle('keyboard-visible', keyboardVisible); + }); +} + // -------------------------------------------------------- // Initialisierung // -------------------------------------------------------- diff --git a/public/styles/layout.css b/public/styles/layout.css index 68e63ba..8562645 100644 --- a/public/styles/layout.css +++ b/public/styles/layout.css @@ -872,6 +872,15 @@ } } +/* FAB und page-fab ausblenden wenn virtuelle Tastatur offen (nur Mobile) */ +@media (max-width: 1023px) { + .keyboard-visible .fab, + .keyboard-visible .page-fab { + visibility: hidden; + pointer-events: none; + } +} + /* -------------------------------------------------------- * Form-Elemente * -------------------------------------------------------- */