General UI Refinements (#1678)

Does the following: - Adjusts the shade of red buttons and banners to increase readability and reduce eye strain ![image](https://github.com/user-attachments/assets/7f741a9e-dc1e-4394-b87d-580e189245b1) ![image](https://github.com/user-attachments/assets/b23202f1-4cf6-46c1-aca5-2455a09259cd) - Cleans up factory reset and camera deletion modals ![image](https://github.com/user-attachments/assets/e6564732-d578-43da-bc83-729ec6fdbc5e) ![image](https://github.com/user-attachments/assets/9c5a1cba-f4fd-47ea-811c-abbabe5fa3a4) - Removes matchCamerasOnlyByPath as it is no longer used and throws errors in the console ![image](https://github.com/user-attachments/assets/77043993-26a2-4de4-8e98-702e7f285dc6) - Limits the criteria to flag a camera mismatch in Camera Matching to only what is necessary based on camera type and highlights differences in table properties (testing on this is appreciated) ![image](https://github.com/user-attachments/assets/cfbd96c1-09dd-414a-8177-693fc054b26f) - Only displays both saved vs. current info in camera matching if there is a difference between the two ![image](https://github.com/user-attachments/assets/6223ffc8-4cff-464f-8b54-720c3222a5d5) - Some general code cleanup (reduced unnecessary padding/margin/row-col statements, style="display:flex;" -> class="d-flex", etc. - Moves Compact Mode button to the bottom away from all the menu items (cleaner imo, open to thoughts) - Establishes a general spacing format for cards and pages and applies this to existing cards and pages to create a consistent look and feel to the UI (e.g. keeping things in line and less erratic spacing/placement of UI elements) ![image](https://github.com/user-attachments/assets/1ab0ca4b-303e-436d-97b3-da72d46c4fcb) ![image](https://github.com/user-attachments/assets/82ba9e53-f854-4309-bc00-7b5d0bad58b7) ![image](https://github.com/user-attachments/assets/18aa6ca4-e6fa-4125-8a0a-e6a007a0337d) ![image](https://github.com/user-attachments/assets/77043993-26a2-4de4-8e98-702e7f285dc6) - Delete protection for camera matching modules - Anti-backend-spam for activate/deactivate/delete modules to hopefully prevent any odd behavior from button spamming - Enforces a common camera stream size on camera matching view (NEEDS MORE TESTING) ![image](https://github.com/user-attachments/assets/9032783d-1edf-4c6e-ba7b-00e5f20280df) https://private-user-images.githubusercontent.com/29715865/400783758-dc99c151-b8a7-4367-a173-74c2fc5b2666.mp4?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzYyNTc3NzEsIm5iZiI6MTczNjI1NzQ3MSwicGF0aCI6Ii8yOTcxNTg2NS80MDA3ODM3NTgtZGM5OWMxNTEtYjhhNy00MzY3LWExNzMtNzRjMmZjNWIyNjY2Lm1wND9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAxMDclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMTA3VDEzNDQzMVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWMwOWM1MDc2ZTVlOWZhM2MxYjAwZjAyZTc2MTYyZTk1ZTVmOGFhZmVkMzlmODRlZTk1ODVlOTk2ZGQzZmM0Y2EmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.ovtRnObwbkEfljr9d5fqaory0nH91LWJSSkmrUUe_4Y
2026-06-27 02:01:40 +00:00 · 2025-01-07 08:45:39 -05:00
parent fa2034d30b
commit 484e8d4298
34 changed files with 1098 additions and 965 deletions
--- a/photon-client/src/components/dashboard/CameraAndPipelineSelectCard.vue
+++ b/photon-client/src/components/dashboard/CameraAndPipelineSelectCard.vue
@@ -242,7 +242,7 @@ const wrappedCameras = computed<SelectItem[]>(() =>

 <template>
  <v-card color="primary">
-    <v-row style="padding: 12px 12px 0 24px">
+    <v-row style="padding: 20px 12px 0 30px">
      <v-col cols="10" class="pa-0">
        <pv-select
          v-if="!isCameraNameEdit"
@@ -281,7 +281,7 @@ const wrappedCameras = computed<SelectItem[]>(() =>
        />
      </v-col>
    </v-row>
-    <v-row style="padding: 0 12px 0 24px">
+    <v-row style="padding: 0 12px 0 30px">
      <v-col cols="10" class="pa-0">
        <pv-select
          v-if="!isPipelineNameEdit"
@@ -353,7 +353,7 @@ const wrappedCameras = computed<SelectItem[]>(() =>
        />
      </v-col>
    </v-row>
-    <v-row style="padding: 0 12px 12px 24px">
+    <v-row style="padding: 0 12px 24px 30px">
      <v-col cols="10" class="pa-0">
        <pv-select
          v-model="currentPipelineType"
@@ -392,7 +392,12 @@ const wrappedCameras = computed<SelectItem[]>(() =>
        <v-divider />
        <v-card-actions>
          <v-spacer />
-          <v-btn color="#ffd843" :disabled="checkPipelineName(newPipelineName) !== true" @click="createNewPipeline">
+          <v-btn
+            color="#ffd843"
+            class="black--text"
+            :disabled="checkPipelineName(newPipelineName) !== true"
+            @click="createNewPipeline"
+          >
            Save
          </v-btn>
          <v-btn color="error" @click="cancelPipelineCreation"> Cancel </v-btn>
@@ -413,7 +418,9 @@ const wrappedCameras = computed<SelectItem[]>(() =>
        <v-card-actions>
          <v-spacer />
          <v-btn color="error" @click="confirmDeleteCurrentPipeline"> Yes, I'm sure </v-btn>
-          <v-btn color="#ffd843" @click="showPipelineDeletionConfirmationDialog = false"> No, take me back </v-btn>
+          <v-btn color="#ffd843" class="black--text" @click="showPipelineDeletionConfirmationDialog = false">
+            No, take me back
+          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
@@ -429,7 +436,7 @@ const wrappedCameras = computed<SelectItem[]>(() =>
        <v-card-actions>
          <v-spacer />
          <v-btn color="error" @click="confirmChangePipelineType"> Yes, I'm sure </v-btn>
-          <v-btn color="#ffd843" @click="cancelChangePipelineType"> No, take me back </v-btn>
+          <v-btn color="#ffd843" class="black--text" @click="cancelChangePipelineType"> No, take me back </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
--- a/photon-client/src/components/dashboard/CamerasCard.vue
+++ b/photon-client/src/components/dashboard/CamerasCard.vue
@@ -42,49 +42,33 @@ const performanceRecommendation = computed<string>(() => {
 </script>

 <template>
-  <v-card color="primary" height="100%" style="display: flex; flex-direction: column" dark>
-    <v-row>
-      <v-col class="align-self-center text-no-wrap">
-        <v-card-title>Cameras</v-card-title>
-      </v-col>
-      <v-col class="align-self-center" style="text-align: right; margin-right: 12px; padding-left: 24px">
-        <v-chip
-          v-if="useCameraSettingsStore().currentCameraSettings.isConnected"
-          label
-          :color="fpsTooLow ? 'error' : 'transparent'"
-          :text-color="fpsTooLow ? '#C7EA46' : '#ff4d00'"
-          style="font-size: 1rem; padding: 0; margin: 0"
-        >
-          <span class="pr-1"
-            >Processing @ {{ Math.round(useStateStore().currentPipelineResults?.fps || 0) }}&nbsp;FPS &ndash;</span
-          ><span>{{ performanceRecommendation }}</span>
-        </v-chip>
-        <v-chip v-else label color="transparent" text-color="red" style="font-size: 1rem; padding: 0; margin: 0">
-          <span class="pr-1"> Camera not connected </span>
-        </v-chip>
-      </v-col>
-      <v-col
-        class="align-self-center"
-        style="
-          width: min-content;
-          flex-grow: 0;
-          display: flex;
-          justify-content: flex-end;
-          margin-right: 24px;
-          padding: 0;
-        "
+  <v-card color="primary" height="100%" class="d-flex flex-column" dark>
+    <v-card-title class="justify-space-between align-center pt-3 pb-3">
+      <span>Cameras</span>
+      <v-chip
+        v-if="useCameraSettingsStore().currentCameraSettings.isConnected"
+        label
+        :color="fpsTooLow ? 'error' : 'transparent'"
+        :text-color="fpsTooLow ? '#C7EA46' : '#ff4d00'"
+        style="font-size: 1rem; padding: 0; margin: 0"
      >
-        <v-switch
-          v-model="driverMode"
-          :disabled="useCameraSettingsStore().isCalibrationMode || useCameraSettingsStore().pipelineNames.length === 0"
-          label="Driver Mode"
-          style="margin: 0; padding: 0; padding-left: 18px; margin-top: 14px"
-          color="accent"
-        />
-      </v-col>
-    </v-row>
-    <v-divider style="border-color: white" />
-    <v-row class="stream-viewer-container pa-3">
+        <span class="pr-1"
+          >Processing @ {{ Math.round(useStateStore().currentPipelineResults?.fps || 0) }}&nbsp;FPS &ndash;</span
+        ><span>{{ performanceRecommendation }}</span>
+      </v-chip>
+      <v-chip v-else label color="transparent" text-color="red" style="font-size: 1rem; padding: 0; margin: 0">
+        <span class="pr-1"> Camera not connected </span>
+      </v-chip>
+      <v-switch
+        v-model="driverMode"
+        :disabled="useCameraSettingsStore().isCalibrationMode || useCameraSettingsStore().pipelineNames.length === 0"
+        label="Driver Mode"
+        color="accent"
+        hide-details="auto"
+      />
+    </v-card-title>
+    <v-divider class="ml-3 mr-3" />
+    <v-row class="stream-viewer-container pa-3 align-center">
      <v-col v-if="value.includes(0)" class="stream-view">
        <photon-camera-stream
          id="input-camera-stream"
--- a/photon-client/src/components/dashboard/ConfigOptions.vue
+++ b/photon-client/src/components/dashboard/ConfigOptions.vue
@@ -146,7 +146,7 @@ onBeforeUpdate(() => {
 <template>
  <v-row no-gutters class="tabGroups">
    <template v-if="!useCameraSettingsStore().hasConnected">
-      <v-col v-if="!useCameraSettingsStore().hasConnected" cols="12">
+      <v-col cols="12">
        <v-card color="error">
          <v-card-title class="white--text">
            Camera has not connected. Please check your connection and try again.
@@ -173,7 +173,7 @@ onBeforeUpdate(() => {
              {{ tabConfig.tabName }}
            </v-tab>
          </v-tabs>
-          <div class="pl-4 pr-4 pt-4 pb-2">
+          <div class="pl-2 pr-2 pt-3 pb-3">
            <KeepAlive>
              <Component :is="tabGroupData[selectedTabs[tabGroupIndex]].component" />
            </KeepAlive>
--- a/photon-client/src/components/dashboard/StreamConfigCard.vue
+++ b/photon-client/src/components/dashboard/StreamConfigCard.vue
@@ -34,8 +34,8 @@ const processingMode = computed<number>({
    color="primary"
    style="height: 100%; display: flex; flex-direction: column"
  >
-    <v-row align="center" class="pa-3 pb-0">
-      <v-col>
+    <v-row class="pa-3 pb-0 align-center">
+      <v-col class="pa-4">
        <p style="color: white">Processing Mode</p>
        <v-btn-toggle v-model="processingMode" mandatory dark class="fill">
          <v-btn color="secondary" :disabled="!useCameraSettingsStore().hasConnected">
@@ -54,8 +54,8 @@ const processingMode = computed<number>({
        </v-btn-toggle>
      </v-col>
    </v-row>
-    <v-row align="center" class="pa-3 pt-0">
-      <v-col>
+    <v-row class="pa-3 pt-0 align-center">
+      <v-col class="pa-4 pt-0">
        <p style="color: white">Stream Display</p>
        <v-btn-toggle v-model="localValue" :multiple="true" mandatory dark class="fill">
          <v-btn color="secondary" class="fill">
--- a/photon-client/src/components/dashboard/tabs/AprilTagTab.vue
+++ b/photon-client/src/components/dashboard/tabs/AprilTagTab.vue
@@ -17,8 +17,8 @@ const currentPipelineSettings = computed<ActivePipelineSettings>(
 const interactiveCols = computed(() =>
  (getCurrentInstance()?.proxy.$vuetify.breakpoint.mdAndDown || false) &&
  (!useStateStore().sidebarFolded || useCameraSettingsStore().isDriverMode)
-    ? 9
-    : 8
+    ? 8
+    : 7
 );
 </script>

@@ -33,7 +33,6 @@ const interactiveCols = computed(() =>
    />
    <pv-slider
      v-model="currentPipelineSettings.decimate"
-      class="pt-2"
      :slider-cols="interactiveCols"
      label="Decimate"
      tooltip="Increases FPS at the expense of range by reducing image resolution initially"
@@ -43,7 +42,6 @@ const interactiveCols = computed(() =>
    />
    <pv-slider
      v-model="currentPipelineSettings.blur"
-      class="pt-2"
      :slider-cols="interactiveCols"
      label="Blur"
      tooltip="Gaussian blur added to the image, high FPS cost for slightly decreased noise"
@@ -54,7 +52,6 @@ const interactiveCols = computed(() =>
    />
    <pv-slider
      v-model="currentPipelineSettings.threads"
-      class="pt-2"
      :slider-cols="interactiveCols"
      label="Threads"
      tooltip="Number of threads spawned by the AprilTag detector"
@@ -62,16 +59,8 @@ const interactiveCols = computed(() =>
      :max="8"
      @input="(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ threads: value }, false)"
    />
-    <pv-switch
-      v-model="currentPipelineSettings.refineEdges"
-      class="pt-2"
-      label="Refine Edges"
-      tooltip="Further refines the AprilTag corner position initial estimate, suggested left on"
-      @input="(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ refineEdges: value }, false)"
-    />
    <pv-slider
      v-model="currentPipelineSettings.decisionMargin"
-      class="pt-2 pb-4"
      :slider-cols="interactiveCols"
      label="Decision Margin Cutoff"
      tooltip="Tags with a 'margin' (decoding quality score) less than this wil be rejected. Increase this to reduce the number of false positive detections"
@@ -81,7 +70,6 @@ const interactiveCols = computed(() =>
    />
    <pv-slider
      v-model="currentPipelineSettings.numIterations"
-      class="pt-2 pb-4"
      :slider-cols="interactiveCols"
      label="Pose Estimation Iterations"
      tooltip="Number of iterations the pose estimation algorithm will run, 50-100 is a good starting point"
@@ -89,5 +77,12 @@ const interactiveCols = computed(() =>
      :max="500"
      @input="(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ numIterations: value }, false)"
    />
+    <pv-switch
+      v-model="currentPipelineSettings.refineEdges"
+      :switch-cols="interactiveCols"
+      label="Refine Edges"
+      tooltip="Further refines the AprilTag corner position initial estimate, suggested left on"
+      @input="(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ refineEdges: value }, false)"
+    />
  </div>
 </template>
--- a/photon-client/src/components/dashboard/tabs/ArucoTab.vue
+++ b/photon-client/src/components/dashboard/tabs/ArucoTab.vue
@@ -17,8 +17,8 @@ const currentPipelineSettings = computed<ActivePipelineSettings>(
 const interactiveCols = computed(() =>
  (getCurrentInstance()?.proxy.$vuetify.breakpoint.mdAndDown || false) &&
  (!useStateStore().sidebarFolded || useCameraSettingsStore().isDriverMode)
-    ? 9
-    : 8
+    ? 8
+    : 7
 );
 </script>

@@ -31,14 +31,6 @@ const interactiveCols = computed(() =>
      :select-cols="interactiveCols"
      @input="(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ tagFamily: value }, false)"
    />
-    <pv-switch
-      v-model="currentPipelineSettings.useCornerRefinement"
-      class="pt-2"
-      label="Refine Corners"
-      tooltip="Further refine the initial corners with subpixel accuracy."
-      :switch-cols="interactiveCols"
-      @input="(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ useCornerRefinement: value }, false)"
-    />
    <pv-range-slider
      v-model="currentPipelineSettings.threshWinSizes"
      label="Thresh Min/Max Size"
@@ -51,7 +43,6 @@ const interactiveCols = computed(() =>
    />
    <pv-slider
      v-model="currentPipelineSettings.threshStepSize"
-      class="pt-2"
      :slider-cols="interactiveCols"
      label="Thresh Step Size"
      tooltip="Smaller values will cause more steps between the min/max sizes. More, varied steps can improve detection robustness to lighting, but may decrease performance."
@@ -62,7 +53,6 @@ const interactiveCols = computed(() =>
    />
    <pv-slider
      v-model="currentPipelineSettings.threshConstant"
-      class="pt-2"
      :slider-cols="interactiveCols"
      label="Thresh Constant"
      tooltip="Affects the threshold window mean value cutoff for all steps. Higher values can improve performance, but may harm detection rate."
@@ -71,9 +61,15 @@ const interactiveCols = computed(() =>
      :step="1"
      @input="(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ threshConstant: value }, false)"
    />
+    <pv-switch
+      v-model="currentPipelineSettings.useCornerRefinement"
+      label="Refine Corners"
+      tooltip="Further refine the initial corners with subpixel accuracy."
+      :switch-cols="interactiveCols"
+      @input="(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ useCornerRefinement: value }, false)"
+    />
    <pv-switch
      v-model="currentPipelineSettings.debugThreshold"
-      class="pt-2"
      label="Debug Threshold"
      tooltip="Display the first threshold step to the color stream."
      :switch-cols="interactiveCols"
--- a/photon-client/src/components/dashboard/tabs/ContoursTab.vue
+++ b/photon-client/src/components/dashboard/tabs/ContoursTab.vue
@@ -52,13 +52,23 @@ const contourRadius = computed<[number, number]>({
 const interactiveCols = computed(() =>
  (getCurrentInstance()?.proxy.$vuetify.breakpoint.mdAndDown || false) &&
  (!useStateStore().sidebarFolded || useCameraSettingsStore().isDriverMode)
-    ? 9
-    : 8
+    ? 8
+    : 7
 );
 </script>

 <template>
  <div>
+    <pv-select
+      v-model="useCameraSettingsStore().currentPipelineSettings.contourTargetOrientation"
+      label="Target Orientation"
+      tooltip="Used to determine how to calculate target landmarks, as well as aspect ratio"
+      :items="['Portrait', 'Landscape']"
+      :select-cols="interactiveCols"
+      @input="
+        (value) => useCameraSettingsStore().changeCurrentPipelineSetting({ contourTargetOrientation: value }, false)
+      "
+    />
    <pv-range-slider
      v-model="contourArea"
      label="Area"
@@ -79,16 +89,6 @@ const interactiveCols = computed(() =>
      :step="0.1"
      @input="(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ contourRatio: value }, false)"
    />
-    <pv-select
-      v-model="useCameraSettingsStore().currentPipelineSettings.contourTargetOrientation"
-      label="Target Orientation"
-      tooltip="Used to determine how to calculate target landmarks, as well as aspect ratio"
-      :items="['Portrait', 'Landscape']"
-      :select-cols="interactiveCols"
-      @input="
-        (value) => useCameraSettingsStore().changeCurrentPipelineSetting({ contourTargetOrientation: value }, false)
-      "
-    />
    <pv-range-slider
      v-if="useCameraSettingsStore().currentPipelineType === PipelineType.ColoredShape"
      v-model="contourFullness"
@@ -160,7 +160,6 @@ const interactiveCols = computed(() =>
      />
    </template>
    <template v-else-if="currentPipelineSettings.pipelineType === PipelineType.ColoredShape">
-      <v-divider class="mt-3" />
      <pv-select
        v-model="currentPipelineSettings.contourShape"
        label="Target Shape"
@@ -191,15 +190,6 @@ const interactiveCols = computed(() =>
          (value) => useCameraSettingsStore().changeCurrentPipelineSetting({ circleDetectThreshold: value }, false)
        "
      />
-      <pv-range-slider
-        v-model="contourRadius"
-        :disabled="currentPipelineSettings.contourShape !== 0"
-        label="Radius"
-        :min="0"
-        :max="100"
-        :slider-cols="interactiveCols"
-        @input="(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ contourRadius: value }, false)"
-      />
      <pv-slider
        v-model="currentPipelineSettings.maxCannyThresh"
        :disabled="currentPipelineSettings.contourShape !== 0"
@@ -218,7 +208,15 @@ const interactiveCols = computed(() =>
        :slider-cols="interactiveCols"
        @input="(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ circleAccuracy: value }, false)"
      />
-      <v-divider class="mt-3" />
+      <pv-range-slider
+        v-model="contourRadius"
+        :disabled="currentPipelineSettings.contourShape !== 0"
+        label="Radius"
+        :min="0"
+        :max="100"
+        :slider-cols="interactiveCols"
+        @input="(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ contourRadius: value }, false)"
+      />
    </template>
    <pv-select
      v-model="useCameraSettingsStore().currentPipelineSettings.contourSortMode"
--- a/photon-client/src/components/dashboard/tabs/InputTab.vue
+++ b/photon-client/src/components/dashboard/tabs/InputTab.vue
@@ -66,13 +66,21 @@ const handleStreamResolutionChange = (value: number) => {
 const interactiveCols = computed(() =>
  (getCurrentInstance()?.proxy.$vuetify.breakpoint.mdAndDown || false) &&
  (!useStateStore().sidebarFolded || useCameraSettingsStore().isDriverMode)
-    ? 9
-    : 8
+    ? 8
+    : 7
 );
 </script>

 <template>
  <div>
+    <pv-switch
+      v-model="useCameraSettingsStore().currentPipelineSettings.cameraAutoExposure"
+      class="pt-2"
+      label="Auto Exposure"
+      :switch-cols="interactiveCols === 8 ? 9 : interactiveCols"
+      tooltip="Enables or Disables camera automatic adjustment for current lighting conditions"
+      @input="(args) => useCameraSettingsStore().changeCurrentPipelineSetting({ cameraAutoExposure: args }, false)"
+    />
    <pv-slider
      v-model="useCameraSettingsStore().currentPipelineSettings.cameraExposureRaw"
      :disabled="useCameraSettingsStore().currentCameraSettings.pipelineSettings.cameraAutoExposure"
@@ -92,14 +100,6 @@ const interactiveCols = computed(() =>
      :slider-cols="interactiveCols"
      @input="(args) => useCameraSettingsStore().changeCurrentPipelineSetting({ cameraBrightness: args }, false)"
    />
-    <pv-switch
-      v-model="useCameraSettingsStore().currentPipelineSettings.cameraAutoExposure"
-      class="pt-2"
-      label="Auto Exposure"
-      :switch-cols="interactiveCols"
-      tooltip="Enables or Disables camera automatic adjustment for current lighting conditions"
-      @input="(args) => useCameraSettingsStore().changeCurrentPipelineSetting({ cameraAutoExposure: args }, false)"
-    />
    <pv-slider
      v-if="useCameraSettingsStore().currentPipelineSettings.cameraGain >= 0"
      v-model="useCameraSettingsStore().currentPipelineSettings.cameraGain"
@@ -130,12 +130,11 @@ const interactiveCols = computed(() =>
      tooltip="Controls blue automatic white balance gain, which affects how the camera captures colors in different conditions"
      @input="(args) => useCameraSettingsStore().changeCurrentPipelineSetting({ cameraBlueGain: args }, false)"
    />
-
    <pv-switch
      v-model="useCameraSettingsStore().currentPipelineSettings.cameraAutoWhiteBalance"
      class="pt-2"
      label="Auto White Balance"
-      :switch-cols="interactiveCols"
+      :switch-cols="interactiveCols === 8 ? 9 : interactiveCols"
      tooltip="Enables or Disables camera automatic adjustment for current lighting conditions"
      @input="(args) => useCameraSettingsStore().changeCurrentPipelineSetting({ cameraAutoWhiteBalance: args }, false)"
    />
@@ -148,13 +147,12 @@ const interactiveCols = computed(() =>
      :slider-cols="interactiveCols"
      @input="(args) => useCameraSettingsStore().changeCurrentPipelineSetting({ cameraWhiteBalanceTemp: args }, false)"
    />
-
    <pv-select
      v-model="useCameraSettingsStore().currentPipelineSettings.inputImageRotationMode"
      label="Orientation"
      tooltip="Rotates the camera stream. Rotation not available when camera has been calibrated."
      :items="cameraRotations"
-      :select-cols="interactiveCols"
+      :select-cols="interactiveCols === 8 ? 9 : interactiveCols"
      @input="(args) => useCameraSettingsStore().changeCurrentPipelineSetting({ inputImageRotationMode: args }, false)"
    />
    <pv-select
@@ -162,7 +160,7 @@ const interactiveCols = computed(() =>
      label="Resolution"
      tooltip="Resolution and FPS the camera should directly capture at"
      :items="cameraResolutions"
-      :select-cols="interactiveCols"
+      :select-cols="interactiveCols === 8 ? 9 : interactiveCols"
      @input="(args) => handleResolutionChange(args)"
    />
    <pv-select
@@ -170,7 +168,7 @@ const interactiveCols = computed(() =>
      label="Stream Resolution"
      tooltip="Resolution to which camera frames are downscaled for streaming to the dashboard"
      :items="streamResolutions"
-      :select-cols="interactiveCols"
+      :select-cols="interactiveCols === 8 ? 9 : interactiveCols"
      @input="(args) => handleStreamResolutionChange(args)"
    />
  </div>
--- a/photon-client/src/components/dashboard/tabs/OutputTab.vue
+++ b/photon-client/src/components/dashboard/tabs/OutputTab.vue
@@ -49,8 +49,8 @@ const currentPipelineSettings = computed<ActivePipelineSettings>(
 const interactiveCols = computed(() =>
  (getCurrentInstance()?.proxy.$vuetify.breakpoint.mdAndDown || false) &&
  (!useStateStore().sidebarFolded || useCameraSettingsStore().isDriverMode)
-    ? 9
-    : 8
+    ? 8
+    : 7
 );
 </script>

@@ -115,7 +115,6 @@ const interactiveCols = computed(() =>
      :disabled="!isTagPipeline || !currentPipelineSettings.doMultiTarget"
      @input="(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ doSingleTargetAlways: value }, false)"
    />
-    <v-divider />
    <table
      v-if="useCameraSettingsStore().currentPipelineSettings.offsetRobotOffsetMode !== RobotOffsetPointMode.None"
      class="metrics-table mt-3 mb-3"
--- a/photon-client/src/components/dashboard/tabs/ThresholdTab.vue
+++ b/photon-client/src/components/dashboard/tabs/ThresholdTab.vue
@@ -175,40 +175,47 @@ const interactiveCols = computed(() =>
      tooltip="Selects the hue range outside of the hue slider bounds instead of inside"
      @input="(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ hueInverted: value }, false)"
    />
-    <v-divider class="mt-3" />
    <div>
-      <div class="pt-3 white--text">Color Picker</div>
-      <v-row justify="center" class="mt-3 mb-3">
+      <div class="white--text pt-3">Color Picker</div>
+      <div class="d-flex pt-3">
        <template v-if="!useStateStore().colorPickingMode">
-          <v-btn
-            color="accent"
-            class="ma-2 black--text"
-            small
-            @click="enableColorPicking(useCameraSettingsStore().currentPipelineSettings.hueInverted ? 2 : 3)"
-          >
-            <v-icon left> mdi-minus </v-icon>
-            Shrink Range
-          </v-btn>
-          <v-btn color="accent" class="ma-2 black--text" small @click="enableColorPicking(1)">
-            <v-icon left> mdi-plus-minus </v-icon>
-            {{ useCameraSettingsStore().currentPipelineSettings.hueInverted ? "Exclude" : "Set to" }} Average
-          </v-btn>
-          <v-btn
-            color="accent"
-            class="ma-2 black--text"
-            small
-            @click="enableColorPicking(useCameraSettingsStore().currentPipelineSettings.hueInverted ? 3 : 2)"
-          >
-            <v-icon left> mdi-plus </v-icon>
-            Expand Range
-          </v-btn>
+          <v-col cols="4" class="pl-0 pr-2">
+            <v-btn
+              small
+              block
+              color="accent"
+              class="black--text"
+              @click="enableColorPicking(useCameraSettingsStore().currentPipelineSettings.hueInverted ? 2 : 3)"
+            >
+              <v-icon left> mdi-minus </v-icon>
+              Shrink Range
+            </v-btn>
+          </v-col>
+          <v-col cols="4" class="pl-0 pr-0">
+            <v-btn color="accent" class="black--text" small block @click="enableColorPicking(1)">
+              <v-icon left> mdi-plus-minus </v-icon>
+              {{ useCameraSettingsStore().currentPipelineSettings.hueInverted ? "Exclude" : "Set to" }} Average
+            </v-btn>
+          </v-col>
+          <v-col cols="4" class="pl-2 pr-0">
+            <v-btn
+              small
+              block
+              color="accent"
+              class="black--text"
+              @click="enableColorPicking(useCameraSettingsStore().currentPipelineSettings.hueInverted ? 3 : 2)"
+            >
+              <v-icon left> mdi-plus </v-icon>
+              Expand Range
+            </v-btn>
+          </v-col>
        </template>
        <template v-else>
          <v-btn color="accent" class="ma-2 black--text" style="width: 30%" small @click="disableColorPicking">
            Cancel
          </v-btn>
        </template>
-      </v-row>
+      </div>
    </div>
  </div>
 </template>