Style updates

src/lib/formatTime.ts

@@ -4,26 +4,15 @@
  * @returns Formatted string like "01:23:45 (1h 24m)" or "00:05:23 (5m)"
  */
 export function formatDuration(ms: number): string {
-  const totalSeconds = Math.floor(ms / 1000);
-  const hours = Math.floor(totalSeconds / 3600);
-  const minutes = Math.floor((totalSeconds % 3600) / 60);
-  const seconds = totalSeconds % 60;
-  
-  const timeStr = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
-  
   // Calculate rounded version for easy reading
   const totalMinutes = Math.round(ms / 1000 / 60);
-  const roundedHours = Math.floor(totalMinutes / 60);
-  const roundedMinutes = totalMinutes % 60;
-  
-  let roundedStr = '';
-  if (roundedHours > 0) {
-    roundedStr = roundedMinutes > 0 ? `${roundedHours}h ${roundedMinutes}m` : `${roundedHours}h`;
-  } else {
-    roundedStr = `${roundedMinutes}m`;
+  const hours = Math.floor(totalMinutes / 60);
+  const minutes = totalMinutes % 60;
+
+  if (hours > 0) {
+    return minutes > 0 ? `${hours}h ${minutes}m` : `${hours}h`;
   }
-  
-  return `${timeStr} (${roundedStr})`;
+  return `${minutes}m`;
 }
 
 /**
@@ -33,7 +22,7 @@ export function formatDuration(ms: number): string {
  * @returns Formatted duration string or "Running..."
  */
 export function formatTimeRange(start: Date, end: Date | null): string {
-  if (!end) return 'Running...';
+  if (!end) return "Running...";
   const ms = end.getTime() - start.getTime();
   return formatDuration(ms);
 }

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>