Center remote control group

Author: coder13

src/components/NotifyCompRemoteBar/NotifyCompRemoteBar.tsx

@@ -62,17 +62,17 @@ export function NotifyCompRemoteBar({ competitionId }: NotifyCompRemoteBarProps)
     <nav
       aria-label="Remote control"
       className="z-20 w-full border-t border-tertiary-weak bg-panel shadow-md shadow-tertiary-dark print:hidden">
-      <Container className="grid grid-cols-[minmax(0,1fr)_minmax(176px,1.2fr)_auto] items-center gap-2 px-2 py-2 md:grid-cols-[minmax(0,1fr)_minmax(220px,1.4fr)_minmax(0,1fr)] md:gap-4">
+      <Container className="relative flex min-h-16 items-center justify-center px-2 py-2">
         <Link
           to={`/competitions/${competitionId}/remote`}
-          className="min-w-0 rounded px-1 py-1 hover-transition hover:bg-gray-100 dark:hover:bg-gray-700">
+          className="absolute left-2 top-1/2 hidden max-w-[min(32vw,20rem)] -translate-y-1/2 rounded px-1 py-1 hover-transition hover:bg-gray-100 dark:hover:bg-gray-700 sm:block">
           <div className="min-w-0 space-y-1">
             <div className="truncate text-sm font-medium text-default">{title}</div>
             <div className="truncate text-xs text-muted">{detail}</div>
           </div>
         </Link>
 
-        <div className="min-w-0 space-y-1">
+        <div className="w-full max-w-sm space-y-1">
           <div className="flex items-center justify-center gap-2">
             <button
               type="button"
@@ -121,8 +121,6 @@ export function NotifyCompRemoteBar({ competitionId }: NotifyCompRemoteBarProps)
             <span className="text-xs tabular-nums text-muted">{remote.activityGroups.length}</span>
           </Link>
         </div>
-
-        <div />
       </Container>
     </nav>
   );