fix: resolve mobile layout issues (iOS zoom, overflow, date input sizing)

- Add font-size: 1rem on form inputs to prevent iOS Safari auto-zoom
- Add min-width: 0 on body grid children to prevent content overflow
- Add min-width: 0 and max-width: 100% on fieldset for narrow viewports
- Add max-width: 100% on file input to contain iOS native rendering
- Strip appearance on date/time inputs to fix iOS content-box override
- Add min-height on inputs to prevent empty time input collapse on iOS

Author: Leftium

demo/index.html

@@ -463,5 +463,6 @@ <h4><code>&lt;figure&gt;</code> element with a <code>&lt;picture&gt;</code> elem
     <footer>
       <p>nimble.css test page. Based on <a href="https://github.com/cbracco/html5-test-page">html5-test-page</a> by <a href="https://twitter.com/cbracco">@cbracco</a>.</p>
     </footer>
+
   </body>
 </html>

specs/nimble-css.md

@@ -428,6 +428,7 @@ body {
 }
 body > * {
   grid-column: 2;
+  min-width: 0; /* allow grid children to shrink below intrinsic content width */
 }
 ```
 
@@ -622,6 +623,7 @@ Form elements are one of PicoCSS's strengths and Open Props normalize's weakness
   border-radius: var(--nc-radius);
   color: var(--nc-text);
   font: inherit;
+  font-size: 1rem; /* >=16px prevents iOS Safari auto-zoom on focus */
   transition: border-color 0.2s, box-shadow 0.2s;
 }
 

src/_document.scss

@@ -30,6 +30,7 @@
 
   body > * {
     grid-column: 2;
+    min-width: 0; // Allow grid children to shrink below intrinsic content width
   }
 
   // Selection styling using primary accent

src/_forms.scss

@@ -14,11 +14,13 @@
     --_input-bg: color-mix(in oklch, var(#{$prefix}surface-1), var(#{$prefix}surface-2) 20%);
 
     padding: 0.5em 0.75em;
+    min-height: calc(1em * 1.5 + 1em + 2px); // line-height + vertical padding + border
     background-color: var(--_input-bg);
     border: 1px solid var(#{$prefix}border);
     border-radius: var(#{$prefix}radius);
     color: var(#{$prefix}text-1);
     font: inherit;
+    font-size: 1rem; // >=16px prevents iOS Safari auto-zoom on focus
     transition: border-color 0.2s, box-shadow 0.2s;
   }
 
@@ -63,6 +65,8 @@
     border: 1px solid var(#{$prefix}border);
     border-radius: var(#{$prefix}radius);
     padding: var(#{$prefix}spacing);
+    min-width: 0; // Override UA min-content default — prevents overflow on narrow viewports
+    max-width: 100%;
   }
 
   :where(legend) {
@@ -90,6 +94,7 @@
     color: var(#{$prefix}text-1);
     font: inherit;
     cursor: pointer;
+    max-width: 100%; // Prevent native file input from overflowing container (iOS Safari)
   }
 
   :where([type="file"])::file-selector-button {

src/_reset.scss

@@ -181,3 +181,16 @@
   }
 
 }
+
+// iOS Safari forces box-sizing: content-box and display: inline-flex on date/time
+// inputs, ignoring author box-sizing overrides. Stripping native appearance fixes
+// this and gives consistent sizing across browsers. The native picker still opens
+// on tap; only the decorative calendar/clock icon is removed.
+[type="date"],
+[type="month"],
+[type="week"],
+[type="time"],
+[type="datetime-local"] {
+  -webkit-appearance: none;
+  appearance: none;
+}