Style updates

src/pages/admin/index.astro

@@ -41,7 +41,7 @@ const allUsers = await db.select().from(users).all();
       <form method="POST" action="/api/admin/settings">
         <div class="form-control">
           <label class="label cursor-pointer">
-            <span class="label-text">
+            <span class="label-text flex-1 min-w-0 pr-4">
               <div class="font-semibold">Allow New Registrations</div>
               <div class="text-sm text-gray-500">When disabled, only existing users can log in</div>
             </span>

src/pages/dashboard/reports.astro

@@ -318,6 +318,20 @@ function getTimeRangeLabel(range: string) {
           </select>
         </div>
       </form>
+
+      <style>
+        @media (max-width: 767px) {
+          form {
+            align-items: stretch !important;
+          }
+          .form-control {
+            width: 100%;
+          }
+        }
+        select {
+          width: 100%;
+        }
+      </style>
     </div>
   </div>
 

src/pages/dashboard/team.astro

@@ -38,7 +38,7 @@ const isAdmin = currentUserMember?.member.role === 'owner' || currentUserMember?
 ---
 
 <DashboardLayout title="Team - Chronus">
-  <div class="flex justify-between items-center mb-6">
+  <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
     <h1 class="text-3xl font-bold">Team Members</h1>
     <div class="flex gap-2">
       {isAdmin && (

src/pages/dashboard/team/settings.astro

@@ -200,14 +200,12 @@ const successType = url.searchParams.get('success');
           </label>
         </div>
 
-        <div class="label">
-          <span class="label-text-alt text-base-content/60">
+        <div class="flex flex-col sm:flex-row justify-between items-center gap-4 mt-6">
+          <span class="text-xs text-base-content/60 text-center sm:text-left">
             Address information appears on invoices and quotes
           </span>
-        </div>
 
-        <div class="flex justify-end">
-          <button type="submit" class="btn btn-primary">
+          <button type="submit" class="btn btn-primary w-full sm:w-auto">
             <Icon name="heroicons:check" class="w-5 h-5" />
             Save Changes
           </button>

src/pages/dashboard/tracker.astro

@@ -232,7 +232,7 @@ const paginationPages = getPaginationPages(page, totalPages);
             type="text"
             name="search"
             placeholder="Search descriptions..."
-            class="input input-bordered bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors"
+            class="input input-bordered bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors w-full"
             value={searchTerm}
           />
         </div>
@@ -241,7 +241,7 @@ const paginationPages = getPaginationPages(page, totalPages);
           <label class="label">
             <span class="label-text font-medium">Client</span>
           </label>
-          <select name="client" class="select select-bordered bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors" onchange="this.form.submit()">
+          <select name="client" class="select select-bordered bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors w-full" onchange="this.form.submit()">
             <option value="">All Clients</option>
             {allClients.map(client => (
               <option value={client.id} selected={filterClient === client.id}>
@@ -255,7 +255,7 @@ const paginationPages = getPaginationPages(page, totalPages);
           <label class="label">
             <span class="label-text font-medium">Category</span>
           </label>
-          <select name="category" class="select select-bordered bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors" onchange="this.form.submit()">
+          <select name="category" class="select select-bordered bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors w-full" onchange="this.form.submit()">
             <option value="">All Categories</option>
             {allCategories.map(category => (
               <option value={category.id} selected={filterCategory === category.id}>
@@ -269,7 +269,7 @@ const paginationPages = getPaginationPages(page, totalPages);
           <label class="label">
             <span class="label-text font-medium">Status</span>
           </label>
-          <select name="status" class="select select-bordered bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors" onchange="this.form.submit()">
+          <select name="status" class="select select-bordered bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors w-full" onchange="this.form.submit()">
             <option value="" selected={filterStatus === ''}>All Entries</option>
             <option value="completed" selected={filterStatus === 'completed'}>Completed</option>
             <option value="running" selected={filterStatus === 'running'}>Running</option>
@@ -280,7 +280,7 @@ const paginationPages = getPaginationPages(page, totalPages);
           <label class="label">
             <span class="label-text font-medium">Entry Type</span>
           </label>
-          <select name="type" class="select select-bordered bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors" onchange="this.form.submit()">
+          <select name="type" class="select select-bordered bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors w-full" onchange="this.form.submit()">
             <option value="" selected={filterType === ''}>All Types</option>
             <option value="timed" selected={filterType === 'timed'}>Timed</option>
             <option value="manual" selected={filterType === 'manual'}>Manual</option>
@@ -291,7 +291,7 @@ const paginationPages = getPaginationPages(page, totalPages);
           <label class="label">
             <span class="label-text font-medium">Sort By</span>
           </label>
-          <select name="sort" class="select select-bordered bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors" onchange="this.form.submit()">
+          <select name="sort" class="select select-bordered bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors w-full" onchange="this.form.submit()">
             <option value="start-desc" selected={sortBy === 'start-desc'}>Newest First</option>
             <option value="start-asc" selected={sortBy === 'start-asc'}>Oldest First</option>
             <option value="duration-desc" selected={sortBy === 'duration-desc'}>Longest Duration</option>