[feat](trx-frontend-http): wrap and layer main controls

Co-authored-by: OpenAI Codex <codex@openai.com>
Signed-off-by: Stan Grams <sjg@haxx.space>

src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html

@@ -116,6 +116,9 @@
           </div>
         </div>
       </div>
+      <div class="full-row controls-tray-shell">
+        <div class="controls-tray-scroll">
+          <div class="controls-tray">
             <div class="controls-row full-row">
               <div class="controls-col label-below-col">
                 <div class="label"><span>Mode</span></div>
@@ -192,7 +195,6 @@
                 <button id="tx-limit-btn" type="button">Set</button>
               </div>
             </div>
-    </div>
             <div class="full-row label-below-row" id="audio-row">
               <div class="label"><span>Audio</span></div>
               <div class="inline" style="gap: 0.6rem; flex-wrap: wrap; align-items: center;">
@@ -208,6 +210,9 @@
             </div>
           </div>
         </div>
+      </div>
+    </div>
+    </div>
     <div id="tab-plugins" class="tab-panel" style="display:none;">
       <div class="sub-tab-bar">
         <button class="sub-tab active" data-subtab="overview">Overview</button>

src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css

@@ -93,6 +93,30 @@ body {
   line-height: 1.2;
 }
 .status { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.1rem 1rem; }
+.controls-tray-shell {
+  min-width: 0;
+}
+.controls-tray-scroll {
+  width: 100%;
+  min-width: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding-bottom: 0.2rem;
+}
+.controls-tray {
+  display: grid;
+  gap: 0.95rem;
+  width: max(100%, 58rem);
+  min-width: 0;
+  padding: 0.95rem 1rem 1rem;
+  border: 1px solid color-mix(in srgb, var(--border-light) 85%, transparent);
+  border-radius: 1rem;
+  background:
+    linear-gradient(180deg,
+      color-mix(in srgb, var(--surface) 88%, transparent),
+      color-mix(in srgb, var(--btn-bg) 76%, transparent));
+  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 12%, transparent);
+}
 input.status-input, select.status-input { width: 100%; padding: 0.45rem 0.5rem; font-size: 1rem; border: 1px solid var(--border-light); border-radius: 6px; background: var(--input-bg); color: var(--text); }
 #mode { height: var(--control-height); }
 #freq { font-family: 'DSEG14 Classic', monospace; font-size: 2rem; padding: 0.5rem 0.6rem; letter-spacing: 0.05em; text-align: center; }
@@ -354,8 +378,10 @@ small { color: var(--text-muted); }
   grid-template-columns: auto minmax(0, 1fr) auto;
   align-items: center;
   column-gap: 1rem;
-  margin-bottom: 0.5rem;
+  margin-bottom: -0.45rem;
   padding: 0.25rem 0 0.15rem;
+  position: relative;
+  z-index: 2;
 }
 .header-text {
   width: auto;
@@ -365,7 +391,10 @@ small { color: var(--text-muted); }
 .title { font-size: 1.4rem; font-weight: 700; display: inline-flex; align-items: center; gap: 0.35rem; }
 .overview-strip {
   width: 100%;
-  margin: 0.35rem 0 0.95rem;
+  margin: 0 0 0.95rem;
+  padding-top: 0.8rem;
+  position: relative;
+  z-index: 1;
 }
 .overview-toolbar {
   display: flex;
@@ -677,6 +706,7 @@ button:focus-visible, input:focus-visible, select:focus-visible {
   .card { padding: 0.7rem 0.7rem 1rem; }
   button { min-height: 2.8rem; font-size: 0.95rem; }
   input.status-input, select.status-input { font-size: 1.1rem; }
+  .controls-tray { width: max(100%, 52rem); padding-left: 0.85rem; padding-right: 0.85rem; }
   .freq-inline { gap: 0.5rem; }
   .freq-inline { flex-wrap: wrap; }
   .header-text { width: auto; min-width: 0; flex: 0 1 auto; }