diff --git a/static/css/mobile.css b/static/css/mobile.css index 7737bd9..8e40fa1 100644 --- a/static/css/mobile.css +++ b/static/css/mobile.css @@ -68,10 +68,12 @@ opacity: 0; transition: opacity 0.3s ease; -webkit-tap-highlight-color: transparent; + pointer-events: none; } .sidebar-overlay.visible { opacity: 1; + pointer-events: auto; } /* Pull to Refresh Indicator */ @@ -183,14 +185,22 @@ height: var(--header-height-mobile); padding: 0 8px; padding-top: var(--safe-area-inset-top); + flex-wrap: nowrap; + } + + .header-left { + flex-shrink: 0; + display: flex; + align-items: center; } .app-title { - font-size: 1.25rem; + font-size: 1.125rem; } .header-center { flex: 1; + min-width: 0; max-width: none; margin: 0 8px; } @@ -201,7 +211,8 @@ } .header-right { - gap: 8px; + flex-shrink: 0; + gap: 4px; } .header-right .user-info { @@ -211,7 +222,8 @@ .header-right .button { min-width: var(--touch-target-min); min-height: var(--touch-target-min); - padding: 8px 12px; + padding: 8px 10px; + font-size: 0.875rem; } .app-body { @@ -290,21 +302,27 @@ } .app-footer { - padding: 16px; - padding-bottom: calc(16px + var(--safe-area-inset-bottom)); + padding: 12px 16px; + padding-bottom: calc(12px + var(--safe-area-inset-bottom)); } .footer-links { flex-wrap: wrap; - gap: 8px 16px; + gap: 2px 10px; justify-content: center; } .footer-links li a { - font-size: 0.75rem; - min-height: var(--touch-target-min); + font-size: 0.65rem; + min-height: 32px; display: flex; align-items: center; + padding: 4px 0; + } + + .footer-text { + font-size: 0.65rem; + margin-top: 8px; } /* File List Mobile */ @@ -340,10 +358,14 @@ } .file-item { - min-height: 64px; + flex-direction: row; + align-items: center; + min-height: 56px; padding: 12px 16px; background-color: var(--accent-color); gap: 12px; + border-radius: 0; + border: none; } .file-item-checkbox {