Add Chromebook compatibility fixes and optimizations

Implemented comprehensive Chromebook-specific fixes including viewport adjustments, enhanced touch and keyboard detection, improved scrolling and keyboard navigation hooks, and extensive CSS optimizations for better usability. Updated chat and dashboard interfaces for larger touch targets, better focus management, and responsive layouts. Added documentation in docs/CHROMEBOOK-FIXES.md and new hooks for Chromebook scroll and keyboard handling.
This commit is contained in:
NotII
2025-10-26 18:29:23 +00:00
parent 1fc29e6cbf
commit 130ecac208
27 changed files with 691 additions and 65 deletions

View File

@@ -49,10 +49,10 @@ const ProductTable = ({
<TableHeader className="bg-gray-50 dark:bg-zinc-800/50">
<TableRow className="hover:bg-transparent">
<TableHead className="w-[200px]">Product</TableHead>
<TableHead className="text-center">Category</TableHead>
<TableHead className="text-center">Unit</TableHead>
<TableHead className="hidden sm:table-cell text-center">Category</TableHead>
<TableHead className="hidden md:table-cell text-center">Unit</TableHead>
<TableHead className="text-center">Stock</TableHead>
<TableHead className="text-center">Enabled</TableHead>
<TableHead className="hidden lg:table-cell text-center">Enabled</TableHead>
<TableHead className="text-right">Actions</TableHead>
</TableRow>
</TableHeader>
@@ -73,9 +73,12 @@ const ProductTable = ({
<TableRow key={product._id} className="transition-colors hover:bg-gray-50 dark:hover:bg-zinc-800/70">
<TableCell>
<div className="font-medium truncate max-w-[180px]">{product.name}</div>
<div className="hidden sm:block text-sm text-muted-foreground mt-1">
{getCategoryNameById(product.category)}
</div>
</TableCell>
<TableCell className="text-center">{getCategoryNameById(product.category)}</TableCell>
<TableCell className="text-center">{product.unitType}</TableCell>
<TableCell className="hidden sm:table-cell text-center">{getCategoryNameById(product.category)}</TableCell>
<TableCell className="hidden md:table-cell text-center">{product.unitType}</TableCell>
<TableCell className="text-center">
{product.stockTracking ? (
<div className="flex items-center justify-center gap-1">
@@ -88,7 +91,7 @@ const ProductTable = ({
<Badge variant="outline" className="text-xs">Not Tracked</Badge>
)}
</TableCell>
<TableCell className="text-center">
<TableCell className="hidden lg:table-cell text-center">
<Switch
checked={product.enabled !== false}
onCheckedChange={(checked) => onToggleEnabled(product._id as string, checked)}