fix: improve mobile rendering

dev-dist/sw.js

@@ -79,7 +79,7 @@ define(['./workbox-21a80088'], (function (workbox) { 'use strict';
    */
   workbox.precacheAndRoute([{
     "url": "index.html",
-    "revision": "0.14orerfhgvg"
+    "revision": "0.iqaev82ti8g"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

src/components/ArchiveEditDialog.tsx

@@ -273,24 +273,24 @@ export const ArchiveEditDialog: React.FC<ArchiveEditDialogProps> = ({
                   size="sm"
                   className="text-blue-600 hover:text-blue-700"
                 >
-                  <RotateCcw className="w-4 h-4 mr-2" />
-                  Restore
+                  <RotateCcw className="w-4 h-4" />
+                  <span className="hidden md:block md:ml-2">Restore</span>
                 </Button>
                 <Button
                   onClick={() => setShowDeleteConfirm(true)}
                   variant="destructive"
                   size="sm"
                 >
-                  <Trash2 className="w-4 h-4 mr-2" />
-                  Delete
+                  <Trash2 className="w-4 h-4" />
+                  <span className="hidden md:block md:ml-2">Delete</span>
                 </Button>
                 <Button
                   onClick={() => setIsEditing(true)}
                   variant="default"
                   size="sm"
                 >
-                  <Edit className="w-4 h-4 mr-2" />
-                  Edit
+                  <Edit className="w-4 h-4" />
+                  <span className="hidden md:block md:ml-2">Edit</span>
                 </Button>
               </>
             ) : (

src/components/ArchiveFilter.tsx

@@ -54,7 +54,7 @@ export const ArchiveFilter: React.FC<ArchiveFilterProps> = ({
 
   return (
     <Card className="print:hidden">
-      <CardContent className="p-4 md:p-6">
+      <CardContent className="p-2 md:p-6">
         <div className="space-y-4">
           <div className="flex items-center justify-between">
             <button
@@ -89,7 +89,7 @@ export const ArchiveFilter: React.FC<ArchiveFilterProps> = ({
                   id="startDate"
                   type="date"
                   value={filters.startDate}
-                  onChange={(e) =>
+                  onChange={e =>
                     onFilterChange({ ...filters, startDate: e.target.value })
                   }
                 />
@@ -101,7 +101,7 @@ export const ArchiveFilter: React.FC<ArchiveFilterProps> = ({
                   id="endDate"
                   type="date"
                   value={filters.endDate}
-                  onChange={(e) =>
+                  onChange={e =>
                     onFilterChange({ ...filters, endDate: e.target.value })
                   }
                 />
@@ -112,7 +112,7 @@ export const ArchiveFilter: React.FC<ArchiveFilterProps> = ({
                 <Label htmlFor="project">Project</Label>
                 <Select
                   value={filters.project || ALL_PROJECTS}
-                  onValueChange={(value) =>
+                  onValueChange={value =>
                     onFilterChange({
                       ...filters,
                       project: value === ALL_PROJECTS ? '' : value
@@ -124,7 +124,7 @@ export const ArchiveFilter: React.FC<ArchiveFilterProps> = ({
                   </SelectTrigger>
                   <SelectContent>
                     <SelectItem value={ALL_PROJECTS}>All Projects</SelectItem>
-                    {projects.map((project) => (
+                    {projects.map(project => (
                       <SelectItem key={project.id} value={project.name}>
                         {project.name}
                       </SelectItem>
@@ -138,7 +138,7 @@ export const ArchiveFilter: React.FC<ArchiveFilterProps> = ({
                 <Label htmlFor="category">Category</Label>
                 <Select
                   value={filters.category || ALL_CATEGORIES}
-                  onValueChange={(value) =>
+                  onValueChange={value =>
                     onFilterChange({
                       ...filters,
                       category: value === ALL_CATEGORIES ? '' : value
@@ -149,8 +149,10 @@ export const ArchiveFilter: React.FC<ArchiveFilterProps> = ({
                     <SelectValue placeholder="All Categories" />
                   </SelectTrigger>
                   <SelectContent>
-                    <SelectItem value={ALL_CATEGORIES}>All Categories</SelectItem>
-                    {categories.map((category) => (
+                    <SelectItem value={ALL_CATEGORIES}>
+                      All Categories
+                    </SelectItem>
+                    {categories.map(category => (
                       <SelectItem key={category.id} value={category.name}>
                         {category.name}
                       </SelectItem>

src/components/ArchiveItem.tsx

@@ -66,17 +66,17 @@ export const ArchiveItem: React.FC<ArchiveItemProps> = ({ day, onEdit }) => {
               size="sm"
               className="flex items-center space-x-2 text-blue-600 hover:text-blue-700"
             >
-              <RotateCcw className="w-4 h-4 hidden md:block" />
-              Restore
+              <RotateCcw className="w-4 h-4 block" />
+              <span className="hidden md:block">Restore</span>
             </Button>
             <Button
               onClick={() => onEdit(day)}
               variant="default"
               size="sm"
               className="flex items-center space-x-2"
             >
-              <Edit className="w-4 h-4 hidden md:block" />
-              Edit
+              <Edit className="w-4 h-4 block" />
+              <span className="hidden md:block">Edit</span>
             </Button>
           </div>
         </div>

src/components/Navigation.tsx

@@ -12,7 +12,7 @@ import { ProjectManagement } from '@/components/ProjectManagement';
 import { UserMenu } from '@/components/UserMenu';
 import { AuthDialog } from '@/components/AuthDialog';
 import { Link } from 'react-router-dom';
-import { CogIcon, Printer, Database, CalendarClock } from 'lucide-react';
+import { CogIcon, Printer, CalendarClock } from 'lucide-react';
 import { NavLink } from 'react-router-dom';
 import { formatDuration } from '@/utils/timeUtil';
 import { SyncStatus } from '@/components/SyncStatus';
@@ -36,7 +36,7 @@ const SiteNavigationMenu = () => {
     isSyncing,
     lastSyncTime,
     hasUnsavedChanges,
-    forceSyncToDatabase, // Use manual sync instead of refresh
+    forceSyncToDatabase // Use manual sync instead of refresh
   } = useTimeTracking();
 
   const runningTime = isDayStarted ? getTotalDayDuration() : 0;
@@ -51,7 +51,11 @@ const SiteNavigationMenu = () => {
                 to="/"
                 className="flex items-center text-gray-900 hover:text-blue-700"
               >
-                <img src="favicon-96x96.png" alt="Logo" className="w-8 h-8 sm:mr-2" />
+                <img
+                  src="favicon-96x96.png"
+                  alt="Logo"
+                  className="w-8 h-8 sm:mr-2"
+                />
                 <span className="hidden lg:block">TimeTracker</span>
               </Link>
             </h1>
@@ -102,9 +106,7 @@ const SiteNavigationMenu = () => {
         </List>
 
         <div className="perspective-[2000px] absolute left-0 top-full flex w-full justify-center">
-          <Viewport
-            className="relative mt-2.5 h-[var(--radix-navigation-menu-viewport-height)] w-full origin-[top_center] overflow-hidden rounded-md bg-white transition-[width,_height] duration-300 data-[state=closed]:animate-scaleOut data-[state=open]:animate-scaleIn sm:w-[var(--radix-navigation-menu-viewport-width)]"
-          />
+          <Viewport className="relative mt-2.5 h-[var(--radix-navigation-menu-viewport-height)] w-full origin-[top_center] overflow-hidden rounded-md bg-white transition-[width,_height] duration-300 data-[state=closed]:animate-scaleOut data-[state=open]:animate-scaleIn sm:w-[var(--radix-navigation-menu-viewport-width)]" />
         </div>
       </NavigationMenu>
 

src/components/ui/badge.tsx

@@ -1,37 +1,46 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/util"
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
 
+import { cn } from '@/lib/util';
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
   {
     variants: {
       variant: {
         default:
-          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
         secondary:
-          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
         destructive:
-          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-        outline: "text-foreground",
+          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+        outline: 'text-foreground'
       },
+      color: {
+        indigo: 'border-indigo-500 bg-indigo-100 text-black-800',
+        green: 'border-green-500 bg-green-100 text-black-800',
+        gray: 'border-gray-500 bg-gray-100 text-black-800',
+        purple: 'border-purple-500 bg-purple-100 text-black-800'
+      }
     },
     defaultVariants: {
-      variant: "default",
-    },
+      variant: 'default'
+    }
   }
-)
+);
 
 export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
+  extends
+    Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>,
     VariantProps<typeof badgeVariants> {}
 
-function Badge({ className, variant, ...props }: BadgeProps) {
+function Badge({ className, variant, color, ...props }: BadgeProps) {
   return (
-    <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  )
+    <div
+      className={cn(badgeVariants({ variant, color }), className)}
+      {...props}
+    />
+  );
 }
 
-export { Badge, badgeVariants }
+export { Badge, badgeVariants };

src/components/ui/card.tsx

@@ -1,9 +1,6 @@
-import * as React from "react"
-
-import { cn } from "@/lib/util"
-
-
+import * as React from 'react';
 
+import { cn } from '@/lib/util';
 
 const Card = React.forwardRef<
   HTMLDivElement,
@@ -12,25 +9,25 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      'rounded-lg border bg-card text-card-foreground shadow-sm',
       className
     )}
     {...props}
   />
-))
-Card.displayName = "Card"
+));
+Card.displayName = 'Card';
 
 const CardHeader = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    className={cn('flex flex-col space-y-1.5 p-6', className)}
     {...props}
   />
-))
-CardHeader.displayName = "CardHeader"
+));
+CardHeader.displayName = 'CardHeader';
 
 const CardTitle = React.forwardRef<
   HTMLParagraphElement,
@@ -39,44 +36,51 @@ const CardTitle = React.forwardRef<
   <h3
     ref={ref}
     className={cn(
-      "text-2xl font-semibold leading-none tracking-tight",
+      'text-2xl font-semibold leading-none tracking-tight',
       className
     )}
     {...props}
   />
-))
-CardTitle.displayName = "CardTitle"
+));
+CardTitle.displayName = 'CardTitle';
 
 const CardDescription = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
   <p
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn('text-sm text-muted-foreground', className)}
     {...props}
   />
-))
-CardDescription.displayName = "CardDescription"
+));
+CardDescription.displayName = 'CardDescription';
 
 const CardContent = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-))
-CardContent.displayName = "CardContent"
+  <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+));
+CardContent.displayName = 'CardContent';
 
 const CardFooter = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
+    className={cn('flex items-center p-6 pt-0', className)}
     {...props}
   />
-))
-CardFooter.displayName = "CardFooter"
+));
+CardFooter.displayName = 'CardFooter';
 
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent
+};