fix(ui): stack the date-time field on narrow viewports

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

@@ -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

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.
 

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",

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/*`

src/components/ui/date-time-field.tsx

@@ -108,7 +108,17 @@ export const DateTimeField = React.forwardRef<
 
   return (
     <div
-      className={cn("flex items-stretch gap-2", className)}
+      className={cn(
+        // v1.25.10 — stack the date and time halves on a narrow viewport and
+        // only sit them side-by-side from `sm:` up. A native `<input
+        // type="date">` 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}
       />