firefox friendly :)

starpilot/system/the_galaxy/assets/mobile/css/material.css

@@ -187,6 +187,11 @@
   background: var(--scrollbar-thumb-hover);
 }
 
+button::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
 html, body {
   background: var(--background);
   color: var(--on-surface);
@@ -196,6 +201,9 @@ html, body {
   padding: 0;
   -webkit-tap-highlight-color: transparent;
   text-rendering: optimizeSpeed;
+  touch-action: pan-x pan-y;
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
 }
 
 html { cursor: default; }
@@ -298,6 +306,7 @@ body:has(.gx-scrim, .gx-underlay, .gx-drawer.open) #galaxy-bg .galaxy-hero {
 
 [v-cloak] { display: none !important; }
 a { color: inherit; text-decoration: none; }
+.gx-link { color: var(--primary); text-decoration: underline; text-decoration-color: var(--primary-glow); text-underline-offset: 0.16em; }
 button { font-family: var(--font-body); }
 ul { list-style: none; margin: 0; padding: 0; }
 
@@ -362,6 +371,12 @@ ul { list-style: none; margin: 0; padding: 0; }
 .gx-appbar .gx-appbar__back,
 .gx-appbar .gx-theme-toggle,
 .gx-appbar .gx-appbar__menu {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin: 0;
+  line-height: 1;
   background: var(--glass-bg);
   backdrop-filter: var(--glass-blur);
   -webkit-backdrop-filter: var(--glass-blur);
@@ -456,6 +471,9 @@ ul { list-style: none; margin: 0; padding: 0; }
   justify-content: center;
   min-height: var(--touch-target);
   min-width: var(--touch-target);
+  padding: 0;
+  margin: 0;
+  line-height: 1;
   position: relative;
   transition: background-color var(--motion-fast), transform var(--motion-fast);
   width: var(--touch-target);
@@ -463,7 +481,18 @@ ul { list-style: none; margin: 0; padding: 0; }
 
 .gx-icon-btn:hover { background: var(--glass-bg-hover); }
 .gx-icon-btn:active { transform: scale(0.9); }
-.gx-icon-btn i { font-size: 1.3rem; }
+.gx-icon-btn i,
+.gx-appbar .bi,
+.gx-appbar i {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  height: 1em;
+  width: 1em;
+  font-size: 1.3rem;
+  vertical-align: middle;
+}
 .gx-back-btn { display: none; }
 .gx-appbar__menu { display: inline-flex; }
 
@@ -783,16 +812,21 @@ body.is-scrolling .gx-tile {
 .gx-row__info { flex: 1; min-width: 0; }
 
 .gx-row__label {
-  display: block;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--sp-2);
   font-weight: var(--fw-medium);
   font-size: var(--fs-base);
+  line-height: 1.3;
 }
 
 .gx-row__desc {
+  display: block;
   color: var(--text-muted);
   font-size: var(--fs-sm);
-  margin-top: 4px;
-  line-height: 1.4;
+  margin-top: 6px;
+  line-height: 1.45;
 }
 
 .gx-row__value {
@@ -873,6 +907,9 @@ body.is-scrolling .gx-tile {
   display: flex;
   flex-direction: column;
   gap: var(--sp-2);
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  user-select: none;
   width: 100%;
 }
 
@@ -891,10 +928,13 @@ input[type="range"].gx-slider {
   background: rgba(255, 255, 255, 0.12);
   border-radius: var(--radius-full);
   cursor: pointer;
-  flex: 1;
+  margin: 0;
+  padding: 0;
+  border: none;
   height: 8px;
   outline: none;
-  touch-action: pan-y;
+  -webkit-tap-highlight-color: transparent;
+  touch-action: none;
   width: 100%;
 }
 
@@ -918,6 +958,28 @@ input[type="range"].gx-slider:active::-webkit-slider-thumb {
   transform: scale(1.15);
 }
 
+input[type="range"].gx-slider::-moz-range-track {
+  background: transparent;
+  border: none;
+  height: 8px;
+  border-radius: var(--radius-full);
+}
+
+input[type="range"].gx-slider::-moz-range-thumb {
+  background: #ffffff;
+  border: 2px solid var(--primary);
+  border-radius: 50%;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+  height: 22px;
+  width: 22px;
+  box-sizing: border-box;
+  transition: transform var(--motion-fast);
+}
+
+input[type="range"].gx-slider:active::-moz-range-thumb {
+  transform: scale(1.15);
+}
+
 .gx-slider-reset {
   background: var(--surface-container-high);
   border: 1px solid var(--glass-border);
@@ -1148,10 +1210,15 @@ input[type="color"].gx-color {
 .gx-tile span { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
 
 .gx-chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   border-radius: var(--radius-full);
   font-size: var(--fs-xs);
   font-weight: var(--fw-bold);
-  padding: 3px 10px;
+  padding: 2px 8px;
+  line-height: 1.2;
+  vertical-align: middle;
 }
 
 button.gx-chip {
@@ -1872,20 +1939,6 @@ button.gx-chip:hover {
   padding: var(--sp-3);
 }
 
-.gx-image-viewer__header {
-  align-items: center;
-  display: flex;
-  gap: var(--sp-2);
-  justify-content: space-between;
-  margin-bottom: var(--sp-3);
-}
-
-.gx-image-viewer__header .gx-sheet__title {
-  margin: 0;
-  min-width: 0;
-  overflow-wrap: anywhere;
-}
-
 .gx-image-viewer__image {
   border-radius: var(--radius-sm);
   display: block;
@@ -2347,20 +2400,23 @@ button.gx-chip:hover {
   justify-content: space-between;
 }
 .gx-brightness__readout label { color: var(--text-muted); font-size: var(--fs-sm); }
-/* GalaxySelect: the themed dropdown used for every select in the app. */
+.gx-select > select { display: none !important; }
 .gx-select { display: inline-flex; position: relative; vertical-align: middle; min-width: 0; max-width: 100%; }
 .gx-select.gx-field { padding: 0; background: var(--surface-container-high); }
 .gx-select.gx-field--full { display: flex; width: 100%; }
-.gx-select__button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-width: 0; min-height: 44px; padding: 10px var(--sp-3); border: 0; border-radius: inherit; color: inherit; background: transparent; font: inherit; text-align: left; cursor: pointer; }
+.gx-select__button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-width: 0; min-height: 44px; padding: 10px var(--sp-3); border: 0; border-radius: inherit; color: inherit; background: transparent; font: inherit; text-align: left; cursor: pointer; touch-action: manipulation; }
 .gx-select__button > span { min-width: 0; overflow-wrap: anywhere; white-space: normal; }
 .gx-select__button > i { flex-shrink: 0; }
 .gx-select:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; }
 .gx-select__button:disabled { opacity: .5; cursor: default; }
 .gx-select-menu { position: fixed; inset: auto; margin: 0; padding: 6px; box-sizing: border-box; max-width: none; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--outline-variant, var(--glass-border)); border-radius: var(--radius-md); color: var(--on-surface); background: var(--surface-container-high, #252033); box-shadow: 0 12px 36px #0006; font: var(--fs-base) var(--font-body); }
 .gx-select-menu::backdrop { background: transparent; }
-.gx-select-menu [role="option"] { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 10px; background: transparent; color: inherit; text-align: left; font: inherit; white-space: normal; overflow-wrap: anywhere; cursor: pointer; }
+.gx-select-menu [role="option"] { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 10px; background: transparent; color: inherit; text-align: left; font: inherit; white-space: normal; overflow-wrap: anywhere; cursor: pointer; touch-action: manipulation; }
 .gx-select-menu [role="option"][aria-selected="true"] { background: var(--primary-container); color: var(--on-primary-container); }
-.gx-select-menu [role="option"]:hover:not(:disabled), .gx-select-menu [role="option"]:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; background: var(--primary-container); color: var(--on-primary-container); }
+.gx-select-menu [role="option"]:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; background: var(--primary-container); color: var(--on-primary-container); }
+@media (hover: hover) {
+  .gx-select-menu [role="option"]:hover:not(:disabled) { outline: 2px solid var(--primary); outline-offset: -2px; background: var(--primary-container); color: var(--on-primary-container); }
+}
 .gx-select-menu [role="option"]:disabled { opacity: .45; cursor: default; }
 .gx-select-menu__group { padding: 10px 12px 4px; color: var(--on-surface-variant); font-size: .85em; }
 
@@ -2369,7 +2425,6 @@ button.gx-chip:hover {
 .gx-select-menu:not([open]) { display: none; }
 
 .gx-slider-row.is-fine-scrubbing input[type="range"].gx-slider {
-  touch-action: none;
   background: rgba(157, 114, 255, 0.28);
   box-shadow: 0 0 8px var(--primary-glow);
 }
@@ -2381,7 +2436,14 @@ button.gx-chip:hover {
   box-shadow: 0 0 10px var(--secondary-glow);
 }
 
+.gx-slider-row.is-fine-scrubbing input[type="range"].gx-slider::-moz-range-thumb {
+  transform: scale(1.35);
+  background: var(--secondary);
+  border-color: #ffffff;
+  box-shadow: 0 0 10px var(--secondary-glow);
+}
+
 .gx-slider-row.is-fine-scrubbing .gx-row__value {
   color: var(--secondary);
   text-shadow: 0 0 10px var(--secondary-glow);
-}
+}

starpilot/system/the_galaxy/assets/mobile/js/components/AppShell.js

@@ -36,7 +36,7 @@ export const AppShell = {
   name: "AppShell",
   components: { DevicePicker },
   data() {
-    return { store, BOTTOM_NAV, NAV }
+    return { store, BOTTOM_NAV, NAV, searchNarrow: false }
   },
   computed: {
     online() { return store.online },
@@ -52,6 +52,9 @@ export const AppShell = {
       get() { return store.search },
       set(v) { store.search = v },
     },
+    searchPlaceholder() {
+      return this.searchNarrow ? t("Search") : t("Search toggles...")
+    },
   },
   watch: {
     "store.search"(q) {
@@ -86,6 +89,19 @@ export const AppShell = {
       store.search = ""
       this.$nextTick(() => { const el = this.$refs.searchInput; if (el) el.focus() })
     },
+    measureSearch() {
+      const el = this.$refs.searchInput
+      if (!el) return
+      const styles = window.getComputedStyle(el)
+      const padding = parseFloat(styles.paddingLeft || "0") + parseFloat(styles.paddingRight || "0")
+      const available = el.clientWidth - padding
+      if (available <= 0) return
+      if (!this._searchCanvas) this._searchCanvas = document.createElement("canvas")
+      const ctx = this._searchCanvas.getContext("2d")
+      if (!ctx) return
+      ctx.font = `${styles.fontStyle} ${styles.fontWeight} ${styles.fontSize} ${styles.fontFamily}`
+      this.searchNarrow = ctx.measureText(t("Search toggles...")).width > available
+    },
     themeToggle() { toggleTheme() },
     toggleNavPin() { toggleNavPinned() },
     navTo(link) {
@@ -107,8 +123,19 @@ export const AppShell = {
     this.statusPoll = usePolling(() => this.refreshStatus(), { interval: 5000 })
     this.statusPoll.start()
   },
+  mounted() {
+    this.measureSearch()
+    if (typeof ResizeObserver !== "undefined" && this.$refs.searchInput) {
+      this.searchObserver = new ResizeObserver(() => this.measureSearch())
+      this.searchObserver.observe(this.$refs.searchInput)
+    } else {
+      window.addEventListener("resize", this.measureSearch)
+    }
+  },
   beforeUnmount() {
     this.statusPoll?.destroy()
+    this.searchObserver?.disconnect()
+    window.removeEventListener("resize", this.measureSearch)
   },
   template: `
     <div class="gx-app" :class="{ 'gx-nav-pinned': navPinned }">
@@ -122,7 +149,7 @@ export const AppShell = {
             <span class="gx-appbar__title">Galaxy</span>
           </span>
           <div class="gx-searchwrap">
-            <input ref="searchInput" class="gx-search gx-appbar__search" type="search" :placeholder="tr('Search toggles...')"
+            <input ref="searchInput" class="gx-search gx-appbar__search" type="search" :placeholder="searchPlaceholder"
               v-model="search" :aria-label="tr('Search toggles')" />
             <button v-if="search" type="button" class="gx-search-clear" :aria-label="tr('Clear search')" @click="clearSearch">
               <i class="bi bi-x"></i>

starpilot/system/the_galaxy/assets/mobile/js/components/GalaxySelect.js

@@ -41,7 +41,12 @@ export const GalaxySelect = {
       this.open = true
       await this.$nextTick()
       const menu = this.$refs.menu
-      menu.showModal()
+      try {
+        menu.showModal()
+      } catch (error) {
+        this.open = false
+        return
+      }
       this.position()
       const options = [...menu.querySelectorAll('[role="option"]:not(:disabled)')]
       const selected = options.find(option => option.dataset.value === this.selected)
@@ -126,7 +131,7 @@ export const GalaxySelect = {
         :aria-label="name" :aria-describedby="$attrs['aria-describedby']" :disabled="disabled" @click="show" @keydown="buttonKey">
         <span>{{ label }}</span><i class="bi bi-chevron-down" aria-hidden="true"></i>
       </button>
-      <dialog ref="menu" class="gx-select-menu" @cancel.prevent="close" @click="event => { if (event.target === $refs.menu) close() }" @keydown="menuKey">
+      <dialog ref="menu" class="gx-select-menu" @cancel.prevent="close" @click.self="close" @keydown="menuKey">
         <div :id="uid + '-list'" role="listbox" :aria-label="name">
           <template v-for="(item, index) in items" :key="item.index">
             <div v-if="item.group && item.group !== items[index - 1]?.group" class="gx-select-menu__group">{{ item.group }}</div>

starpilot/system/the_galaxy/assets/mobile/js/components/GalaxySheet.js

@@ -0,0 +1,28 @@
+export const GalaxySheet = {
+  name: "GalaxySheet",
+  props: {
+    open: { type: Boolean, default: false },
+    title: { type: String, default: "" },
+    icon: { type: String, default: "" },
+    bottomsheet: { type: Boolean, default: false },
+    scrimClass: { type: String, default: "" },
+    sheetClass: { type: String, default: "" },
+  },
+  emits: ["close"],
+  template: `
+    <Teleport to="body">
+      <transition name="gx-fade">
+        <div v-if="open" class="gx-scrim" :class="[scrimClass, { 'gx-scrim--bottomsheet': bottomsheet }]" @click.self="$emit('close')">
+          <div class="gx-sheet" :class="sheetClass" role="dialog" aria-modal="true" :aria-label="title">
+            <div class="gx-section__header gx-video-player-header" style="cursor:default;">
+              <i v-if="icon" class="bi" :class="icon" aria-hidden="true"></i>
+              <span class="gx-section__title">{{ title }}</span>
+              <button type="button" class="gx-icon-btn" aria-label="Close" @click="$emit('close')"><i class="bi bi-x-lg" aria-hidden="true"></i></button>
+            </div>
+            <slot />
+          </div>
+        </div>
+      </transition>
+    </Teleport>
+  `,
+}

starpilot/system/the_galaxy/assets/mobile/js/components/GalaxyToggleCard.js

@@ -216,9 +216,10 @@ export const GalaxyToggleCard = {
     onSliderPointerEnd(e) {
       this.clearHoldTimer()
       const wasFine = this.isFineScrubbing
+      const pid = e?.pointerId ?? this.fineScrub?.pointerId
       this.fineScrub = null
       this.isFineScrubbing = false
-      try { e.target.releasePointerCapture?.(e.pointerId) } catch (_) {}
+      try { (e?.target || this.$refs.slider)?.releasePointerCapture?.(pid) } catch (_) {}
       this.interacting = false
       if (wasFine || this.preview !== undefined) {
         this.flushSlider(this.currentValue)
@@ -303,7 +304,7 @@ export const GalaxyToggleCard = {
             <button class="gx-slider-reset" :disabled="locked || updating" @click="resetToDefault">{{ tr("Default") }}</button>
           </div>
           <input ref="slider" type="range" class="gx-slider" :min="bounds.min" :max="bounds.max" :step="bounds.step"
-            :value="currentValue" :disabled="locked || updating"
+            :value="currentValue" :disabled="locked"
             @input="onSliderInput" @change="onSliderCommit" @blur="onSliderBlur"
             @pointerdown="onSliderPointerDown" @pointermove="onSliderPointerMove"
             @pointerup="onSliderPointerEnd" @pointercancel="onSliderPointerEnd"

starpilot/system/the_galaxy/assets/mobile/js/components/ScreenBrightnessControl.js

@@ -117,10 +117,10 @@ export const ScreenBrightnessControl = {
         <span class="gx-row__desc">{{ tr(param.description) }}</span>
         <span v-if="locked" class="gx-row__desc">{{ tr(lockMessage) }}</span>
       </div>
-      <select class="gx-field" :id="controlId + '-mode'" :value="mode" :disabled="locked || updating" @change="onModeChange">
+      <GalaxySelect class="gx-field" :id="controlId + '-mode'" :value="mode" :disabled="locked || updating" aria-label="Brightness mode" @change="onModeChange">
         <option value="auto">{{ tr("Auto") }}</option>
         <option value="manual">{{ tr("Manual") }}</option>
-      </select>
+      </GalaxySelect>
       <div class="gx-slider-row">
         <div class="gx-brightness__readout">
           <label :for="controlId + '-slider'">{{ mode === 'auto' ? tr("Auto brightness offset") : tr("Brightness") }}</label>

starpilot/system/the_galaxy/assets/mobile/js/views/Recordings.js

@@ -1,5 +1,6 @@
 import { api, showSnackbar } from "../api.js"
 import { GalaxyConfirm } from "../components/GalaxyModal.js"
+import { GalaxySheet } from "../components/GalaxySheet.js"
 import { GalaxyTabs } from "../components/GalaxyTabs.js"
 import { GxNotice } from "../components/GxNotice.js"
 import { isFirestarOrigin } from "../components/PwaInstallSection.js"
@@ -47,7 +48,7 @@ function localDeviceUrl(ip, route = "/") {
 
 export const Recordings = {
   name: "Recordings",
-  components: { GalaxyTabs, GxNotice },
+  components: { GalaxyTabs, GxNotice, GalaxySheet },
   data() {
     return {
       sub: "routes",
@@ -456,61 +457,39 @@ export const Recordings = {
       </section>
       </template>
 
-      <Teleport to="body">
-        <transition name="gx-fade">
-          <div v-if="sub === 'routes' && playerRoute" class="gx-scrim gx-scrim--bottomsheet" @click.self="closePlayer">
-            <div class="gx-sheet" role="dialog" aria-label="Route video player">
-              <div class="gx-section__header gx-video-player-header" style="cursor:default;">
-                <i class="bi bi-camera-video"></i>
-                <span class="gx-section__title">{{ playerRoute.displayName }}</span>
-                <button type="button" class="gx-icon-btn" aria-label="Close player" @click="closePlayer"><i class="bi bi-x-lg"></i></button>
+      <GalaxySheet :open="sub === 'routes' && !!playerRoute" :title="playerRoute?.displayName || ''" icon="bi-camera-video" bottomsheet @close="closePlayer">
+        <div style="padding: var(--sp-3);">
+          <div v-if="playerError" class="gx-empty" style="color: var(--error);">{{ playerError }}</div>
+          <div v-else-if="playerLoading" class="gx-loading"><i class="bi bi-hourglass-split"></i> Loading video...</div>
+          <template v-else-if="segments.length">
+            <video ref="player" class="gx-video" controls muted playsinline preload="metadata"></video>
+            <div style="display:flex; flex-direction:column; gap:8px; padding: var(--sp-3) 0 0;">
+              <div class="gx-video-segment-controls">
+                <button type="button" class="gx-btn gx-btn--tonal gx-btn--icon" aria-label="Previous segment" :disabled="current<=0" @click="current--; playSegment()"><i class="bi bi-chevron-left"></i></button>
+                <GalaxySelect class="gx-field gx-video-segment-select" aria-label="Video segment" :value="String(current)" :disabled="!segments.length" @change="selectSegment(Number($event.target.value))">
+                  <option v-for="(s, i) in segments" :key="i" :value="String(i)">Segment {{ i + 1 }} of {{ segments.length }}</option>
+                </GalaxySelect>
+                <button type="button" class="gx-btn gx-btn--tonal gx-btn--icon" aria-label="Next segment" :disabled="current>=segments.length-1" @click="current++; playSegment()"><i class="bi bi-chevron-right"></i></button>
               </div>
-              <div style="padding: var(--sp-3);">
-                <div v-if="playerError" class="gx-empty" style="color: var(--error);">{{ playerError }}</div>
-                <div v-else-if="playerLoading" class="gx-loading"><i class="bi bi-hourglass-split"></i> Loading video...</div>
-                <template v-else-if="segments.length">
-                  <video ref="player" class="gx-video" controls muted playsinline preload="metadata"></video>
-                  <div style="display:flex; flex-direction:column; gap:8px; padding: var(--sp-3) 0 0;">
-                    <div class="gx-video-segment-controls">
-                      <button type="button" class="gx-btn gx-btn--tonal gx-btn--icon" aria-label="Previous segment" :disabled="current<=0" @click="current--; playSegment()"><i class="bi bi-chevron-left"></i></button>
-                      <GalaxySelect class="gx-field gx-video-segment-select" aria-label="Video segment" :value="String(current)" :disabled="!segments.length" @change="selectSegment(Number($event.target.value))">
-                        <option v-for="(s, i) in segments" :key="i" :value="String(i)">Segment {{ i + 1 }} of {{ segments.length }}</option>
-                      </GalaxySelect>
-                      <button type="button" class="gx-btn gx-btn--tonal gx-btn--icon" aria-label="Next segment" :disabled="current>=segments.length-1" @click="current++; playSegment()"><i class="bi bi-chevron-right"></i></button>
-                    </div>
-                    <div class="gx-video-actions" style="display:flex; gap:8px; flex-wrap:wrap; align-items:center;">
-                      <button v-for="c in cameras" :key="c" type="button" class="gx-chip" :style="selectedCamera===c?'background:var(--primary);color:var(--on-primary);':''" @click="selectedCamera=c; playSegment()">{{ c }}</button>
-                      <button type="button" class="gx-btn gx-btn--tonal gx-btn--icon gx-video-download" title="Download" style="margin-left:auto;" @click="downloadRoute"><i class="bi bi-download"></i></button>
-                    </div>
-                  </div>
-                </template>
+              <div class="gx-video-actions" style="display:flex; gap:8px; flex-wrap:wrap; align-items:center;">
+                <button v-for="c in cameras" :key="c" type="button" class="gx-chip" :style="selectedCamera===c?'background:var(--primary);color:var(--on-primary);':''" @click="selectedCamera=c; playSegment()">{{ c }}</button>
+                <button type="button" class="gx-btn gx-btn--tonal gx-btn--icon gx-video-download" title="Download" style="margin-left:auto;" @click="downloadRoute"><i class="bi bi-download"></i></button>
               </div>
             </div>
-          </div>
-        </transition>
-      </Teleport>
+          </template>
+        </div>
+      </GalaxySheet>
 
-      <Teleport to="body">
-        <transition name="gx-fade">
-          <div v-if="recPlay" class="gx-scrim gx-scrim--bottomsheet" @click.self="closeRecPlayer">
-            <div class="gx-sheet" role="dialog" aria-label="Screen recording player">
-              <div class="gx-section__header gx-video-player-header" style="cursor:default;">
-                <i class="bi bi-record-circle"></i>
-                <span class="gx-section__title">{{ screenDisplayName(recPlay) }}</span>
-                <button type="button" class="gx-icon-btn" aria-label="Close player" @click="closeRecPlayer"><i class="bi bi-x-lg"></i></button>
-              </div>
-              <div style="padding: var(--sp-3);">
-                <video class="gx-video" controls autoplay playsinline :src="screenUrl(recPlay.filename)"></video>
-                <div style="display:flex; gap:8px; padding: var(--sp-3) 0 0; flex-wrap:wrap;">
-                  <button type="button" class="gx-btn" @click="downloadRec(recPlay)"><i class="bi bi-download"></i> Download</button>
-                  <button type="button" class="gx-btn gx-btn--tonal" @click="renameRec(recPlay)"><i class="bi bi-pencil"></i> Rename</button>
-                  <button type="button" class="gx-btn gx-btn--danger" @click="deleteRec(recPlay)"><i class="bi bi-trash"></i> Delete</button>
-                </div>
-              </div>
-            </div>
+      <GalaxySheet :open="!!recPlay" :title="screenDisplayName(recPlay)" icon="bi-record-circle" bottomsheet @close="closeRecPlayer">
+        <div style="padding: var(--sp-3);">
+          <video class="gx-video" controls autoplay playsinline :src="screenUrl(recPlay?.filename)"></video>
+          <div style="display:flex; gap:8px; padding: var(--sp-3) 0 0; flex-wrap:wrap;">
+            <button type="button" class="gx-btn" @click="downloadRec(recPlay)"><i class="bi bi-download"></i> Download</button>
+            <button type="button" class="gx-btn gx-btn--tonal" @click="renameRec(recPlay)"><i class="bi bi-pencil"></i> Rename</button>
+            <button type="button" class="gx-btn gx-btn--danger" @click="deleteRec(recPlay)"><i class="bi bi-trash"></i> Delete</button>
           </div>
-        </transition>
-      </Teleport>
+        </div>
+      </GalaxySheet>
       </template>
 
       <GxNotice v-else tone="info" icon="bi-satellite" title="Recordings unavailable via Galaxy">

starpilot/system/the_galaxy/assets/mobile/js/views/Sentry.js

@@ -2,6 +2,7 @@ import { api, showSnackbar } from "../api.js"
 import { usePolling } from "../composables.js"
 import { GalaxyConfirm } from "../components/GalaxyModal.js"
 import { GalaxySection } from "../components/GalaxySection.js"
+import { GalaxySheet } from "../components/GalaxySheet.js"
 
 function b64ToBytes(value) {
   const padding = "=".repeat((4 - (value.length % 4)) % 4)
@@ -12,7 +13,7 @@ function b64ToBytes(value) {
 
 export const Sentry = {
   name: "Sentry",
-  components: { GalaxySection },
+  components: { GalaxySection, GalaxySheet },
   data() {
     return {
       loading: true,
@@ -402,17 +403,10 @@ export const Sentry = {
         </div>
       </GalaxySection>
 
-      <div v-if="selectedImage" class="gx-scrim gx-scrim--image-viewer" @click.self="closeImage">
-        <div class="gx-sheet gx-image-viewer" role="dialog" aria-modal="true" :aria-label="selectedImage.alt">
-          <div class="gx-image-viewer__header">
-            <span class="gx-sheet__title">{{ selectedImage.alt }}</span>
-            <button type="button" class="gx-icon-btn" aria-label="Close image" title="Close image" @click="closeImage">
-              <i class="bi bi-x-lg" aria-hidden="true"></i>
-            </button>
-          </div>
-          <img class="gx-image-viewer__image" :src="selectedImage.src" :alt="selectedImage.alt" />
-        </div>
-      </div>
+      <GalaxySheet :open="!!selectedImage" :title="selectedImage?.alt || ''" icon="bi-camera"
+        scrim-class="gx-scrim--image-viewer" sheet-class="gx-image-viewer" @close="closeImage">
+        <img class="gx-image-viewer__image" :src="selectedImage?.src" :alt="selectedImage?.alt || ''" />
+      </GalaxySheet>
     </div>
   `,
 }

starpilot/system/the_galaxy/assets/mobile/js/views/SystemTools.js

@@ -14,6 +14,28 @@ function toPercent(value) {
   if (!Number.isFinite(n)) return 0
   return Math.max(0, Math.min(100, n))
 }
+function githubRemoteUrl(remote, commitsUrl = "") {
+  let value = String(remote || "").trim()
+  if (!value) {
+    const commits = String(commitsUrl || "").trim()
+    const markerIndex = commits.indexOf("/commits/")
+    if (commits.startsWith("https://github.com/") && markerIndex > 0) value = commits.slice(0, markerIndex)
+    else return ""
+  }
+  if (value.startsWith("git@github.com:")) value = `https://github.com/${value.split(":", 2)[1] || ""}`
+  else if (value.startsWith("ssh://git@github.com/")) value = `https://github.com/${value.split("ssh://git@github.com/", 2)[1] || ""}`
+  else if (value.startsWith("http://github.com/")) value = `https://github.com/${value.split("http://github.com/", 2)[1] || ""}`
+  if (!value.startsWith("https://github.com/")) return ""
+  value = value.replace(/\/+$/, "")
+  return value.endsWith(".git") ? value.slice(0, -4) : value
+}
+
+function githubCommitUrl(remote, commitsUrl, commit) {
+  const sha = String(commit || "").trim()
+  if (!/^[a-f0-9]{7,40}$/i.test(sha)) return ""
+  const base = githubRemoteUrl(remote, commitsUrl)
+  return base ? `${base}/commit/${sha}` : ""
+}
 
 const CORE_UPDATE_BRANCHES = ["StarPilot", "Dom"]
 const REBOOT_PENDING_STORAGE_KEY = "galaxy-update-reboot-pending"
@@ -153,6 +175,7 @@ export const SystemTools = {
         (this.versionMode === "earlier" && (this.versionLoading || !/^[a-f0-9]{40}$/.test(this.selectedCommit) || !this.versionChoices.some(commit => commit.sha === this.selectedCommit)))
     },
     updateAvailable() { return this.checkedForUpdates && !!this.fastStatus?.updateAvailable && !this.updateInProgress },
+    remoteCommitUrl() { return githubCommitUrl(this.fastStatus?.originRemote, this.fastStatus?.commitsUrl, this.fastStatus?.remoteCommit) },
     factoryResetStatus() {
       const s = this.fastStatus
       if (!s || String(s?.lastMode || "").trim() !== "factory-reset") return null
@@ -618,7 +641,7 @@ export const SystemTools = {
                 <div class="gx-row" style="border-top:none; min-height:0; padding:4px 0;"><span class="gx-row__label">Installed branch</span><span class="gx-row__value">{{ fastStatus.branch || currentBranch || '—' }}</span></div>
                 <div v-if="updateInProgress && !rebootPending" class="gx-row" style="border-top:none; min-height:0; padding:4px 0;"><span class="gx-row__label">Stage</span><span class="gx-row__value">{{ fastStatus.stage }} · {{ fastStatus.progressLabel }}</span></div>
                 <div class="gx-row" style="border-top:none; min-height:0; padding:4px 0;"><span class="gx-row__label">Local</span><span class="gx-row__value" style="font-family:monospace;">{{ shortCommit(fastStatus.localCommit) }}</span></div>
-                <div class="gx-row" style="border-top:none; min-height:0; padding:4px 0;"><span class="gx-row__label">Remote</span><span class="gx-row__value" style="font-family:monospace;">{{ shortCommit(fastStatus.remoteCommit) }}</span></div>
+                <div class="gx-row" style="border-top:none; min-height:0; padding:4px 0;"><span class="gx-row__label">Remote</span><span class="gx-row__value" style="font-family:monospace;"><a v-if="remoteCommitUrl" class="gx-link" :href="remoteCommitUrl" target="_blank" rel="noopener noreferrer" :title="fastStatus.remoteCommit">{{ shortCommit(fastStatus.remoteCommit) }}</a><template v-else>{{ shortCommit(fastStatus.remoteCommit) }}</template></span></div>
                 <div v-if="updateInProgress && !rebootPending" class="gx-update-progress" role="progressbar" aria-label="Update progress"
                   :aria-valuenow="Math.round(fastStatus.progressPercent || 0)" aria-valuemin="0" aria-valuemax="100">
                   <div class="gx-update-progress__track">

starpilot/system/the_galaxy/tests/test_screen_settings_dom.cjs

@@ -16,6 +16,7 @@ const wakes = Object.keys(wakeDefaults)
 const fixture = `
 import {createApp, reactive} from 'vue';
 import {SettingTree} from '/assets/mobile/js/components/SettingTree.js';
+import {GalaxySelect} from '/assets/mobile/js/components/GalaxySelect.js';
 import {applyParamChange, isSettingVisible} from '/assets/mobile/js/params.js';
 import {api} from '/assets/mobile/js/api.js';
 const layout = ${JSON.stringify(layout)};
@@ -35,7 +36,7 @@ window.fetch=async (input,init={}) => {
   return new Response(JSON.stringify({updated}),{status:200});
 };
 const section=(await api.getLayout()).find(s=>s.params.some(p=>p.key==='ScreenManagement'));
-createApp({components:{SettingTree},setup:()=>({values}),
+createApp({components:{SettingTree, GalaxySelect},setup:()=>({values}),
   data:()=>({expanded:{ScreenManagement:true}}),
   computed:{params(){return section.params.filter(p=>isSettingVisible(section,p,this.values))}},
   methods:{change(patch){Object.assign(values,applyParamChange(values,patch))}},
@@ -62,6 +63,10 @@ createApp({components:{SettingTree},setup:()=>({values}),
     await page.goto('http://offline.invalid/')
     const offMode=page.locator('#gx-ScreenBrightness-mode')
     const onMode=page.locator('#gx-ScreenBrightnessOnroad-mode')
+    const offModeSelect=page.locator('.gx-select:has(#gx-ScreenBrightness-mode) select')
+    const onModeSelect=page.locator('.gx-select:has(#gx-ScreenBrightnessOnroad-mode) select')
+    const modeValue=(select)=>select.evaluate(el=>el.value)
+    const setMode=(select,value)=>select.evaluate((el,v)=>{el.value=v;el.dispatchEvent(new Event('change',{bubbles:true}))},value)
     const offSlider=page.locator('#gx-ScreenBrightness-slider')
     const onSlider=page.locator('#gx-ScreenBrightnessOnroad-slider')
     assert.equal(section.params.find(p => p.key === 'ScreenBrightness').settings_tier, 'advanced')
@@ -69,9 +74,9 @@ createApp({components:{SettingTree},setup:()=>({values}),
     assert.equal(await offMode.count(), 0, 'screen controls stay hidden until Galaxy Developer Mode is enabled')
     await page.evaluate(()=>{window.values.GalaxyDeveloperMode=true})
     await offMode.waitFor()
-    assert.equal(await offMode.inputValue(),'auto')
-    assert.equal(await onMode.inputValue(),'auto')
-    assert.deepEqual(await offMode.locator('option').allTextContents(),['Auto','Manual'])
+    assert.equal(await modeValue(offModeSelect),'auto')
+    assert.equal(await modeValue(onModeSelect),'auto')
+    assert.deepEqual(await offModeSelect.locator('option').allTextContents(),['Auto','Manual'])
     assert.equal(await offSlider.getAttribute('min'),'-30')
     assert.equal(await offSlider.getAttribute('max'),'30')
     assert.equal(await offSlider.inputValue(),'0')
@@ -87,12 +92,12 @@ createApp({components:{SettingTree},setup:()=>({values}),
     assert.equal(await page.evaluate(()=>window.writes.length),0,'initial render cannot write settings')
     assert.equal(await page.getByText('101',{exact:true}).count(),0,'internal Auto sentinel cannot appear')
 
-    await offMode.selectOption('manual')
+    await setMode(offModeSelect,'manual')
     await page.waitForFunction(()=>window.values.ScreenBrightness===67)
     assert.equal(await offSlider.getAttribute('min'),'0')
     assert.equal(await offSlider.getAttribute('max'),'100')
     assert.equal(await offSlider.inputValue(),'67','mode change restores saved manual brightness')
-    await onMode.selectOption('manual')
+    await setMode(onModeSelect,'manual')
     await page.waitForFunction(()=>window.values.ScreenBrightnessOnroad===100)
     assert.equal(await onSlider.inputValue(),'100','missing manual memory defaults to 100')
     await onSlider.fill('45'); await onSlider.dispatchEvent('change')
@@ -102,7 +107,7 @@ createApp({components:{SettingTree},setup:()=>({values}),
     assert.equal(await onSlider.inputValue(),'100','manual Default restores 100%')
     await offSlider.fill('0'); await offSlider.dispatchEvent('change')
     await page.waitForFunction(()=>window.values.ScreenBrightnessManual===0)
-    await offMode.selectOption('auto')
+    await setMode(offModeSelect,'auto')
     await page.waitForFunction(()=>window.values.ScreenBrightness===101)
     await offSlider.fill('-30'); await offSlider.dispatchEvent('change')
     await page.waitForFunction(()=>window.values.ScreenBrightnessOffset===-30)
@@ -110,7 +115,7 @@ createApp({components:{SettingTree},setup:()=>({values}),
     await offSlider.fill('30'); await offSlider.dispatchEvent('change')
     await page.waitForFunction(()=>window.values.ScreenBrightnessOffset===30)
     assert.equal(await offSlider.getAttribute('aria-valuetext'),'+30%')
-    await offMode.selectOption('manual')
+    await setMode(offModeSelect,'manual')
     await page.waitForFunction(()=>window.values.ScreenBrightness===0)
     assert.equal(await offSlider.inputValue(),'0','manual zero survives Auto roundtrip')
     assert.equal(await onSlider.inputValue(),'100','onroad and offroad remain independent')
@@ -122,19 +127,19 @@ createApp({components:{SettingTree},setup:()=>({values}),
     await offSlider.dispatchEvent('change')
     await page.waitForFunction(()=>window.values.ScreenBrightnessManual===83)
     await page.evaluate(()=>{window.holdWrite=true})
-    await offMode.selectOption('auto')
+    await setMode(offModeSelect,'auto')
     await page.waitForFunction(()=>!!window.releaseWrite)
     assert.equal(await offMode.isDisabled(),true)
     await page.evaluate(()=>{window.values.ScreenBrightness=83})
-    assert.equal(await offMode.inputValue(),'auto','stale props cannot reverse pending mode change')
+    assert.equal(await modeValue(offModeSelect),'auto','stale props cannot reverse pending mode change')
     await page.evaluate(()=>{window.holdWrite=false;window.releaseWrite()})
     await page.waitForFunction(()=>!document.querySelector('#gx-ScreenBrightness-mode').disabled)
-    assert.equal(await offMode.inputValue(),'auto')
+    assert.equal(await modeValue(offModeSelect),'auto')
 
     await page.evaluate(()=>{window.failWrite=true})
-    await offMode.selectOption('manual')
+    await setMode(offModeSelect,'manual')
     await page.waitForFunction(()=>!document.querySelector('#gx-ScreenBrightness-mode').disabled)
-    assert.equal(await offMode.inputValue(),'auto','failed mode saves roll back')
+    assert.equal(await modeValue(offModeSelect),'auto','failed mode saves roll back')
     await offSlider.fill('24'); await offSlider.dispatchEvent('change')
     await page.waitForFunction(()=>!document.querySelector('#gx-ScreenBrightness-mode').disabled)
     assert.equal(await offSlider.inputValue(),'-10','failed offset saves roll back')

starpilot/system/the_galaxy/tests/test_ui_vue_frontend.py

@@ -28,6 +28,7 @@ def test_ui_app_shell_files_exist():
     "js/components/AppShell.js",
     "js/components/DevicePicker.js",
     "js/components/GalaxyModal.js",
+    "js/components/GalaxySheet.js",
     "js/components/GalaxySection.js",
     "js/components/GalaxyEmbed.js",
     "js/components/GalaxyToggleCard.js",
@@ -490,8 +491,8 @@ def test_ui_all_remaining_classic_tools_native_no_embed():
   sentry = _read("js/views/Sentry.js")
   assert "GalaxyEmbed" not in sentry and "fetch(" not in sentry
   assert "selectedImage" in sentry and "openImage" in sentry and "closeImage" in sentry
-  assert 'class="gx-scrim gx-scrim--image-viewer"' in sentry
-  assert 'aria-label="Close image"' in sentry
+  assert "GalaxySheet" in sentry
+  assert 'scrim-class="gx-scrim--image-viewer"' in sentry
   assert 'target="_blank"' not in sentry
 
   # Navigation maps + App Keys and Tuning lateral are native tabs now.