LOTS OF STYLING STUFF FINALLY THAT I HAD TO DO FINALYL AAUUFH

webui/src/components/DriverVideo/index.jsx

@@ -10,6 +10,7 @@ import OvercurrentOverlay from '../HudOverlays/OvercurrentOverlay/index.jsx';
 import LowBatteryOverlay from '../HudOverlays/LowBatteryOverlay/index.jsx';
 import DriverBottomStrip from '../HudOverlays/DriverBottomStrip/index.jsx';
 import HudChatInput from '../HudOverlays/HudChatInput/index.jsx';
+import CardFrame from '../CardFrame/index.jsx';
 
 export default function DriverVideo({ layoutFormat = 'desktop' }) {
   const roverId = useSessionSelector((state) => state.session?.assignment?.roverId ?? null);
@@ -20,7 +21,7 @@ export default function DriverVideo({ layoutFormat = 'desktop' }) {
 
   if (!roverId) {
     return (
-      <section className="panel">
+      <CardFrame hideHeader className="shrink-0">
         <div className="panel-muted content-center text-center text-sm text-slate-400 aspect-[4/3]">
           <p>You are not assigned to a rover.</p>
           <p className="mt-0">
@@ -29,13 +30,13 @@ export default function DriverVideo({ layoutFormat = 'desktop' }) {
             </a>
           </p>
         </div>
-      </section>
+      </CardFrame>
     );
   }
 
   const mobileHud = layoutFormat !== 'desktop';
   return (
-    <section className="panel">
+    <CardFrame hideHeader className="shrink-0">
       <div className="flex flex-col gap-0.5">
         <div className="relative w-full overflow-hidden bg-black aspect-[4/3]">
           <RoverMediaPlayer roverId={roverId} videoMode={videoMode} />
@@ -58,6 +59,6 @@ export default function DriverVideo({ layoutFormat = 'desktop' }) {
         </div>
         <DriverBottomStrip mobileHud={mobileHud} />
       </div>
-    </section>
+    </CardFrame>
   );
 }