From 9bae4dd2f6854a70a55f0f0dc9526a3f4f0a53ff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= Date: Tue, 30 Jun 2026 10:33:16 +0200 Subject: [PATCH] fix(ui): stack the date-time field on narrow viewports MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit A native date input keeps its intrinsic width on mobile WebKit and won't shrink, so the `date + fixed-width time` row overran a phone-width sheet — the time field and its clock icon spilled past the screen edge and every add form (measurements, mood, medication, …) scrolled sideways. Stack the two halves on narrow viewports and only place them side-by-side from the `sm` breakpoint up; each half then takes the full sheet width and nothing overflows. --- CHANGELOG.md | 6 ++++++ docs/api/openapi.yaml | 2 +- package.json | 2 +- public/sw.js | 2 +- src/components/ui/date-time-field.tsx | 14 ++++++++++++-- 5 files changed, 21 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4f5e445c5..95c74f564 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,12 @@ ## [Unreleased] +## [1.25.10] — 2026-06-30 — Mobile add-form fix + +### Fixed + +- On a phone, opening an add form (measurements, mood, medication, …) could push the layout wider than the screen, so the page scrolled sideways. The date-and-time field now stacks its date and time halves on narrow viewports instead of forcing them onto one row, so the form stays within the screen width. They still sit side-by-side from tablet width up. + ## [1.25.9] — 2026-06-30 — Custom metrics ### Added diff --git a/docs/api/openapi.yaml b/docs/api/openapi.yaml index ed8f7b72d..dc7efeac6 100644 --- a/docs/api/openapi.yaml +++ b/docs/api/openapi.yaml @@ -1,7 +1,7 @@ openapi: 3.1.0 info: title: HealthLog API - version: 1.25.9 + version: 1.25.10 description: >- Self-hosted personal-health-tracking PWA — public API surface for the iOS native client and external ingest. diff --git a/package.json b/package.json index 591ec69ea..f897c5180 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "healthlog", - "version": "1.25.9", + "version": "1.25.10", "description": "Self-hosted personal-health-tracking PWA with Withings integration, AI insights, and doctor-report PDF export.", "license": "PolyForm-Noncommercial-1.0.0", "homepage": "https://healthlog.dev", diff --git a/public/sw.js b/public/sw.js index e40e5427c..8fc44fb8b 100644 --- a/public/sw.js +++ b/public/sw.js @@ -36,7 +36,7 @@ try { // v1.4.38.4 → v1.4.42. Do not hand-edit; bump `package.json` and rebuild. const CACHE_VERSION = (typeof self !== "undefined" && self.__APP_VERSION__) || - /* @sw-version-fallback */ "v1.25.9"; + /* @sw-version-fallback */ "v1.25.10"; const STATIC_CACHE = `healthlog-static-${CACHE_VERSION}`; const PAGE_CACHE = `healthlog-pages-${CACHE_VERSION}`; // v1.18.6 — read-only data cache for a curated allowlist of safe GET `/api/*` diff --git a/src/components/ui/date-time-field.tsx b/src/components/ui/date-time-field.tsx index 0cd46c871..cc34611c5 100644 --- a/src/components/ui/date-time-field.tsx +++ b/src/components/ui/date-time-field.tsx @@ -108,7 +108,17 @@ export const DateTimeField = React.forwardRef< return (
` keeps its intrinsic width on mobile WebKit and won't + // shrink below it, so the `date + w-32 time` row overran a phone-width + // sheet (the time field + clock icon spilled ~70px past the edge, + // forcing a sideways scroll on every add form). Stacked, each half + // takes the full sheet width and nothing overflows. + "flex flex-col gap-2 sm:flex-row sm:items-stretch", + className, + )} data-slot="date-time-field" > {/* Hidden mirror so the combined value participates in native submits. */} @@ -141,7 +151,7 @@ export const DateTimeField = React.forwardRef< onChange={(tm) => commitParts(dateStr, tm)} onBlur={onBlur} disabled={disabled} - className="w-32 shrink-0" + className="w-full shrink-0 sm:w-32" aria-label={ariaLabel} aria-required={ariaRequired} />