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 <noreply@anthropic.com>
This commit is contained in:
@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|||||||
|
|
||||||
### Fixed
|
### 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: 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
|
### Added
|
||||||
- Notes: client-side full-text search bar in toolbar — filters by title and content instantly; shows "Keine Treffer" empty state when no match
|
- Notes: client-side full-text search bar in toolbar — filters by title and content instantly; shows "Keine Treffer" empty state when no match
|
||||||
|
|||||||
@@ -410,6 +410,18 @@ window.addEventListener('auth:expired', () => {
|
|||||||
navigate('/login');
|
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
|
// Initialisierung
|
||||||
// --------------------------------------------------------
|
// --------------------------------------------------------
|
||||||
|
|||||||
@@ -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
|
* Form-Elemente
|
||||||
* -------------------------------------------------------- */
|
* -------------------------------------------------------- */
|
||||||
|
|||||||
Reference in New Issue
Block a user