#174 MQTT screen mobile view

.gitignore

@@ -104,4 +104,9 @@ iOSInjectionProject/
 # user compose override
 compose.override.yml
 **/.DS_Store
-**/.vs
+**/.vs
+
+# AI tooling
+.playwright-mcp/
+.wolf/
+.claude/

angular-client/src/components/argos-button/argos-button.component.css

@@ -23,3 +23,11 @@
   transition-duration: 0.2s;
   background-color: #f04346b2;
 }
+
+@media (max-width: 768px) {
+  .btn {
+    padding: 6px 8px;
+    font-size: 13px;
+    min-height: 44px;
+  }
+}

angular-client/src/pages/graph-page/graph-caption/general-buttons/general-buttons.component.css

@@ -7,3 +7,31 @@
   height: 100%;
   margin: 0px 5px 0px 15px;
 }
+
+.general-buttons-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+@media (max-width: 768px) {
+  :host {
+    margin: 0;
+    width: 100%;
+  }
+
+  .general-buttons-row {
+    gap: 6px;
+    width: 100%;
+  }
+
+  :host ::ng-deep select-dropdown {
+    min-width: 130px;
+  }
+
+  :host ::ng-deep select-dropdown .p-select {
+    min-width: 130px;
+  }
+}

angular-client/src/pages/graph-page/graph-caption/general-buttons/general-buttons.component.html

