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>
infinia-yzl · Dec 30, 2024 · 5a71357 · 5a71357
1 parent 1330036
commit 5a71357
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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],