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:
@@ -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)}
|
||||
|
||||
Reference in New Issue
Block a user