From 7e322c3c1f772c58ea63d2a713bac625cf923e2b Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Tue, 22 Sep 2026 20:05:49 +0300
Subject: [PATCH] Fix gap between tier list maker weapons

---
 .../components/DraggableItem.module.css               | 11 +++++++++++
 .../tier-list-maker/components/DraggableItem.tsx      |  7 ++++++-
 .../tier-list-maker/components/ItemPool.module.css    | 10 +++++++++-
 .../tier-list-maker/components/TierRow.module.css     |  3 ++-
 changelog/2026-09-22-tier-list-maker-dead-space.md    |  5 +++++
 5 files changed, 33 insertions(+), 3 deletions(-)
 create mode 100644 changelog/2026-09-22-tier-list-maker-dead-space.md

diff --git a/app/features/tier-list-maker/components/DraggableItem.module.css b/app/features/tier-list-maker/components/DraggableItem.module.css
index e22f2d388..8c5f21acd 100644
--- a/app/features/tier-list-maker/components/DraggableItem.module.css
+++ b/app/features/tier-list-maker/components/DraggableItem.module.css
@@ -1,7 +1,18 @@
 .item {
+	display: grid;
 	min-height: 50px;
 	cursor: move;
 	touch-action: none;
 	user-select: none;
 	-webkit-user-select: none;
 }
+
+.hitArea {
+	position: relative;
+
+	&::after {
+		content: "";
+		position: absolute;
+		inset: calc(var(--tier-list-item-gap) / -2);
+	}
+}
diff --git a/app/features/tier-list-maker/components/DraggableItem.tsx b/app/features/tier-list-maker/components/DraggableItem.tsx
index 24122ba9f..d32aa6b50 100644
--- a/app/features/tier-list-maker/components/DraggableItem.tsx
+++ b/app/features/tier-list-maker/components/DraggableItem.tsx
@@ -31,7 +31,12 @@ export function DraggableItem({ item }: DraggableItemProps) {
 
 	return (
 		<div ref={setNodeRef} className={styles.item} style={style}>
-			<div data-item-id={uniqueId} {...listeners} {...attributes}>
+			<div
+				data-item-id={uniqueId}
+				className={styles.hitArea}
+				{...listeners}
+				{...attributes}
+			>
 				<TierListItemImage item={item} />
 			</div>
 		</div>
diff --git a/app/features/tier-list-maker/components/ItemPool.module.css b/app/features/tier-list-maker/components/ItemPool.module.css
index e3c887004..b13ef228f 100644
--- a/app/features/tier-list-maker/components/ItemPool.module.css
+++ b/app/features/tier-list-maker/components/ItemPool.module.css
@@ -1,11 +1,13 @@
 .pool {
+	--tier-list-item-gap: var(--s-3);
 	display: flex;
 	flex-wrap: wrap;
-	gap: var(--s-3);
+	gap: var(--tier-list-item-gap);
 	min-height: 50px;
 }
 
 .clickableItem {
+	position: relative;
 	min-height: 50px;
 	padding: 0;
 	border: none;
@@ -13,6 +15,12 @@
 	cursor: pointer;
 	transition: transform 0.1s;
 
+	&::after {
+		content: "";
+		position: absolute;
+		inset: calc(var(--tier-list-item-gap) / -2);
+	}
+
 	&:hover:not(:disabled) {
 		transform: scale(1.1);
 	}
diff --git a/app/features/tier-list-maker/components/TierRow.module.css b/app/features/tier-list-maker/components/TierRow.module.css
index 0c22e8791..2f119d797 100644
--- a/app/features/tier-list-maker/components/TierRow.module.css
+++ b/app/features/tier-list-maker/components/TierRow.module.css
@@ -48,10 +48,11 @@
 }
 
 .targetZone {
+	--tier-list-item-gap: var(--s-1-5);
 	grid-column: 2;
 	display: flex;
 	flex-wrap: wrap;
-	gap: var(--s-1-5);
+	gap: var(--tier-list-item-gap);
 	padding: var(--s-2);
 	background: var(--color-bg-high);
 	border-radius: var(--radius-field) 0 0 var(--radius-field);
diff --git a/changelog/2026-09-22-tier-list-maker-dead-space.md b/changelog/2026-09-22-tier-list-maker-dead-space.md
new file mode 100644
index 000000000..6121d5774
--- /dev/null
+++ b/changelog/2026-09-22-tier-list-maker-dead-space.md
@@ -0,0 +1,5 @@
+---
+navItem: tier-list-maker
+type: bug
+---
+Clicking between two items in the tier list maker no longer misses both of them