From 73171d0d9a8a477927a974b4dce20df13af16fbc Mon Sep 17 00:00:00 2001
From: "Kalle (Sendou)" <38327916+Sendouc@users.noreply.github.com>
Date: Fri, 10 Dec 2021 23:10:55 +0200
Subject: [PATCH] Sortable team list CSS adjustments

---
 app/components/tournament/AdminTeamControls.tsx |  2 --
 app/styles/tournament-admin.css                 | 12 +++++++++++-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/app/components/tournament/AdminTeamControls.tsx b/app/components/tournament/AdminTeamControls.tsx
index 6948cb1a4..486dc4e25 100644
--- a/app/components/tournament/AdminTeamControls.tsx
+++ b/app/components/tournament/AdminTeamControls.tsx
@@ -27,8 +27,6 @@ import type { Unpacked } from "~/utils";
 import { useTimeoutState } from "~/utils/hooks";
 
 // TODO: https://docs.dndkit.com/presets/sortable#drag-overlay
-// TODO: cursor flickers when going down the list
-// TODO: grabbing cursor
 // TODO: user can change seed order while submitting which breaks the UI
 export function AdminTeamControls() {
   const [, parentRoute] = useMatches();
diff --git a/app/styles/tournament-admin.css b/app/styles/tournament-admin.css
index fa793da47..bc2d3e473 100644
--- a/app/styles/tournament-admin.css
+++ b/app/styles/tournament-admin.css
@@ -26,11 +26,13 @@
 .tournament__admin__teams-list-row {
   display: grid;
   width: 100%;
+  align-items: center;
+  padding: var(--s-3);
+  border-radius: var(--rounded);
   column-gap: var(--s-1);
   font-size: var(--fonts-sm);
   grid-template-columns: 1fr 3fr 3fr 1fr;
   list-style: none;
-  margin-block-start: var(--s-4);
   row-gap: var(--s-1-5);
 }
 
@@ -38,6 +40,14 @@
   cursor: grab;
 }
 
+.tournament__admin__teams-list-row.sortable:hover {
+  background-color: var(--bg-lighter);
+}
+
+.tournament__admin__teams-list-row.sortable:active {
+  cursor: grabbing !important;
+}
+
 .tournament__admin__teams-container__header {
   font-weight: var(--bold);
 }