fix input widths

package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "version": "0.0.1",
   "scripts": {
-    "dev": "astro dev",
+    "dev": "astro dev --host",
     "start": "astro dev",
     "build": "astro check && astro build",
     "preview": "astro preview",

src/examples/input/cardNumber.html

@@ -1,11 +1,11 @@
-<label for="card" class="form-control max-w-xs">
+<label for="card" class="form-control w-full max-w-xs">
     <div class="label">
         <span class="label-text">Card number</span>
     </div>
 
     <div class="inline-flex relative items-center">
         <i class="absolute pl-5 fa-solid fa-credit-card text-primary"></i>
 
-        <input id="filter" placeholder="5555555555554444" class="input input-bordered pl-12" bind:value={filter} />
+        <input id="filter" placeholder="5555555555554444" class="input input-bordered w-full pl-12" bind:value={filter} />
     </div>
 </label>

src/examples/input/domainName.html

@@ -1,9 +1,5 @@
-<div class="join">
+<div class="join w-full max-w-xs">
     <div class="flex join-item input input-bordered items-center bg-base-200">https://</div>
 
-    <div>
-        <div>
-            <input class="input input-bordered join-item" placeholder="example.com"/>
-        </div>
-    </div>
+    <input class="input input-bordered join-item w-full" placeholder="example.com"/>
 </div>

src/examples/input/passwordWithShowIcon.html

@@ -1,14 +1,14 @@
-<label for="password" class="form-control max-w-xs">
+<label for="password" class="form-control w-full max-w-xs">
     <div class="label">
         <span class="label-text">Password</span>
         <a class="link link-hover label-text-alt text-accent">Forgot password?</a>
     </div>
 
     <div class="inline-flex items-center relative">
-        <button class="btn btn-ghost btn-sm btn-circle absolute right-0 mr-4">
+        <button class="btn btn-ghost btn-sm btn-circle absolute right-0 mr-2">
             <i class="fa-solid fa-eye text-lg"></i>
         </button>
 
-        <input id="password" type="password" placeholder="********" class="input input-bordered pr-11" />
+        <input id="password" type="password" placeholder="********" class="input input-bordered pr-11 w-full" />
     </div>
 </label>

src/examples/input/withClearIcon.html

@@ -1,9 +1,9 @@
-<label for="filter" class="inline-flex items-center relative">
+<label for="filter" class="inline-flex items-center relative w-full max-w-xs">
     <div class="tooltip tooltip-right absolute right-0 mr-2" data-tip="Clear">
         <button class="btn btn-ghost btn-sm btn-circle">
             <i class="fa-solid fa-times text-error text-lg"></i>
         </button>
     </div>
 
-    <input id="filter" placeholder="Something here..." class="input input-bordered pr-11" />
+    <input id="filter" placeholder="Something here..." class="input input-bordered pr-11 w-full" />
 </label>

src/examples/input/withIcon.html

@@ -1,5 +1,5 @@
-<label for="filter" class="flex relative items-center">
+<label for="filter" class="flex relative items-center w-full max-w-xs">
     <i class="absolute pl-5 fa-solid fa-envelope"></i>
 
-    <input id="filter" placeholder="Filter tags..." class="input input-bordered pl-12" bind:value={filter} />
+    <input id="filter" placeholder="Filter tags..." class="input input-bordered pl-12 w-full" />
 </label>