Use grouped controls for clip ordering

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"

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;