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

@@ -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",

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: {