fix: iOS PWA status bar overlap issue on mobile devices

- Add PWA detection logic to App.jsx
- Apply dynamic padding to header and sidebar in PWA mode
- Update viewport meta tag for better iOS compatibility
- Change status bar style to black-translucent for PWA
- Add CSS variables for safe area insets with fallback support

This ensures menu button and sidebar content are properly visible
below the iOS status bar when installed as a PWA.
This commit is contained in:
Takumi Mori
2025-09-01 00:55:13 +09:00
parent e5709d71e0
commit 975e4b04a6
5 changed files with 125 additions and 12 deletions

View File

@@ -77,6 +77,35 @@ function AppContent() {
const [activeSessions, setActiveSessions] = useState(new Set()); // Track sessions with active conversations
const { ws, sendMessage, messages } = useWebSocketContext();
// Detect if running as PWA
const [isPWA, setIsPWA] = useState(false);
useEffect(() => {
// Check if running in standalone mode (PWA)
const checkPWA = () => {
const isStandalone = window.matchMedia('(display-mode: standalone)').matches ||
window.navigator.standalone ||
document.referrer.includes('android-app://');
setIsPWA(isStandalone);
// Add class to body for CSS targeting
if (isStandalone) {
document.body.classList.add('pwa-mode');
} else {
document.body.classList.remove('pwa-mode');
}
};
checkPWA();
// Listen for changes
window.matchMedia('(display-mode: standalone)').addEventListener('change', checkPWA);
return () => {
window.matchMedia('(display-mode: standalone)').removeEventListener('change', checkPWA);
};
}, []);
useEffect(() => {
const checkMobile = () => {
@@ -561,6 +590,8 @@ function AppContent() {
latestVersion={latestVersion}
currentVersion={currentVersion}
onShowVersionModal={() => setShowVersionModal(true)}
isPWA={isPWA}
isMobile={isMobile}
/>
</div>
</div>
@@ -606,6 +637,8 @@ function AppContent() {
latestVersion={latestVersion}
currentVersion={currentVersion}
onShowVersionModal={() => setShowVersionModal(true)}
isPWA={isPWA}
isMobile={isMobile}
/>
</div>
</div>
@@ -622,6 +655,7 @@ function AppContent() {
sendMessage={sendMessage}
messages={messages}
isMobile={isMobile}
isPWA={isPWA}
onMenuClick={() => setSidebarOpen(true)}
isLoading={isLoadingProjects}
onInputFocusChange={setIsInputFocused}