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

webui/src/components/HelpPanel/index.jsx

@@ -2,24 +2,25 @@
 // Purpose: Defines the Help Panel module and the local helpers/components used in this file.
 // Scope: Keeps behavior unchanged while isolating this concern into a clear, single-responsibility unit.
 import { useControlSystem } from '../../controls/index.js';
+import CardFrame from '../CardFrame/index.jsx';
 import HelpContentView from '../HelpContentView/index.jsx';
 
 export default function HelpPanel({ layout, onOpenOverlay }) {
   const { state } = useControlSystem();
 
+  const actions = (
+    <button
+      type="button"
+      onClick={onOpenOverlay}
+      className="button-dark px-1 py-0.25 text-[0.75rem]"
+    >
+      Open full help
+    </button>
+  );
+
   return (
-    <section className="panel-section space-y-0.5 text-sm">
-      <div className="flex items-center justify-between text-xs text-slate-400">
-        <span>Help</span>
-        <button
-          type="button"
-          onClick={onOpenOverlay}
-          className="button-dark px-1 py-0.25 text-[0.75rem]"
-        >
-          Open full help
-        </button>
-      </div>
+    <CardFrame title="Help" actions={actions} bodyClassName="space-y-0.5 text-sm">
       <HelpContentView layout={layout} keymap={state?.keymap || {}} />
-    </section>
+    </CardFrame>
   );
 }