From 5a713579f0eb7d94c18a9f49149e59cff7a2b86a Mon Sep 17 00:00:00 2001
From: Danny Duong <88013638+HecticKiwi@users.noreply.github.com>
Date: Mon, 30 Dec 2024 01:50:28 -0700
Subject: [PATCH] fix(ui): Visual Bugs When Dragging Items Into Empty Tiers
 (#139)

* Refactor CSS

* Remove unnecessary CSS

* Fix min heights

* Add back min-h-20

---------

Co-authored-by: Isaac Yong <dev@infinia.space>
---
 components/DragDropTierList.tsx | 6 +++---
 components/ItemTile.tsx         | 2 +-
 tailwind.config.ts              | 4 ++++
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/components/DragDropTierList.tsx b/components/DragDropTierList.tsx
index 1597064..fe2ca16 100644
--- a/components/DragDropTierList.tsx
+++ b/components/DragDropTierList.tsx
@@ -39,7 +39,7 @@ const TierItems = memo<{
         <div
           ref={provided.innerRef}
           {...provided.droppableProps}
-          className={`w-full flex flex-wrap p-0 rounded-md ${snapshot.isDraggingOver ? 'ring-1 ring-accent-foreground' : ''}`}
+          className={`w-full min-h-17 md:min-h-21 flex flex-wrap p-0 rounded-md ${snapshot.isDraggingOver ? 'ring-1 ring-accent-foreground' : ''}`}
         >
           {tier.items.map((item, itemIndex) => (
             <Draggable key={item.id} draggableId={item.id} index={itemIndex}>
@@ -49,7 +49,7 @@ const TierItems = memo<{
                   {...provided.draggableProps}
                   {...provided.dragHandleProps}
                   className={`
-                    m-0.5 rounded-md 
+                    m-0.5 rounded-md
                     ${snapshot.isDragging ? 'shadow-md ring-2' : ''}
                   `}
                   style={{
@@ -116,7 +116,7 @@ const TierRow = memo<{
             <div
               className={`flex ${labelPosition === 'left' ? 'flex-row' : labelPosition === 'right' ? 'flex-row-reverse' : 'flex-col'} items-center`}>
               {(labelPosition === 'left' || labelPosition === 'right') && (
-                <div className="w-18 md:w-40">
+                <div className="md:w-40">
                   <EditableLabel
                     text={tier.name}
                     onSave={(newText) => onSaveLabel(index, newText)}
diff --git a/components/ItemTile.tsx b/components/ItemTile.tsx
index ad22eeb..d25cef8 100644
--- a/components/ItemTile.tsx
+++ b/components/ItemTile.tsx
@@ -54,7 +54,7 @@ const ItemTile: React.FC<ItemTileProps> = memo(({
   const handleDelete = useCallback(() => onDelete(id), [id, onDelete]);
 
   const tileContent = (
-    <div className="relative w-16 h-16 sm:w-18 sm:h-18 md:w-20 md:h-20 overflow-hidden rounded-md">
+    <div className="relative w-16 h-16 md:w-20 md:h-20 overflow-hidden rounded-md">
       {imageUrl ? (
         <>
           <div className="absolute inset-0 overflow-hidden">
diff --git a/tailwind.config.ts b/tailwind.config.ts
index c18664e..0ed88a9 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -19,6 +19,10 @@ const config = {
       },
     },
     extend: {
+      spacing: {
+        "17": "4.25rem",
+        "21": "5.25rem",
+      },
       fontFamily: {
         sans: ["var(--font-sans)", ...fontFamily.sans],
         heading: ["var(--font-heading)", ...fontFamily.sans],