/* * Mobile-mode tweaks. Activated by adding the .fh-mobile class to * , which modules/mobile.js does when ?mobile=1 is on the URL * (the Android client appends this; web users never see it). * * Goals, not a full mobile redesign: * - Collapse the desktop dock by default — it crowds narrow screens * - Bump tap-target sizes to ~44dp / 44px minimum * - Stretch dropdowns + dialogs to use the full width * - Tighten the navbar so the brand doesn't crowd dropdowns * * Anything that isn't .fh-mobile keeps the existing desktop layout * unchanged. */ body.fh-mobile { font-size: 16px; } body.fh-mobile .navbar { padding-top: 0.25rem; padding-bottom: 0.25rem; } body.fh-mobile .navbar-brand { font-size: 1rem; } /* Larger tap targets across all action surfaces. */ body.fh-mobile .btn, body.fh-mobile .dropdown-item, body.fh-mobile .form-control, body.fh-mobile .form-select { min-height: 44px; padding-top: 0.6rem; padding-bottom: 0.6rem; } /* The dock is a desktop affordance — collapsed at mobile widths * unless the user explicitly drops something into it. Settings * still works for re-enabling positions. */ body.fh-mobile .applet-dock { --dock-default-size: 0; } /* Lightboxes and modals: full-screen on phones. */ body.fh-mobile .lightbox-content-form { max-width: 100% !important; width: calc(100vw - 16px); margin: 8px; padding: 16px; max-height: calc(100vh - 16px); overflow-y: auto; } /* Dropdowns: align to the right edge so they don't overflow off-screen. */ body.fh-mobile .dropdown-menu { max-width: calc(100vw - 32px); } /* Tree view text — desktop sizes are fiddly on a phone. */ body.fh-mobile .treeview { font-size: 1rem; } body.fh-mobile .treeview .list-group-item { padding-top: 0.6rem; padding-bottom: 0.6rem; } /* Sidebar toggle hint: hidden on desktop, prominent on mobile when * the sidebar is collapsed so the user can find their way back. */ body.fh-mobile .sidebar-toggle { min-height: 44px; min-width: 44px; } /* Form inputs in lightboxes: full-width by default. */ body.fh-mobile .lightbox-content-form input, body.fh-mobile .lightbox-content-form textarea, body.fh-mobile .lightbox-content-form select { width: 100%; }