Fix mobile UI/UX issues

docs/pages/components/input.md

@@ -12,13 +12,13 @@ Input and select elements enable users to provide text input or make choices. In
 
 Use the `sm` or `lg` classes to reduce or increase the font size and padding of an input or select element.
 
-<div class="demo flex items-center gap-4">
-  <div class="w-1/2 flex-col flex-wrap items-start gap-4">
+<div class="demo flex items-center flex-wrap gap-4">
+  <div class="flex-col items-start gap-4">
     <input type="text" class="sm" placeholder="Small input size" />
     <input type="text" placeholder="Default input size" />
     <input type="text" class="lg" placeholder="Large input size" />
   </div>
-  <div class="w-1/2 flex-col flex-wrap items-start gap-4">
+  <div class="flex-col items-start gap-4">
     <select class="sm">
       <option>Small option size</option>
     </select>
@@ -43,8 +43,8 @@ Use the `sm` or `lg` classes to reduce or increase the font size and padding of
 
 Those classes work on checkboxes and radio buttons too.
 
-<div class="demo flex items-center gap-4">
-  <div class="w-1/2 flex-col flex-wrap gap-4">
+<div class="demo flex items-center flex-wrap gap-8">
+  <div class="flex-col gap-4">
     <label class="flex-row gap-2 items-center">
       <input type="checkbox" class="sm" checked /> Small choice <code>.sm</code>
     </label>
@@ -55,7 +55,7 @@ Those classes work on checkboxes and radio buttons too.
       <input type="checkbox" class="lg" /> Large choice <code>.lg</code>
     </label>
   </div>
-  <div class="w-1/2 flex-col flex-wrap gap-4">
+  <div class="flex-col gap-4">
     <label class="flex-row gap-2 items-center">
       <input name="radio" type="radio" class="sm" checked /> Small option <code>.sm</code>
     </label>
@@ -218,10 +218,10 @@ Use the `input busy` classes to overlay the input with a <a href="/components/lo
 Use the `input-group` class on an element containing input elements or wrapper elements having the `input` class, to group inputs to a single logical unit.
 
 <div class="demo flex-col gap-4">
-  <div class="input-group sm">
-    <input type="text" placeholder="DD" />
-    <input type="text" placeholder="MM" />
-    <input type="text" placeholder="YYYY" />
+  <div class="input-group">
+    <input class="w-32" type="text" placeholder="DD" />
+    <input class="w-32" type="text" placeholder="MM" />
+    <input class="w-32" type="text" placeholder="YYYY" />
   </div>
   <div class="input-group">
     <select>
@@ -406,9 +406,9 @@ The `ghost` class works on affixes too if you just want to create spaces contain
 <div class="demo flex flex-wrap gap-8">
   <div class="input-group">
     <span class="affix ghost">From</span>
-    <input type="number" placeholder="Min" />
+    <input class="w-32" type="number" placeholder="Min" />
     <span class="affix ghost">to</span>
-    <input type="number" placeholder="Max" />
+    <input class="w-32" type="number" placeholder="Max" />
   </div>
 </div>
 

docs/pages/components/state.md

@@ -37,7 +37,7 @@ Use the `state highlighted` classes for an accentuated section e.g. which awaits
 <div class="demo">
   <div class="state highlighted">
     <svg class="icon xl" viewBox="0 0 24 24"><path d="M19 11v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2" /><path d="M13 13l9 3l-4 2l-2 4l-3 -9" /><path d="M3 3l0 .01" /><path d="M7 3l0 .01" /><path d="M11 3l0 .01" /><path d="M15 3l0 .01" /><path d="M3 7l0 .01" /><path d="M3 11l0 .01" /><path d="M3 15l0 .01" /></svg>
-    <h3>Office document conversion</h3>
+    <h3>Document conversion</h3>
     <p>Drag supported documents here</p>
   </div>
 </div>

