fix title dark

2026-09-15 17:12:59 -04:00 · 2026-09-12 14:35:10 -04:00
parent b0389b5ddc
commit a3c13f3dd3
8 changed files with 29 additions and 12 deletions
@@ -12,7 +12,7 @@
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <!-- site-metadata:inject -->
    <!-- analytics:inject -->
-    <script type="module" crossorigin src="/assets/index-UV1Q4Mdm.js"></script>
+    <script type="module" crossorigin src="/assets/index-CNVNbsvk.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-B5TEaoXl.css">
  </head>
  <body>
@@ -30,7 +30,11 @@ export default function AccessoriesExpansion({ roverId }) {
          className="!h-28"
        />
        {open ? (
-          <RoverAccessoryControls roverId={roverId} className="w-64 max-h-[70vh]" />
+          <RoverAccessoryControls
+            roverId={roverId}
+            plainCenteredHeadings
+            className="w-64 max-h-[70vh]"
+          />
        ) : null}
      </div>
    </div>
@@ -9,7 +9,12 @@ import useRoverAccessories from './useRoverAccessories.js';

 const EMPTY_ACCESSORY_VALUES = Object.freeze({});

-export default function RoverAccessoryControls({ roverId, headerAction = null, className = '' }) {
+export default function RoverAccessoryControls({
+  roverId,
+  headerAction = null,
+  plainCenteredHeadings = false,
+  className = '',
+}) {
  const { peripherals } = useRoverAccessories(roverId);
  const canControl = useCanControlRover(roverId);
  const { setPeripheralControl } = useControlActions();
@@ -36,8 +41,16 @@ export default function RoverAccessoryControls({ roverId, headerAction = null, c
                Every peripheral keeps its heading even when it is the only
                device, because its firmware-provided name identifies which
                physical accessory owns the controls below it. */}
-            <div className="flex min-h-8 items-center gap-1 bg-black/60 px-1 text-xs font-semibold text-white">
-              <h3 className="min-w-0 flex-1 truncate">{peripheral.name}</h3>
+            <div
+              className={`flex min-h-8 items-center gap-1 px-1 text-xs font-semibold text-white ${plainCenteredHeadings ? '' : 'bg-black/60'}`.trim()}
+            >
+              {/* Desktop already supplies one continuous HUD background, so
+                  its title needs neither a second tone nor left alignment.
+                  Mobile keeps the ordinary heading because it also carries
+                  the Back action on the opposite side. */}
+              <h3 className={`min-w-0 flex-1 truncate ${plainCenteredHeadings ? 'text-center' : ''}`.trim()}>
+                {peripheral.name}
+              </h3>
              {peripheralIndex === 0 ? headerAction : null}
            </div>
            <div className="flex flex-col gap-0.5">