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

webui/src/components/OvercurrentLimiterPanel/index.jsx

@@ -4,6 +4,7 @@
 import { useMemo } from 'react';
 import { useControlSystem } from '../../controls/index.js';
 import { OVERCURRENT_GROUPS } from '../../controls/overcurrentLimiter.js';
+import CardFrame from '../CardFrame/index.jsx';
 
 const GROUP_LABELS = {
   drive: 'Drive wheels',
@@ -32,11 +33,11 @@ export default function OvercurrentLimiterPanel() {
   const groups = useMemo(() => OVERCURRENT_GROUPS.map((group) => group.key), []);
 
   return (
-    <section className="panel-section space-y-0.5 text-sm">
-      <div className="flex items-center justify-between text-xs text-slate-400">
-        <span>Overcurrent limiter</span>
-        <span>{overcurrentLimiter?.adminImmune ? 'Admin immune' : 'Active'}</span>
-      </div>
+    <CardFrame
+      title="Overcurrent limiter"
+      meta={overcurrentLimiter?.adminImmune ? 'Admin immune' : 'Active'}
+      bodyClassName="space-y-0.5 text-sm"
+    >
       {!roverId ? (
         <p className="text-xs text-slate-500">Assign a rover to view limiter status.</p>
       ) : (
@@ -46,7 +47,7 @@ export default function OvercurrentLimiterPanel() {
             const over = overcurrentLimiter?.overcurrent?.groups?.[key] ?? false;
             const scale = overcurrentLimiter?.scales?.perGroup?.[key] ?? 1;
             return (
-              <div key={key} className="surface space-y-0.5">
+              <div key={key} className="space-y-0.5">
                 <div className="flex items-center justify-between text-xs">
                   <span className="text-slate-200">{GROUP_LABELS[key] || key}</span>
                   <span className={over ? 'text-red-300' : 'text-slate-400'}>
@@ -67,13 +68,13 @@ export default function OvercurrentLimiterPanel() {
               </div>
             );
           })}
-          <div className="surface text-[0.7rem] text-slate-400">
+          <div className="text-[0.7rem] text-slate-400">
             <div>{`Down rate ${overcurrentLimiter?.config?.downRatePerSec}/s · Up rate ${overcurrentLimiter?.config?.upRatePerSec}/s`}</div>
             <div>{`Release delay ${overcurrentLimiter?.config?.releaseDelaySec}s`}</div>
             <div>{`Output rate ${overcurrentLimiter?.config?.outputRateMs}ms`}</div>
           </div>
         </div>
       )}
-    </section>
+    </CardFrame>
   );
 }