@@ -1,4 +1,4 @@
-<hstack>
+<div class="general-buttons-row">
   <run-selector [selectRun]="onRunSelected()" />
   @if (historicalOn()) {
     <argos-button [onClick]="onSetRealTime()" label="Realtime" additionalStyles="border: 1.4px solid #000" />
@@ -13,4 +13,4 @@
     [placeholder]="selectorConfig().placeholder"
     [defaultValue]="selectorConfig().defaultValue"
   />
-</hstack>
+</div>

angular-client/src/pages/graph-page/graph-caption/general-buttons/general-buttons.component.ts

@@ -5,14 +5,13 @@ import { Run } from 'src/utils/types.utils';
 import { RunSelectorComponent } from '../run-selector/run-selector.component';
 import { ButtonComponent } from '../../../../components/argos-button/argos-button.component';
 import { SelectDropdownComponent } from '../../../../components/select-dropdown/select-dropdown.component';
-import HStackComponent from 'src/components/hstack/hstack.component';
 
 @Component({
   selector: 'general-buttons',
   templateUrl: './general-buttons.component.html',
   styleUrl: './general-buttons.component.css',
   standalone: true,
-  imports: [RunSelectorComponent, ButtonComponent, SelectDropdownComponent, HStackComponent]
+  imports: [RunSelectorComponent, ButtonComponent, SelectDropdownComponent]
 })
 export class GeneralButtonsComponent {
   historicalOn = input<boolean>(false);

angular-client/src/pages/graph-page/graph-page.component.css

@@ -7,6 +7,45 @@
   flex-flow: column;
 }
 
+/* Toolbar: replaces the old inline-styled hstack */
+.toolbar {
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+  align-self: flex-start;
+  width: 100%;
+}
+
+.toolbar-left {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+}
+
+.toolbar-group {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.config-group {
+  margin-left: 15px;
+}
+
+.input-label {
+  color: #fff;
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.toolbar-header {
+  margin-top: 5px;
+  margin-bottom: 0;
+  padding-right: 15px;
+  flex-shrink: 0;
+}
+
 .graph-header {
   flex: 0 1 auto;
 }
@@ -35,6 +74,10 @@
   display: none;
 }
 
+.mobile-value-strip {
+  display: none;
+}
+
 .graph {
   flex: 1 1 auto;
 }
@@ -63,7 +106,36 @@
   width: 100% !important;
 }
 
+/* ======================== Mobile ======================== */
 @media (max-width: 768px) {
+  .toolbar {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 6px;
+    padding: 4px 8px;
+  }
+
+  .toolbar-left {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 6px;
+  }
+
+  .toolbar-group {
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+
+  .config-group {
+    margin-left: 0;
+  }
+
+  .toolbar-header {
+    padding-right: 0;
+    text-align: center;
+    margin-top: 2px;
+  }
+
   .content-div {
     flex-flow: column;
   }
@@ -76,11 +148,32 @@
     display: block;
   }
 
+  .mobile-value-strip {
+    display: block;
+  }
+
   .right-container {
-    flex: 1 1 auto;
+    height: 50vh;
+    min-height: 250px;
+    padding-right: 8px;
+    padding-left: 8px;
   }
 
   .graph-caption {
     flex: 0 0 auto;
   }
+
+  ::ng-deep .time-range-input {
+    width: 70px !important;
+  }
+
+  ::ng-deep .y-axis-input {
+    width: 55px !important;
+  }
+
+  ::ng-deep .p-select-label,
+  ::ng-deep .p-select-label.p-placeholder {
+    width: auto !important;
+    min-width: 100px;
+  }
 }

angular-client/src/pages/graph-page/graph-page.component.html

@@ -9,36 +9,37 @@
     </div>
   } @else {
     <div class="container">
-      <hstack alignItems="start" justifyContent="space-between" style="align-self: flex-start; width: 100%" spacing="0px">
-        <hstack spacing="0px">
-          <argos-button
-            [onClick]="this.toggleSideBar"
-            label="Tog Sidebar"
-            additionalStyles="background-color: #0c2026; border: 1.4px solid #8fcadd; width: 80px;"
-          />
-          <argos-button
-            [onClick]="this.toggleMultiYaxis"
-            label="Tog Mult Yaxis"
-            additionalStyles="background-color: #0c2026; border: 1.4px solid #8fcadd; width: 80px;"
-          />
-          @if (realTime === true) {
+      <div class="toolbar">
+        <div class="toolbar-left">
+          <div class="toolbar-group">
             <argos-button
-              [onClick]="this.togglePause"
-              [label]="isPaused ? 'Play' : 'Pause'"
-              additionalStyles="background-color: #0c2026; border: 1.4px solid #8fcadd; width: 50px;"
+              [onClick]="this.toggleSideBar"
+              label="Tog Sidebar"
+              additionalStyles="background-color: #0c2026; border: 1.4px solid #8fcadd; width: 80px;"
             />
-          }
+            <argos-button
+              [onClick]="this.toggleMultiYaxis"
+              label="Tog Mult Yaxis"
+              additionalStyles="background-color: #0c2026; border: 1.4px solid #8fcadd; width: 80px;"
+            />
+            @if (realTime === true) {
+              <argos-button
+                [onClick]="this.togglePause"
+                [label]="isPaused ? 'Play' : 'Pause'"
+                additionalStyles="background-color: #0c2026; border: 1.4px solid #8fcadd; width: 50px;"
+              />
+            }
+          </div>
 
           <!-- Graph Configuration Inputs -->
-          <div style="display: flex; align-items: center; gap: 5px; margin-left: 15px">
-            @if (this.realTime === true) {
+          @if (this.realTime === true) {
+            <div class="toolbar-group config-group">
               <argos-button
                 [onClick]="this.toggleRangeMode"
                 [label]="rangeMode === 'time' ? 'Time Range' : 'Point Range'"
                 additionalStyles="background-color: #0c2026; border: 1.4px solid #8fcadd; width: 90px; font-size: 11px;"
               />
-
-              <label style="color: #fff; font-size: 12px">{{ rangeMode === 'time' ? 'X (sec):' : 'X (points):' }}</label>
+              <label class="input-label">{{ rangeMode === 'time' ? 'X (sec):' : 'X (points):' }}</label>
               <p-inputNumber
                 [(ngModel)]="rangeValue"
                 mode="decimal"
@@ -49,9 +50,11 @@
                 [placeholder]="rangeMode === 'time' ? '30' : 'Auto'"
                 (onInput)="onGraphConfigChange()"
               ></p-inputNumber>
-            }
+            </div>
+          }
 
-            <label style="color: #fff; font-size: 12px">Y Min:</label>
+          <div class="toolbar-group config-group">
+            <label class="input-label">Y Min:</label>
             <p-inputNumber
               [(ngModel)]="yAxisMin"
               styleClass="y-axis-input"
@@ -60,7 +63,7 @@
               (onInput)="onGraphConfigChange()"
             ></p-inputNumber>
 
-            <label style="color: #fff; font-size: 12px">Y Max:</label>
+            <label class="input-label">Y Max:</label>
             <p-inputNumber
               [(ngModel)]="yAxisMax"
               styleClass="y-axis-input"
@@ -70,34 +73,30 @@
             ></p-inputNumber>
           </div>
 
-          @if (onFaultPage) {
-            <fault-buttons [onClearData]="clearDataType" />
-          } @else {
-            <general-buttons
-              [onRunSelected]="onRunSelected"
-              [onClearDataType]="clearDataType"
-              [onSetRealTime]="onSetRealtime"
-              [historicalOn]="this.run !== undefined || this.minutesToQuery !== undefined"
-              [selectorConfig]="this.queryMinutesConfig"
-            />
-          }
-        </hstack>
+          <div class="toolbar-group">
+            @if (onFaultPage) {
+              <fault-buttons [onClearData]="clearDataType" />
+            } @else {
+              <general-buttons
+                [onRunSelected]="onRunSelected"
+                [onClearDataType]="clearDataType"
+                [onSetRealTime]="onSetRealtime"
+                [historicalOn]="this.run !== undefined || this.minutesToQuery !== undefined"
+                [selectorConfig]="this.queryMinutesConfig"
+              />
+            }
+          </div>
+        </div>
+
+        <typography variant="large-header" class="toolbar-header" [content]="this.rightHeader" />
+      </div>
 
-        <typography
-          variant="large-header"
-          additionalStyles="margin-top: 5px; margin-bottom: 0px; padding-right: 15px;"
-          [content]="this.rightHeader"
-        />
-      </hstack>
+      @if (selectedDataTypes.length > 0) {
+        <live-value-strip [dataTypes]="selectedDataTypes" class="mobile-value-strip" />
+      }
 
       <div class="content-div">
         @if (this.showSideBar) {
-          <!-- <graph-sidebar
-            [dataTypes]="dataTypes"
-            [selectDataTypes]="this.setSelectedDataTypes"
-            [currentSelectedDataTypes]="this.selectedDataTypes"
-            class="desktop-sidebar"
-          /> -->
           <graph-sidebar [dataTypes]="dataTypes" class="desktop-sidebar" />
         }
         <div class="right-container">
@@ -112,12 +111,6 @@
             [graphConfig]="this.graphConfig"
           />
         </div>
-        <!-- <graph-sidebar
-          [dataTypes]="dataTypes!"
-          [selectDataTypes]="this.setSelectedDataTypes"
-          [currentSelectedDataTypes]="this.selectedDataTypes"
-          class="mobile-sidebar"
-        /> -->
         <graph-sidebar [dataTypes]="dataTypes!" class="mobile-sidebar" />
       </div>
     </div>