feat(manacore/web): add responsive mobile styles for PWA readiness

Navigation:
- PillNavigation: icon-only pills on mobile (<640px), 44px min touch targets
- QuickInputBar: tighter padding and smaller height on mobile
- Main content area: reduced padding on small screens (px-3 py-4)

Typography & Global:
- Responsive heading sizes (h1-h3 scale down on mobile)
- Safe-area body padding for PWA standalone mode

Module ListViews:
- Todo: 44px min-height task items, larger checkboxes on mobile
- Calendar: 44px min-height event cards, larger quick-add input
- Contacts: 44px min-height contact items
- Chat: min-h-[44px] conversation items, tighter container padding

Layout:
- SplitPaneLayout: stacks vertically on mobile (<768px), hides resize handle

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Till JS 2026-04-05 17:23:24 +02:00
parent 63d3ba7e5e
commit 98dbcefe90
9 changed files with 135 additions and 6 deletions

View file

@ -586,6 +586,20 @@
z-index: auto;
}
/* Mobile: tighter padding, full-width input */
@media (max-width: 640px) {
.quick-input-bar {
padding: 0.5rem 0.5rem;
height: 64px;
}
.input-container {
padding: 0.5rem 1rem;
height: 48px;
gap: 0.5rem;
}
}
/* Leave space for FAB on mobile */
@media (max-width: 900px) {
.quick-input-bar.has-fab-right {