Merge pull request #808 from mauriceboe/fix/modal-mobile-footer-visibility

fix: mobile polish batch (#803–#807, #810–#815)
2026-06-19 13:21:46 +00:00 · 2026-04-21 22:23:40 +02:00
parent fccf13a7e2 70ba24bfe1
commit 94e64acc34
36 changed files with 180 additions and 93 deletions
@@ -6,7 +6,11 @@
  <img src="docs/logo-trek-dark.gif" alt="TREK" height="96" />
 </picture>

-### Your trips. Your plan. Your server.
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="docs/subtitle-light.png" />
+  <source media="(prefers-color-scheme: light)" srcset="docs/subtitle-dark.png" />
+  <img src="docs/subtitle-dark.png" alt="Your trips. Your plan. Your server." height="28" />
+</picture>

 A self-hosted, real-time collaborative travel planner — with maps, budgets, packing lists, a journal, and AI built in.

@@ -61,11 +61,25 @@ export default function Navbar({ tripTitle, tripId, onBack, showBack, onShare }:
    navigate('/login', { state: { noRedirect: true } })
  }

+  // Keep track of the pending theme-transition cleanup so we can cancel it
+  // on unmount. Without this the timer fires after jsdom teardown in unit
+  // tests (document is gone) and triggers an unhandled ReferenceError that
+  // trips vitest's exit code.
+  const themeTransitionTimer = useRef<number | null>(null)
+  useEffect(() => () => {
+    if (themeTransitionTimer.current !== null) {
+      window.clearTimeout(themeTransitionTimer.current)
+      themeTransitionTimer.current = null
+    }
+  }, [])
+
  const toggleDarkMode = () => {
    document.documentElement.classList.add('trek-theme-transitioning')
    updateSetting('dark_mode', dark ? 'light' : 'dark').catch(() => {})
-    window.setTimeout(() => {
+    if (themeTransitionTimer.current !== null) window.clearTimeout(themeTransitionTimer.current)
+    themeTransitionTimer.current = window.setTimeout(() => {
      document.documentElement.classList.remove('trek-theme-transitioning')
+      themeTransitionTimer.current = null
    }, 360)
  }

@@ -89,6 +103,7 @@ export default function Navbar({ tripTitle, tripId, onBack, showBack, onShare }:
      touchAction: 'manipulation',
      paddingTop: 'env(safe-area-inset-top, 0px)',
      height: 'var(--nav-h)',
+      top: 'var(--offline-banner-h, 0px)',
      transition: 'background 240ms cubic-bezier(0.23,1,0.32,1), backdrop-filter 240ms cubic-bezier(0.23,1,0.32,1), box-shadow 240ms cubic-bezier(0.23,1,0.32,1)',
    }} className="hidden md:flex items-center px-4 gap-4 fixed top-0 left-0 right-0 z-[200]">
      {/* Left side */}
@@ -40,6 +40,22 @@ export default function OfflineBanner(): React.ReactElement | null {
  }, [])

  const hidden = isOnline && pendingCount === 0
+
+  // When the banner is visible, reserve space at the top of the page so it
+  // doesn't cover the nav/header. Uses a CSS var on <html> so we can offset
+  // via a global `body` rule instead of rewiring every layout.
+  useEffect(() => {
+    const root = document.documentElement
+    if (hidden) {
+      root.style.removeProperty('--offline-banner-h')
+    } else {
+      // 32px for icon+text row + the top safe-area inset that the banner adds
+      // in its own padding. Kept in one place so it's easy to tweak.
+      root.style.setProperty('--offline-banner-h', 'calc(env(safe-area-inset-top, 0px) + 32px)')
+    }
+    return () => { root.style.removeProperty('--offline-banner-h') }
+  }, [hidden])
+
  if (hidden) return null

  const offline = !isOnline
@@ -208,9 +208,14 @@ interface ArtikelZeileProps {
  canEdit?: boolean
 }

+// A category's first item is seeded with this sentinel because the server
+// rejects empty names. Treat it as a placeholder in the UI.
+const PACKING_PLACEHOLDER_NAME = '...'
+
 function ArtikelZeile({ item, tripId, categories, onCategoryChange, bagTrackingEnabled, bags = [], onCreateBag, canEdit = true }: ArtikelZeileProps) {
+  const isPlaceholder = item.name === PACKING_PLACEHOLDER_NAME
  const [editing, setEditing] = useState(false)
-  const [editName, setEditName] = useState(item.name)
+  const [editName, setEditName] = useState(isPlaceholder ? '' : item.name)
  const [hovered, setHovered] = useState(false)
  const [showCatPicker, setShowCatPicker] = useState(false)
  const [showBagPicker, setShowBagPicker] = useState(false)
@@ -223,7 +228,7 @@ function ArtikelZeile({ item, tripId, categories, onCategoryChange, bagTrackingE
  const handleToggle = () => togglePackingItem(tripId, item.id, !item.checked)

  const handleSaveName = async () => {
-    if (!editName.trim()) { setEditing(false); setEditName(item.name); return }
+    if (!editName.trim()) { setEditing(false); setEditName(isPlaceholder ? '' : item.name); return }
    try { await updatePackingItem(tripId, item.id, { name: editName.trim() }); setEditing(false) }
    catch { toast.error(t('packing.toast.saveError')) }
  }
@@ -275,9 +280,10 @@ function ArtikelZeile({ item, tripId, categories, onCategoryChange, bagTrackingE
      {editing && canEdit ? (
        <input
          type="text" value={editName} autoFocus
+          placeholder={isPlaceholder ? '...' : undefined}
          onChange={e => setEditName(e.target.value)}
          onBlur={handleSaveName}
-          onKeyDown={e => { if (e.key === 'Enter') handleSaveName(); if (e.key === 'Escape') { setEditing(false); setEditName(item.name) } }}
+          onKeyDown={e => { if (e.key === 'Enter') handleSaveName(); if (e.key === 'Escape') { setEditing(false); setEditName(isPlaceholder ? '' : item.name) } }}
          style={{ flex: 1, fontSize: 13.5, padding: '2px 8px', borderRadius: 6, border: '1px solid var(--border-primary)', outline: 'none', fontFamily: 'inherit' }}
        />
      ) : (
@@ -286,7 +292,7 @@ function ArtikelZeile({ item, tripId, categories, onCategoryChange, bagTrackingE
          style={{
            flex: 1, fontSize: 13.5,
            cursor: !canEdit || item.checked ? 'default' : 'text',
-            color: item.checked ? 'var(--text-faint)' : 'var(--text-primary)',
+            color: isPlaceholder ? 'var(--text-faint)' : (item.checked ? 'var(--text-faint)' : 'var(--text-primary)'),
            transition: 'color 200ms cubic-bezier(0.23,1,0.32,1)',
            textDecoration: item.checked ? 'line-through' : 'none',
          }}
@@ -168,7 +168,7 @@ export default function DayDetailPanel({ day, days, places, categories = [], tri
  const font = { fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }

  return (
-    <div className="fixed z-50 bottom-[96px] md:bottom-5" style={{ left: `calc(${leftWidth}px + (100vw - ${leftWidth}px - ${rightWidth}px) / 2)`, transform: 'translateX(-50%)', width: `min(800px, calc(100vw - ${leftWidth}px - ${rightWidth}px - 32px))`, ...font }}>
+    <div className="fixed z-50" style={{ bottom: 'calc(var(--bottom-nav-h) + 20px)', left: `calc(${leftWidth}px + (100vw - ${leftWidth}px - ${rightWidth}px) / 2)`, transform: 'translateX(-50%)', width: `min(800px, calc(100vw - ${leftWidth}px - ${rightWidth}px - 32px))`, ...font }}>
      <div style={{
        background: 'var(--bg-elevated)',
        backdropFilter: 'blur(40px) saturate(180%)',
@@ -360,6 +360,25 @@ export default function PlaceFormModal({
      onClose={onClose}
      title={place ? t('places.editPlace') : t('places.addPlace')}
      size="lg"
+      footer={
+        <div className="flex justify-end gap-3">
+          <button
+            type="button"
+            onClick={onClose}
+            className="px-4 py-2 text-sm text-gray-600 hover:text-gray-900 border border-gray-200 rounded-lg hover:bg-gray-50"
+          >
+            {t('common.cancel')}
+          </button>
+          <button
+            type="button"
+            onClick={handleSubmit}
+            disabled={isSaving || hasTimeError}
+            className="px-6 py-2 bg-slate-900 text-white text-sm rounded-lg hover:bg-slate-700 disabled:opacity-60 font-medium"
+          >
+            {isSaving ? t('common.saving') : place ? t('common.update') : t('common.add')}
+          </button>
+        </div>
+      }
    >
      <form onSubmit={handleSubmit} className="space-y-4" onPaste={handlePaste}>
        {/* Place Search */}
@@ -613,23 +632,6 @@ export default function PlaceFormModal({
          </div>
        )}

-        {/* Actions */}
-        <div className="flex justify-end gap-3 pt-2 border-t border-gray-100">
-          <button
-            type="button"
-            onClick={onClose}
-            className="px-4 py-2 text-sm text-gray-600 hover:text-gray-900 border border-gray-200 rounded-lg hover:bg-gray-50"
-          >
-            {t('common.cancel')}
-          </button>
-          <button
-            type="submit"
-            disabled={isSaving || hasTimeError}
-            className="px-6 py-2 bg-slate-900 text-white text-sm rounded-lg hover:bg-slate-700 disabled:opacity-60 font-medium"
-          >
-            {isSaving ? t('common.saving') : place ? t('common.update') : t('common.add')}
-          </button>
-        </div>
      </form>
    </Modal>
  )
@@ -203,8 +203,10 @@ describe('ReservationModal', () => {
    fireEvent.change(datePickers[1], { target: { value: '2025-06-09' } });
    fireEvent.change(timePickers[1], { target: { value: '09:00' } });

-    // When isEndBeforeStart=true the submit button is disabled, so submit the form directly
-    const form = screen.getByRole('button', { name: /^Add$/i }).closest('form')!;
+    // When isEndBeforeStart=true the submit button is disabled, so fire submit on the form directly.
+    // The Save button now lives in the Modal's sticky footer (outside the <form>), so we query
+    // the form by tag instead of walking up from the button.
+    const form = document.querySelector('form')!;
    fireEvent.submit(form);

    expect(onSave).not.toHaveBeenCalled();
@@ -271,7 +271,22 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
  const labelStyle = { display: 'block', fontSize: 11, fontWeight: 600, color: 'var(--text-faint)', marginBottom: 5, textTransform: 'uppercase', letterSpacing: '0.03em' }

  return (
-    <Modal isOpen={isOpen} onClose={onClose} title={reservation ? t('reservations.editTitle') : t('reservations.newTitle')} size="2xl">
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      title={reservation ? t('reservations.editTitle') : t('reservations.newTitle')}
+      size="2xl"
+      footer={
+        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
+          <button type="button" onClick={onClose} style={{ padding: '8px 16px', borderRadius: 10, border: '1px solid var(--border-primary)', background: 'none', fontSize: 12, cursor: 'pointer', fontFamily: 'inherit', color: 'var(--text-muted)' }}>
+            {t('common.cancel')}
+          </button>
+          <button type="button" onClick={handleSubmit} disabled={isSaving || !form.title.trim() || isEndBeforeStart} style={{ padding: '8px 20px', borderRadius: 10, border: 'none', background: 'var(--text-primary)', color: 'var(--bg-primary)', fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', opacity: isSaving || !form.title.trim() || isEndBeforeStart ? 0.5 : 1 }}>
+            {isSaving ? t('common.saving') : reservation ? t('common.update') : t('common.add')}
+          </button>
+        </div>
+      }
+    >
      <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>

        {/* Type selector */}
@@ -622,15 +637,6 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
          </>
        )}

-        {/* Actions */}
-        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8, paddingTop: 4, borderTop: '1px solid var(--border-secondary)' }}>
-          <button type="button" onClick={onClose} style={{ padding: '8px 16px', borderRadius: 10, border: '1px solid var(--border-primary)', background: 'none', fontSize: 12, cursor: 'pointer', fontFamily: 'inherit', color: 'var(--text-muted)' }}>
-            {t('common.cancel')}
-          </button>
-          <button type="submit" disabled={isSaving || !form.title.trim() || isEndBeforeStart} style={{ padding: '8px 20px', borderRadius: 10, border: 'none', background: 'var(--text-primary)', color: 'var(--bg-primary)', fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', opacity: isSaving || !form.title.trim() || isEndBeforeStart ? 0.5 : 1 }}>
-            {isSaving ? t('common.saving') : reservation ? t('common.update') : t('common.add')}
-          </button>
-        </div>
      </form>
    </Modal>
  )
@@ -148,13 +148,15 @@ function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateTo
      onMouseEnter={e => e.currentTarget.style.boxShadow = '0 2px 12px rgba(0,0,0,0.06)'}
      onMouseLeave={e => e.currentTarget.style.boxShadow = 'none'}
    >
-      {/* Header */}
+      {/* Header — wraps to a second row on narrow screens so the status/category chips
+          never collide with the title. */}
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12,
+        flexWrap: 'wrap',
        padding: '12px 14px',
        background: confirmed ? 'rgba(22,163,74,0.06)' : 'rgba(217,119,6,0.06)',
      }}>
-        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
+        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, minWidth: 0, flexWrap: 'wrap' }}>
          <span style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            fontSize: 12, fontWeight: 600, color: confirmed ? '#16a34a' : '#d97706',
@@ -237,6 +237,16 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
      onClose={onClose}
      title={reservation ? t('transport.modalTitle.edit') : t('transport.modalTitle.create')}
      size="2xl"
+      footer={
+        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
+          <button type="button" onClick={onClose} style={{ padding: '8px 16px', borderRadius: 10, border: '1px solid var(--border-primary)', background: 'none', fontSize: 12, cursor: 'pointer', fontFamily: 'inherit', color: 'var(--text-muted)' }}>
+            {t('common.cancel')}
+          </button>
+          <button type="button" onClick={handleSubmit} disabled={isSaving || !form.title.trim()} style={{ padding: '8px 20px', borderRadius: 10, border: 'none', background: 'var(--text-primary)', color: 'var(--bg-primary)', fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', opacity: isSaving || !form.title.trim() ? 0.5 : 1 }}>
+            {isSaving ? t('common.saving') : reservation ? t('common.update') : t('common.add')}
+          </button>
+        </div>
+      }
    >
      <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>

@@ -412,15 +422,6 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
            style={{ ...inputStyle, resize: 'none', lineHeight: 1.5 }} />
        </div>

-        {/* Actions */}
-        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8, paddingTop: 4, borderTop: '1px solid var(--border-secondary)' }}>
-          <button type="button" onClick={onClose} style={{ padding: '8px 16px', borderRadius: 10, border: '1px solid var(--border-primary)', background: 'none', fontSize: 12, cursor: 'pointer', fontFamily: 'inherit', color: 'var(--text-muted)' }}>
-            {t('common.cancel')}
-          </button>
-          <button type="submit" disabled={isSaving || !form.title.trim()} style={{ padding: '8px 20px', borderRadius: 10, border: 'none', background: 'var(--text-primary)', color: 'var(--bg-primary)', fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', opacity: isSaving || !form.title.trim() ? 0.5 : 1 }}>
-            {isSaving ? t('common.saving') : reservation ? t('common.update') : t('common.add')}
-          </button>
-        </div>
      </form>
    </Modal>
  )
@@ -155,7 +155,9 @@ describe('DisplaySettingsTab', () => {
    const updateSetting = vi.fn().mockResolvedValue(undefined);
    seedStore(useSettingsStore, { settings: buildSettings({ time_format: '12h' }), updateSetting });
    render(<DisplaySettingsTab />);
-    await user.click(screen.getByText('24h (14:30)'));
+    // The label is split across a text node ('24h') and a responsive span (' (14:30)').
+    // Click the button that contains the 24h text instead of matching the full string.
+    await user.click(screen.getByRole('button', { name: /24h/ }));
    expect(updateSetting).toHaveBeenCalledWith('time_format', '24h');
  });

@@ -188,8 +188,8 @@ export default function DisplaySettingsTab(): React.ReactElement {
        <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-secondary)' }}>{t('settings.timeFormat')}</label>
        <div className="flex gap-3">
          {[
-            { value: '24h', label: '24h (14:30)' },
-            { value: '12h', label: '12h (2:30 PM)' },
+            { value: '24h', short: '24h', example: '14:30' },
+            { value: '12h', short: '12h', example: '2:30 PM' },
          ].map(opt => (
            <button
              key={opt.value}
@@ -207,7 +207,8 @@ export default function DisplaySettingsTab(): React.ReactElement {
                transition: 'all 0.15s',
              }}
            >
-              {opt.label}
+              {opt.short}
+              <span className="hidden sm:inline">{` (${opt.example})`}</span>
            </button>
          ))}
        </div>
@@ -240,14 +240,18 @@ export default function MapSettingsTab(): React.ReactElement {
                : 'border-slate-200 hover:border-slate-400 dark:border-slate-700'
            }`}
          >
-            <span className="absolute top-2 right-2 text-[9px] font-semibold tracking-wide uppercase px-1.5 py-[3px] rounded bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-300 leading-none">
-              {t('settings.mapExperimental')}
-            </span>
            <Box size={18} className="mt-0.5 flex-shrink-0 text-slate-700 dark:text-slate-300" />
-            <div>
-              <div className="text-sm font-medium text-slate-900 dark:text-white">Mapbox GL</div>
+            <div className="min-w-0">
+              <div className="text-sm font-medium text-slate-900 dark:text-white">
+                <span className="sm:hidden">Mapbox</span>
+                <span className="hidden sm:inline">Mapbox GL</span>
+              </div>
              <div className="hidden sm:block text-xs text-slate-500 mt-0.5">{t('settings.mapMapboxSubtitle')}</div>
            </div>
+            {/* Experimental badge only on ≥sm; on mobile there's no room next to the title. */}
+            <span className="hidden sm:inline-block absolute top-2 right-2 text-[9px] font-semibold tracking-wide uppercase px-1.5 py-[3px] rounded bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-300 leading-none">
+              {t('settings.mapExperimental')}
+            </span>
          </button>
        </div>
        <p className="text-xs text-slate-400 mt-2">
@@ -5,6 +5,7 @@ import { useToast } from '../../components/shared/Toast'
 import apiClient from '../../api/client'
 import { useAddonStore } from '../../store/addonStore'
 import Section from './Section'
+import ToggleSwitch from './ToggleSwitch'

 interface ProviderField {
  key: string
@@ -222,15 +223,13 @@ export default function PhotoProvidersSection(): React.ReactElement {
          {fields.map(field => (
            <div key={`${provider.id}-${field.key}`}>
              {field.input_type === 'checkbox' ? (
-                <label className="flex items-center gap-2 cursor-pointer select-none">
-                  <input
-                    type="checkbox"
-                    checked={values[field.key] === 'true'}
-                    onChange={e => handleProviderFieldChange(provider.id, field.key, e.target.checked ? 'true' : 'false')}
-                    className="w-4 h-4 rounded border-slate-300 accent-slate-900"
+                <div className="flex items-center gap-3">
+                  <ToggleSwitch
+                    on={values[field.key] === 'true'}
+                    onToggle={() => handleProviderFieldChange(provider.id, field.key, values[field.key] === 'true' ? 'false' : 'true')}
                  />
                  <span className="text-sm font-medium text-slate-700">{t(`memories.${field.label}`)}</span>
-                </label>
+                </div>
              ) : (
                <>
                  <label className="block text-sm font-medium text-slate-700 mb-1.5">{t(`memories.${field.label}`)}</label>
@@ -248,7 +247,9 @@ export default function PhotoProvidersSection(): React.ReactElement {
              )}
            </div>
          ))}
-          <div className="flex items-center gap-3">
+          {/* Wraps on mobile so the connection badge drops to its own row
+              instead of clipping off the side of the card. */}
+          <div className="flex flex-wrap items-center gap-3">
            <button
              onClick={() => handleSaveProvider(provider)}
              disabled={!canSave || !!saving[provider.id] || isProviderSaveDisabled(provider)}
@@ -266,15 +267,17 @@ export default function PhotoProvidersSection(): React.ReactElement {
              {testing
                ? <div className="w-4 h-4 border-2 border-slate-300 border-t-slate-700 rounded-full animate-spin" />
                : <Camera className="w-4 h-4" />}
-              {t('memories.testConnection')}
+              <span className="sm:hidden">{t('memories.testShort')}</span>
+              <span className="hidden sm:inline">{t('memories.testConnection')}</span>
            </button>
+            {/* On mobile the badge sits on its own row thanks to flex-wrap, so force a line break via basis-full. */}
            {connected ? (
-              <span className="text-xs font-medium text-green-600 flex items-center gap-1">
+              <span className="basis-full sm:basis-auto text-xs font-medium text-green-600 flex items-center gap-1">
                <span className="w-2 h-2 bg-green-500 rounded-full" />
                {t('memories.connected')}
              </span>
            ) : (
-              <span className="text-xs font-medium text-slate-400 flex items-center gap-1">
+              <span className="basis-full sm:basis-auto text-xs font-medium text-slate-400 flex items-center gap-1">
                <span className="w-2 h-2 bg-slate-300 rounded-full" />
                {t('memories.disconnected')}
              </span>
@@ -2,9 +2,10 @@ import React from 'react'

 export default function ToggleSwitch({ on, onToggle }: { on: boolean; onToggle: () => void }) {
  return (
-    <button onClick={onToggle}
+    <button type="button" onClick={onToggle}
      style={{
-        position: 'relative', width: 44, height: 24, borderRadius: 12, border: 'none', cursor: 'pointer',
+        position: 'relative', width: 44, height: 24, minWidth: 44, flexShrink: 0,
+        borderRadius: 12, border: 'none', padding: 0, cursor: 'pointer',
        background: on ? 'var(--accent, #111827)' : 'var(--border-primary, #d1d5db)',
        transition: 'background 0.2s',
      }}>
@@ -61,14 +61,15 @@ export default function Modal({
      <div
        className={`
          trek-modal-enter
-          rounded-2xl shadow-2xl w-full ${sizeClasses[size] || sizeClasses.md}
-          flex flex-col max-h-[calc(100vh-180px)] md:max-h-[calc(100vh-90px)]
+          rounded-2xl overflow-hidden shadow-2xl w-full ${sizeClasses[size] || sizeClasses.md}
+          flex flex-col
+          max-h-[calc(100dvh-var(--bottom-nav-h)-90px)] sm:max-h-[calc(100dvh-90px)]
        `}
        style={{ background: 'var(--bg-card)' }}
        onClick={e => e.stopPropagation()}
      >
-        {/* Header */}
-        <div className="flex items-center justify-between p-6" style={{ borderBottom: '1px solid var(--border-secondary)' }}>
+        {/* Header — stays put even while the body scrolls */}
+        <div className="flex items-center justify-between p-6 flex-shrink-0" style={{ borderBottom: '1px solid var(--border-secondary)' }}>
          <h2 className="text-lg font-semibold" style={{ color: 'var(--text-primary)' }}>{title}</h2>
          {!hideCloseButton && (
            <button
@@ -80,14 +81,14 @@ export default function Modal({
          )}
        </div>

-        {/* Body */}
-        <div className="flex-1 overflow-y-auto p-6">
+        {/* Body — scrolls when content overflows. min-h-0 lets the flex child shrink below its intrinsic height. */}
+        <div className="flex-1 overflow-y-auto p-6 min-h-0">
          {children}
        </div>

-        {/* Footer */}
+        {/* Footer — sticky at the bottom of the modal, never compressed */}
        {footer && (
-          <div className="p-6" style={{ borderTop: '1px solid var(--border-secondary)' }}>
+          <div className="p-6 flex-shrink-0" style={{ borderTop: '1px solid var(--border-secondary)' }}>
            {footer}
          </div>
        )}
@@ -1623,6 +1623,7 @@ const ar: Record<string, string | { name: string; category: string }[]> = {
  'memories.immichAutoUpload': 'نسخ صور الرحلة إلى Immich عند الرفع',
  'memories.providerUrlHintSynology': 'أدرج مسار تطبيق Photos في URL، مثل https://nas:5001/photo',
  'memories.testConnection': 'اختبار الاتصال',
+  'memories.testShort': 'اختبار',
  'memories.testFirst': 'اختبر الاتصال أولاً',
  'memories.connected': 'متصل',
  'memories.disconnected': 'غير متصل',
@@ -1662,6 +1662,7 @@ const br: Record<string, string | { name: string; category: string }[]> = {
  'memories.immichAutoUpload': 'Espelhar fotos da jornada no Immich ao enviar',
  'memories.providerUrlHintSynology': 'Inclua o caminho do aplicativo Photos na URL, ex. https://nas:5001/photo',
  'memories.testConnection': 'Testar conexão',
+  'memories.testShort': 'Testar',
  'memories.testFirst': 'Teste a conexão primeiro',
  'memories.connected': 'Conectado',
  'memories.disconnected': 'Não conectado',
@@ -1621,6 +1621,7 @@ const cs: Record<string, string | { name: string; category: string }[]> = {
  'memories.immichAutoUpload': 'Zrcadlit fotky journey při nahrávání také do Immich',
  'memories.providerUrlHintSynology': 'Zahrňte cestu aplikace Photos do URL, např. https://nas:5001/photo',
  'memories.testConnection': 'Otestovat připojení',
+  'memories.testShort': 'Otestovat',
  'memories.testFirst': 'Nejprve otestujte připojení',
  'memories.connected': 'Připojeno',
  'memories.disconnected': 'Nepřipojeno',
@@ -1625,6 +1625,7 @@ const de: Record<string, string | { name: string; category: string }[]> = {
  'memories.immichAutoUpload': 'Journey-Fotos beim Upload auch zu Immich spiegeln',
  'memories.providerUrlHintSynology': 'Füge den Fotos-App-Pfad in die URL ein, z.B. https://nas:5001/photo',
  'memories.testConnection': 'Verbindung testen',
+  'memories.testShort': 'Testen',
  'memories.testFirst': 'Verbindung zuerst testen',
  'memories.connected': 'Verbunden',
  'memories.disconnected': 'Nicht verbunden',
@@ -1698,6 +1698,7 @@ const en: Record<string, string | { name: string; category: string }[]> = {
  'memories.immichAutoUpload': 'Mirror journey photos to Immich on upload',
  'memories.providerUrlHintSynology': 'Include the Photos app path in the URL, e.g. https://nas:5001/photo',
  'memories.testConnection': 'Test connection',
+  'memories.testShort': 'Test',
  'memories.testFirst': 'Test connection first',
  'memories.connected': 'Connected',
  'memories.disconnected': 'Not connected',
@@ -1562,6 +1562,7 @@ const es: Record<string, string> = {
  'memories.immichAutoUpload': 'Duplicar las fotos del journey en Immich al subirlas',
  'memories.providerUrlHintSynology': 'Incluye la ruta de la aplicación Photos en la URL, p.ej. https://nas:5001/photo',
  'memories.testConnection': 'Probar conexión',
+  'memories.testShort': 'Probar',
  'memories.testFirst': 'Probar conexión primero',
  'memories.connected': 'Conectado',
  'memories.disconnected': 'No conectado',
@@ -1619,6 +1619,7 @@ const fr: Record<string, string> = {
  'memories.immichAutoUpload': 'Répliquer les photos du journey vers Immich au téléversement',
  'memories.providerUrlHintSynology': 'Incluez le chemin de l\'application Photos dans l\'URL, ex. https://nas:5001/photo',
  'memories.testConnection': 'Tester la connexion',
+  'memories.testShort': 'Tester',
  'memories.testFirst': 'Testez la connexion avant de sauvegarder',
  'memories.connected': 'Connecté',
  'memories.disconnected': 'Non connecté',
@@ -1690,6 +1690,7 @@ const hu: Record<string, string | { name: string; category: string }[]> = {
  'memories.immichAutoUpload': 'Journey-fotók feltöltésekor másolat Immich-be is',
  'memories.providerUrlHintSynology': 'Adja meg a Photos alkalmazás elérési útját az URL-ben, pl. https://nas:5001/photo',
  'memories.testConnection': 'Kapcsolat tesztelése',
+  'memories.testShort': 'Teszt',
  'memories.testFirst': 'Először teszteld a kapcsolatot',
  'memories.connected': 'Csatlakoztatva',
  'memories.disconnected': 'Nincs csatlakoztatva',
@@ -1682,6 +1682,7 @@ const id: Record<string, string | { name: string; category: string }[]> = {
  'memories.immichAutoUpload': 'Salin foto journey ke Immich saat diunggah',
  'memories.providerUrlHintSynology': 'Sertakan path aplikasi Photos di URL, mis. https://nas:5001/photo',
  'memories.testConnection': 'Uji koneksi',
+  'memories.testShort': 'Uji',
  'memories.testFirst': 'Uji koneksi terlebih dahulu',
  'memories.connected': 'Terhubung',
  'memories.disconnected': 'Tidak terhubung',
@@ -1620,6 +1620,7 @@ const it: Record<string, string | { name: string; category: string }[]> = {
  'memories.immichAutoUpload': 'Rispecchia le foto del journey su Immich al caricamento',
  'memories.providerUrlHintSynology': 'Includi il percorso dell\'app Foto nell\'URL, es. https://nas:5001/photo',
  'memories.testConnection': 'Test connessione',
+  'memories.testShort': 'Prova',
  'memories.testFirst': 'Testa prima la connessione',
  'memories.connected': 'Connesso',
  'memories.disconnected': 'Non connesso',
@@ -612,8 +612,8 @@ const nl: Record<string, string> = {
  'admin.collab.chat.subtitle': 'Realtime berichten voor reissamenwerking',
  'admin.collab.notes.title': 'Notities',
  'admin.collab.notes.subtitle': 'Gedeelde notities en documenten',
-  'admin.collab.polls.title': 'Peilingen',
-  'admin.collab.polls.subtitle': 'Groepspeilingen en stemmen',
+  'admin.collab.polls.title': 'Polls',
+  'admin.collab.polls.subtitle': 'Groepspolls en stemmen',
  'admin.collab.whatsnext.title': 'Wat nu',
  'admin.collab.whatsnext.subtitle': 'Activiteitssuggesties en volgende stappen',
  'admin.tabs.config': 'Personalisatie',
@@ -1619,6 +1619,7 @@ const nl: Record<string, string> = {
  'memories.immichAutoUpload': 'Journey-foto\'s bij upload ook naar Immich spiegelen',
  'memories.providerUrlHintSynology': 'Voeg het pad van de Photos-app toe aan de URL, bijv. https://nas:5001/photo',
  'memories.testConnection': 'Verbinding testen',
+  'memories.testShort': 'Testen',
  'memories.testFirst': 'Test eerst de verbinding',
  'memories.connected': 'Verbonden',
  'memories.disconnected': 'Niet verbonden',
@@ -1658,7 +1659,7 @@ const nl: Record<string, string> = {
  // Collab Addon
  'collab.tabs.chat': 'Chat',
  'collab.tabs.notes': 'Notities',
-  'collab.tabs.polls': 'Peilingen',
+  'collab.tabs.polls': 'Polls',
  'collab.whatsNext.title': 'Wat komt er',
  'collab.whatsNext.today': 'Vandaag',
  'collab.whatsNext.tomorrow': 'Morgen',
@@ -1704,7 +1705,7 @@ const nl: Record<string, string> = {
  'collab.notes.attachFiles': 'Bestanden bijvoegen',
  'collab.notes.noCategoriesYet': 'Nog geen categorieën',
  'collab.notes.emptyDesc': 'Maak een notitie om te beginnen',
-  'collab.polls.title': 'Peilingen',
+  'collab.polls.title': 'Polls',
  'collab.polls.new': 'Nieuwe poll',
  'collab.polls.empty': 'Nog geen polls',
  'collab.polls.emptyHint': 'Stel de groep een vraag en stem samen',
@@ -1571,6 +1571,7 @@ const pl: Record<string, string | { name: string; category: string }[]> = {
  'memories.immichAutoUpload': 'Przy przesyłaniu kopiuj zdjęcia journey także do Immich',
  'memories.providerUrlHintSynology': 'Uwzględnij ścieżkę aplikacji Photos w URL, np. https://nas:5001/photo',
  'memories.testConnection': 'Test',
+  'memories.testShort': 'Test',
  'memories.connected': 'Połączono',
  'memories.disconnected': 'Nie połączono',
  'memories.connectionSuccess': 'Połączono z Immich',
@@ -1619,6 +1619,7 @@ const ru: Record<string, string> = {
  'memories.immichAutoUpload': 'Дублировать фото journey в Immich при загрузке',
  'memories.providerUrlHintSynology': 'Включите путь приложения Photos в URL, например https://nas:5001/photo',
  'memories.testConnection': 'Проверить подключение',
+  'memories.testShort': 'Проверить',
  'memories.testFirst': 'Сначала проверьте подключение',
  'memories.connected': 'Подключено',
  'memories.disconnected': 'Не подключено',
@@ -1619,6 +1619,7 @@ const zh: Record<string, string> = {
  'memories.immichAutoUpload': '上传 Journey 照片时同步到 Immich',
  'memories.providerUrlHintSynology': '在 URL 中包含照片应用路径，例如 https://nas:5001/photo',
  'memories.testConnection': '测试连接',
+  'memories.testShort': '测试',
  'memories.testFirst': '请先测试连接',
  'memories.connected': '已连接',
  'memories.disconnected': '未连接',
@@ -1679,6 +1679,7 @@ const zhTw: Record<string, string> = {
  'memories.immichAutoUpload': '上傳 Journey 照片時同步到 Immich',
  'memories.providerUrlHintSynology': '在網址中包含照片應用程式路徑，例如 https://nas:5001/photo',
  'memories.testConnection': '測試連線',
+  'memories.testShort': '測試',
  'memories.testFirst': '請先測試連線',
  'memories.connected': '已連線',
  'memories.disconnected': '未連線',
@@ -431,6 +431,8 @@ input[type="number"], input[type="time"], input[type="date"], input[type="dateti
  --safe-top: env(safe-area-inset-top, 0px);
  --nav-h: 0px;
  --bottom-nav-h: 0px;
+  /* Set by OfflineBanner when it's visible so body can reserve space. */
+  --offline-banner-h: 0px;
  --font-system: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
  --sp-1: 4px;
  --sp-2: 8px;
@@ -536,7 +538,9 @@ body {
  font-family: var(--font-system);
  background-color: var(--bg-primary);
  color: var(--text-primary);
-  transition: background-color 0.2s, color 0.2s;
+  transition: background-color 0.2s, color 0.2s, padding-top 0.15s ease;
+  /* Reserve space when OfflineBanner is visible; 0 when online. */
+  padding-top: var(--offline-banner-h, 0px);
 }

 /* ── Marker cluster custom styling ────────────── */
@@ -67,11 +67,13 @@ function groupByDate(entries: JourneyEntry[]): Map<string, JourneyEntry[]> {
  return groups
 }

-function formatDate(d: string): { weekday: string; month: string; day: number } {
+function formatDate(d: string, locale?: string): { weekday: string; month: string; day: number } {
  const date = new Date(d + 'T00:00:00')
+  // Pass the app's selected locale so weekday/month follow the UI language
+  // instead of the browser's navigator.language.
  return {
-    weekday: date.toLocaleDateString(undefined, { weekday: 'long' }),
-    month: date.toLocaleDateString(undefined, { month: 'long' }),
+    weekday: date.toLocaleDateString(locale, { weekday: 'long' }),
+    month: date.toLocaleDateString(locale, { month: 'long' }),
    day: date.getDate(),
  }
 }
@@ -84,7 +86,7 @@ export default function JourneyDetailPage() {
  const { id } = useParams()
  const navigate = useNavigate()
  const toast = useToast()
-  const { t } = useTranslation()
+  const { t, locale } = useTranslation()
  const { current, loading, notFound, loadJourney, updateEntry, deleteEntry, reorderEntries, uploadPhotos, deletePhoto } = useJourneyStore()
  const mapRef = useRef<JourneyMapHandle>(null)
  const fullMapRef = useRef<JourneyMapHandle>(null)
@@ -575,7 +577,7 @@ export default function JourneyDetailPage() {

                  {sortedDates.map((date, dayIdx) => {
                    const entries = dayGroups.get(date)!
-                    const fd = formatDate(date)
+                    const fd = formatDate(date, locale)
                    const locations = [...new Set(entries.map(e => e.location_name).filter(Boolean))]

                    return (
@@ -816,7 +818,7 @@ function MapView({ entries, mapEntries, sortedDates, activeLocationId, fullMapRe
  fullMapRef: React.RefObject<JourneyMapHandle | null>
  onLocationClick: (id: string) => void
 }) {
-  const { t } = useTranslation()
+  const { t, locale } = useTranslation()
  // group map entries by date
  const byDate = new Map<string, { entry: JourneyEntry; globalIdx: number }[]>()
  mapEntries.forEach((e, i) => {
@@ -872,7 +874,7 @@ function MapView({ entries, mapEntries, sortedDates, activeLocationId, fullMapRe
        <div className="px-5 pb-5">
          {dates.map((date, dayIdx) => {
            const items = byDate.get(date)!
-            const fd = formatDate(date)
+            const fd = formatDate(date, locale)

            return (
              <div key={date}>
@@ -40,11 +40,11 @@ function photoUrl(p: PublicPhoto, shareToken: string, kind: 'thumbnail' | 'origi
  return `/api/public/journey/${shareToken}/photos/${p.photo_id}/${kind}`
 }

-function formatDate(d: string): { weekday: string; month: string; day: number } {
+function formatDate(d: string, locale?: string): { weekday: string; month: string; day: number } {
  const date = new Date(d + 'T00:00:00')
  return {
-    weekday: date.toLocaleDateString('en', { weekday: 'long' }),
-    month: date.toLocaleDateString('en', { month: 'long' }),
+    weekday: date.toLocaleDateString(locale || 'en', { weekday: 'long' }),
+    month: date.toLocaleDateString(locale || 'en', { month: 'long' }),
    day: date.getDate(),
  }
 }
@@ -233,7 +233,7 @@ export default function JourneyPublicPage() {
          <div className="flex flex-col gap-6">
            {sortedDates.map(date => {
              const dayEntries = groupedEntries.get(date)!
-              const fd = formatDate(date)
+              const fd = formatDate(date, locale)
              return (
                <div key={date}>
                  <div className="flex items-center gap-3 mb-4">