From 5cc4e3feac2109feef0cebd36bb110c9477ea892 Mon Sep 17 00:00:00 2001
From: Codex <codex@local>
Date: Thu, 23 Apr 2026 14:42:32 -0500
Subject: [PATCH] Use grouped controls for clip ordering

---
 frontend/src/pages/LibraryPage.tsx | 6 +++---
 frontend/src/styles.css            | 7 -------
 2 files changed, 3 insertions(+), 10 deletions(-)

diff --git a/frontend/src/pages/LibraryPage.tsx b/frontend/src/pages/LibraryPage.tsx
index c878377..5be44f8 100644
--- a/frontend/src/pages/LibraryPage.tsx
+++ b/frontend/src/pages/LibraryPage.tsx
@@ -980,10 +980,10 @@ function WalkupClipCard({
       titleExtras={isHidden ? <span className="pill">Hidden</span> : null}
       actions={
         <>
-          <div className="clip-summary-order-controls">
+          <div className="btn-group btn-group-sm clip-summary-order-controls" role="group" aria-label="Clip order controls">
             <button
               type="button"
-              className="btn btn-sm icon-button icon-button-circle btn-outline-secondary"
+              className="btn btn-outline-secondary"
               onClick={onMoveUp}
               disabled={!canMoveUp}
               aria-label="Move clip up"
@@ -993,7 +993,7 @@ function WalkupClipCard({
             </button>
             <button
               type="button"
-              className="btn btn-sm icon-button icon-button-circle btn-outline-secondary"
+              className="btn btn-outline-secondary"
               onClick={onMoveDown}
               disabled={!canMoveDown}
               aria-label="Move clip down"
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 02d706e..4371406 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -375,13 +375,6 @@ select {
   font-size: 0.95rem;
 }
 
-.clip-summary-order-controls {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.35rem;
-  flex: 0 0 auto;
-}
-
 .gameday-clip-title {
   display: inline-flex;
   align-items: center;