docs/pages/components/toast.md

@@ -65,7 +65,7 @@ Use the `accent`, `success` or `alert` classes to give the toast notification a
 
 <div class="demo">
   <p>The demo can be seen directly on this page. Use the following controls to change it's color.</p>
-  <div class="control flex gap-2">
+  <div class="control flex flex-wrap gap-2">
     <button class="neutral" onclick="colorToast('neutral')">
       Neutral
     </button>

docs/pages/components/tooltip.md

@@ -22,7 +22,7 @@ Use the `data-tooltip` attribute on any element to attach a tooltip that appears
 
 To change position, use the `tooltip-left`, `tooltip-bottom` or `tooltip-right` classes accordingly.
 
-<div class="demo">
+<div class="demo flex-center gap-2">
   <button class="tooltip-left" data-tooltip="I'm over here!">Left</button>
   <button class="tooltip-bottom" data-tooltip="I'm over here!">Bottom</button>
   <button class="tooltip-right" data-tooltip="I'm over here!">Right</button>

docs/pages/utilities/effects.md

@@ -41,7 +41,7 @@ To make an element appear over or inside a surface, the `shadow-*` classes can b
 
 To rotate an element, the `rotate-*` classes can be used.
 
-<div class="demo flex items-start gap-4">
+<div class="demo flex items-start flex-wrap gap-4">
   <div class="flex-col gap-2 items-center justify-center bg-muted p-4 rounded relative">
     <div class="bg-accent rounded">
       <div class="-rotate-90 text-light m-8 bg-accent-variant flex-center rounded h-8 w-8 font-mono font-bold">A</div>

docs/pages/utilities/spacing.md

@@ -57,7 +57,7 @@ The space between flex or grid items can be set with the `gap-*` classes.
 
 The outer spacing (margin) for elements can be set with the `m-*` classes.
 
-<div class="demo flex items-start gap-4">
+<div class="demo flex items-start flex-wrap gap-4">
   <div class="flex-col gap-2 items-center justify-center bg-muted p-4 rounded relative">
     <div class="bg-accent rounded">
       <div class="m-0 text-light bg-accent-variant flex-center rounded h-8 w-8 font-mono font-bold">#3</div>
@@ -118,7 +118,7 @@ The outer spacing (margin) for elements can be set with the `m-*` classes.
 
 The inner spacing (padding) for elements can be set with the `p-*` classes.
 
-<div class="demo flex items-start gap-4">
+<div class="demo flex items-start flex-wrap gap-4">
   <div class="flex-col gap-2 items-center justify-center bg-muted p-4 rounded relative">
     <div class="p-0 text-light bg-accent-variant flex-center rounded font-mono font-bold">#3</div>
     <code>.p-0</code>

docs/pages/utilities/text.md

@@ -194,7 +194,7 @@ Text can be truncated with an ellipsis using the `truncate` class, if the contai
 Also there are 3 utilities to control wrapping and writing mode.
 
 <div class="demo flex flex-wrap gap-4">
-  <div class="flex gap-2 items-center">
+  <div class="flex gap-2 items-center overflow-x-auto">
     <div class="whitespace-nowrap max-w-screen-xs p-4 rounded bg-muted overflow-x-auto">
       <h4>Sloths are a Neotropical group of xenarthran mammals</h4>
       <p>Noted for their slowness of movement, tree sloths spend most of their lives hanging upside down in the trees of the tropical rainforests of South America and Central America.</p>

src/components/_modal.css

@@ -73,6 +73,7 @@
       max-width: var(--screen-2xl);
       box-shadow: none;
       height: 99vh;
+      padding-top: 1.5rem;
     }
   }
 }

src/components/_state.css

@@ -8,6 +8,7 @@
   h1, h2, h3, h4, h5, h6 {
     color: var(--color-text-muted);
     margin: .5rem 0 0 0;
+    text-align: center;
   }
 
   &.empty {