feat: remove on no place

packages/website/src/components/TierList/Row.tsx

@@ -39,7 +39,7 @@ export function TierListRow({ index }: TierListRowProps) {
       </Table.RowHeaderCell>
 
       <Table.Cell>
-        <Flex wrap="wrap" height="100%" gap="2">
+        <Flex wrap="wrap" height="100%">
           {tanks.map((id, tankIndex) => {
             const tank = tankDefinitions.tanks[id];
             return (

packages/website/src/components/TierList/Table/constants.ts

@@ -15,3 +15,4 @@ export const tierListRowElements = new Set<HTMLTableRowElement>();
 export const tierListCardElements = tierListRows.map(
   () => new Set<HTMLDivElement>(),
 );
+export const placedTanks = new Set<number>();

packages/website/src/components/TierList/Tile.tsx

@@ -71,6 +71,7 @@ export function TierListTile(props: TierListTileProps) {
     const cardRect = card.current.getBoundingClientRect();
     const cardX = (cardRect.left + cardRect.right) / 2;
     const cardY = (cardRect.top + cardRect.bottom) / 2;
+    let wasPlaced = false;
 
     rowLoop: for (const row of tierListRowElements) {
       const rowRect = row.getBoundingClientRect();
@@ -108,6 +109,8 @@ export function TierListTile(props: TierListTileProps) {
           draft.tanks[rowIndex].splice(tileIndex, 0, props.tank.id);
         });
 
+        wasPlaced = true;
+
         break rowLoop;
       }
 
@@ -119,9 +122,20 @@ export function TierListTile(props: TierListTileProps) {
         draft.tanks[rowIndex].push(props.tank.id);
       });
 
+      wasPlaced = true;
+
       break;
     }
 
+    if (!wasPlaced) {
+      mutateTierList((draft) => {
+        draft.dragging = false;
+        draft.tanks = draft.tanks.map((row) =>
+          row.filter((tankId) => tankId !== props.tank.id),
+        );
+      });
+    }
+
     card.current.style.position = 'static';
     card.current.style.zIndex = 'unset';
     card.current.style.cursor = 'grab';