From 827a36e9011093aeb255efb2694cba270ffba057 Mon Sep 17 00:00:00 2001
From: Z8MB1E <jason@onyxsimple.com>
Date: Fri, 31 Jul 2026 20:04:44 -0400
Subject: [PATCH] fix: update grid cell and item component styling

- Increase grid cell border opacity from 30% to 60% for better visibility
- Change item alignment from items-center to items-start for better layout
---
 src/components/frontend/storage/GridCell.tsx | 12 ++++++++++--
 src/components/ui/item.tsx                   |  2 +-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/frontend/storage/GridCell.tsx b/src/components/frontend/storage/GridCell.tsx
index 33c7f79..9da3942 100644
--- a/src/components/frontend/storage/GridCell.tsx
+++ b/src/components/frontend/storage/GridCell.tsx
@@ -13,7 +13,15 @@ interface GridCellProps {
   isInvalidDrop: boolean;
 }
 
-export function GridCell({ x, y, cellSize, isOccupied, isDropTarget, isHovered, isInvalidDrop }: GridCellProps) {
+export function GridCell({
+  x,
+  y,
+  cellSize,
+  isOccupied,
+  isDropTarget,
+  isHovered,
+  isInvalidDrop,
+}: GridCellProps) {
   const { setNodeRef } = useDroppable({
     id: `cell-${x}-${y}`,
     data: { x, y },
@@ -23,7 +31,7 @@ export function GridCell({ x, y, cellSize, isOccupied, isDropTarget, isHovered,
     <div
       ref={setNodeRef}
       className={cn(
-        "border border-border/30 transition-colors duration-75",
+        "border border-border/60 transition-colors duration-75",
         isHovered && !isInvalidDrop && "bg-green-500/25 border-green-500/50",
         isHovered && isInvalidDrop && "bg-red-500/25 border-red-500/50",
         !isHovered && isDropTarget && "bg-primary/5 border-primary/20",
diff --git a/src/components/ui/item.tsx b/src/components/ui/item.tsx
index d97de21..a127a57 100644
--- a/src/components/ui/item.tsx
+++ b/src/components/ui/item.tsx
@@ -31,7 +31,7 @@ function ItemSeparator({
 }
 
 const itemVariants = cva(
-  "group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+  "group/item flex items-start border border-transparent text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
   {
     variants: {
       variant: {