dock drive action and joystick tweaks

webui/src/components/DriveDockAction.jsx

@@ -193,11 +193,14 @@ export default function DriveDockAction({
     'border-amber-300/70 bg-amber-900 text-amber-50 hover:bg-amber-800 focus-visible:ring-amber-300';
   const indigoCta =
     'border-indigo-300/70 bg-indigo-900 text-indigo-50 hover:bg-indigo-800 focus-visible:ring-indigo-300';
+  const orangeCta =
+    'border-amber-300/70 bg-amber-900 text-amber-50 hover:bg-amber-800 focus-visible:ring-amber-300';
   const forceExpanded = dockingInProgress;
   const expanded = expand || forceExpanded;
   const filledHeight = expanded ? 'h-full flex-1' : fill ? 'flex-1' : '';
   const compactHeight = isMobile && !expanded ? compactHeightClass : '';
   const layoutClass = isMobile && !expanded ? compactLayout : ctaLayout;
+  const compactDockedDriving = isMobile && !expanded && driving && docked;
 
   if (!driving && !dockingInProgress) {
     return (
@@ -237,7 +240,7 @@ export default function DriveDockAction({
 
   if (dockingInProgress) {
     const inProgressCopy = {
-      summary: 'if the rover is not docking, click to drive and try again.',
+      summary: 'If the rover is failing to dock, click to drive and try again.',
       steps: ['The rover should be slowly wiggling towards the dock', 'If it is obviously not working, press this button to enter driving mode and try again'],
     };
 
@@ -285,12 +288,16 @@ export default function DriveDockAction({
         onContextMenu={(event) => event.preventDefault()}
         className={
           isMobile
-            ? `flex w-full ${baseCardClasses} ${compactHeight} ${ctaText} ${layoutClass} ${ctaSize} ${indigoCta}`
+            ? `flex w-full ${baseCardClasses} ${compactHeight} ${ctaText} ${layoutClass} ${ctaSize} ${
+                compactDockedDriving ? orangeCta : indigoCta
+              }`
             : `${baseCardClasses} ${filledHeight} ${ctaText} ${ctaLayout} ${ctaSize} ${indigoCta}`
         }
       >
         <div className="flex w-full flex-col items-center gap-0.25">
-          <span className="text-base font-semibold text-indigo-50 md:text-lg">Dock and Charge</span>
+          <span className="text-base font-semibold text-indigo-50 md:text-lg">
+            {compactDockedDriving ? 'Docked!' : 'Dock and Charge'}
+          </span>
           {!isMobile && expanded ? (
             <div className="flex flex-wrap items-center justify-center gap-0.5">
               {dockKeyLabel ? <KeyPill label={dockKeyLabel} /> : null}

webui/src/components/MobileControls.jsx

@@ -86,13 +86,13 @@ function FloatingJoystick({ disabled, layout, radius, onMove, onStop }) {
     }
   }, [disabled, stopTracking]);
 
-  const heightClass = layout === 'landscape' ? 'h-[260px]' : 'h-[220px]';
+  const heightClass = 'h-full';
 
   return (
     <div
       ref={containerRef}
       role="presentation"
-      className={`relative w-full ${heightClass} select-none overflow-hidden bg-zinc-950`}
+      className={`relative w-full ${heightClass} select-none overflow-hidden rounded-xl border-2 border-slate-700 bg-slate-900/70 text-slate-100 shadow-md`}
       style={{ touchAction: 'none' }}
       onPointerDown={handlePointerDown}
       onPointerMove={handlePointerMove}
@@ -102,9 +102,9 @@ function FloatingJoystick({ disabled, layout, radius, onMove, onStop }) {
       onContextMenu={(event) => event.preventDefault()}
     >
       {!visual.active && (
-        <div className="absolute inset-0 flex flex-col items-center justify-center text-center text-xs text-slate-400">
-          <p>Touch and hold anywhere</p>
-          <p>Joystick will follow your thumb</p>
+        <div className="absolute inset-x-0 top-0 flex flex-col items-center gap-0 text-center pt-0.5">
+          <span className="font-semibold text-slate-200">Joystick area</span>
+          <span className="text-sm text-slate-300">Touch and hold to use the joystick</span>
         </div>
       )}
       {visual.active && (
@@ -176,7 +176,6 @@ function MobileJoystickPanel({ layout }) {
     registerInputState(SOURCE, { vector: zero, lastEvent: 'stop' });
   }, [disabled, registerInputState, setDriveVector]);
 
-
   const fillClass = dockedNotDriving ? 'max-h-screen self-start' : '';
   const containerClass = `flex h-full flex-col gap-0.5 text-slate-100 ${fillClass}`;
 
@@ -189,7 +188,7 @@ function MobileJoystickPanel({ layout }) {
         compactHeightClass="min-h-[5rem]"
       />
       {!expandAction ? (
-        <>
+        <div className="flex-1 min-h-0">
           <FloatingJoystick
             disabled={disabled}
             layout={layout}
@@ -197,7 +196,7 @@ function MobileJoystickPanel({ layout }) {
             onMove={handleMove}
             onStop={handleStop}
           />
-        </>
+        </div>
       ) : null}
       {/* Panic stop button can be re-enabled here if needed */}