From b80cc7c00b39e1bb8a3a945d86309443829efe3b Mon Sep 17 00:00:00 2001
From: Sriman Achanta <68172138+srimanachanta@users.noreply.github.com>
Date: Sat, 15 Jul 2023 14:18:58 -0400
Subject: [PATCH] Change interactive input components cols based on media
 queries

---
 .../PipelineConfigTabs/AprilTagTab.vue        | 16 +++++----
 .../dashboard/PipelineConfigTabs/ArucoTab.vue | 10 ++++--
 .../PipelineConfigTabs/ContoursTab.vue        | 34 ++++++++++++-------
 .../dashboard/PipelineConfigTabs/InputTab.vue | 23 +++++++------
 .../PipelineConfigTabs/OutputTab.vue          | 13 ++++---
 .../dashboard/PipelineConfigTabs/PnPTab.vue   |  8 +++--
 .../PipelineConfigTabs/ThresholdTab.vue       |  9 ++++-
 7 files changed, 73 insertions(+), 40 deletions(-)

diff --git a/photon-client/src/components/dashboard/PipelineConfigTabs/AprilTagTab.vue b/photon-client/src/components/dashboard/PipelineConfigTabs/AprilTagTab.vue
index 8fd513f9aa..322d9e2d45 100644
--- a/photon-client/src/components/dashboard/PipelineConfigTabs/AprilTagTab.vue
+++ b/photon-client/src/components/dashboard/PipelineConfigTabs/AprilTagTab.vue
@@ -4,10 +4,14 @@ import { PipelineType } from "@/types/PipelineTypes";
 import CvSelect from "@/components/common/cv-select.vue";
 import CvSlider from "@/components/common/cv-slider.vue";
 import CvSwitch from "@/components/common/cv-switch.vue";
+import {computed, getCurrentInstance} from "vue";
+import {useStateStore} from "@/stores/StateStore";
 
 // TODO fix pipeline typing in order to fix this, the store settings call should be able to infer that only valid pipeline type settings are exposed based on pre-checks for the entire config section
 // Defer reference to store access method
 const currentPipelineSettings = useCameraSettingsStore().currentPipelineSettings;
+
+const interactiveCols = computed(() => (getCurrentInstance()?.proxy.$vuetify.breakpoint.mdAndDown || false) && (!useStateStore().sidebarFolded || useCameraSettingsStore().isDriverMode)) ? 9 : 8;
 </script>
 
 <template>
@@ -16,13 +20,13 @@ const currentPipelineSettings = useCameraSettingsStore().currentPipelineSettings
         v-model="currentPipelineSettings.tagFamily"
         label="Target family"
         :items="['AprilTag Family 36h11', 'AprilTag Family 25h9', 'AprilTag Family 16h5']"
-        :select-cols="10"
+        :select-cols="interactiveCols"
         @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({tagFamily: value}, false)"
     />
     <cv-slider
         v-model="currentPipelineSettings.decimate"
         class="pt-2"
-        :slider-cols="10"
+        :slider-cols="interactiveCols"
         label="Decimate"
         tooltip="Increases FPS at the expense of range by reducing image resolution initially"
         :min="1"
@@ -32,7 +36,7 @@ const currentPipelineSettings = useCameraSettingsStore().currentPipelineSettings
     <cv-slider
         v-model="currentPipelineSettings.blur"
         class="pt-2"
-        :slider-cols="10"
+        :slider-cols="interactiveCols"
         label="Blur"
         tooltip="Gaussian blur added to the image, high FPS cost for slightly decreased noise"
         :min="0"
@@ -43,7 +47,7 @@ const currentPipelineSettings = useCameraSettingsStore().currentPipelineSettings
     <cv-slider
         v-model="currentPipelineSettings.threads"
         class="pt-2"
-        :slider-cols="10"
+        :slider-cols="interactiveCols"
         label="Threads"
         tooltip="Number of threads spawned by the AprilTag detector"
         :min="1"
@@ -60,7 +64,7 @@ const currentPipelineSettings = useCameraSettingsStore().currentPipelineSettings
     <cv-slider
         v-model="currentPipelineSettings.decisionMargin"
         class="pt-2 pb-4"
-        :slider-cols="10"
+        :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"
         :min="0"
@@ -70,7 +74,7 @@ const currentPipelineSettings = useCameraSettingsStore().currentPipelineSettings
     <cv-slider
         v-model="currentPipelineSettings.numIterations"
         class="pt-2 pb-4"
-        :slider-cols="10"
+        :slider-cols="interactiveCols"
         label="Pose Estimation Iterations"
         tooltip="Number of iterations the pose estimation algorithm will run, 50-100 is a good starting point"
         :min="0"
diff --git a/photon-client/src/components/dashboard/PipelineConfigTabs/ArucoTab.vue b/photon-client/src/components/dashboard/PipelineConfigTabs/ArucoTab.vue
index 545361e61a..472e8e2f46 100644
--- a/photon-client/src/components/dashboard/PipelineConfigTabs/ArucoTab.vue
+++ b/photon-client/src/components/dashboard/PipelineConfigTabs/ArucoTab.vue
@@ -2,10 +2,14 @@
 import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
 import { PipelineType } from "@/types/PipelineTypes";
 import CvSlider from "@/components/common/cv-slider.vue";
+import {computed, getCurrentInstance} from "vue";
+import {useStateStore} from "@/stores/StateStore";
 
 // TODO fix pipeline typing in order to fix this, the store settings call should be able to infer that only valid pipeline type settings are exposed based on pre-checks for the entire config section
 // Defer reference to store access method
 const currentPipelineSettings = useCameraSettingsStore().currentPipelineSettings;
+
+const interactiveCols = computed(() => (getCurrentInstance()?.proxy.$vuetify.breakpoint.mdAndDown || false) && (!useStateStore().sidebarFolded || useCameraSettingsStore().isDriverMode)) ? 9 : 8;
 </script>
 
 <template>
@@ -13,7 +17,7 @@ const currentPipelineSettings = useCameraSettingsStore().currentPipelineSettings
     <cv-slider
         v-model="currentPipelineSettings.decimate"
         class="pt-2"
-        :slider-cols="10"
+        :slider-cols="interactiveCols"
         label="Decimate"
         tooltip="Increases FPS at the expense of range by reducing image resolution initially"
         :min="1"
@@ -23,7 +27,7 @@ const currentPipelineSettings = useCameraSettingsStore().currentPipelineSettings
     <cv-slider
         v-model="currentPipelineSettings.numIterations"
         class="pt-2"
-        :slider-cols="10"
+        :slider-cols="interactiveCols"
         label="Corner Iterations"
         tooltip="How many iterations are going to be used in order to refine corners. Higher values are lead to more accuracy at the cost of performance"
         :min="30"
@@ -34,7 +38,7 @@ const currentPipelineSettings = useCameraSettingsStore().currentPipelineSettings
     <cv-slider
         v-model="currentPipelineSettings.cornerAccuracy"
         class="pt-2"
-        :slider-cols="10"
+        :slider-cols="interactiveCols"
         label="Corner Accuracy"
         tooltip="Minimum accuracy for the corners, lower is better but more performance intensive "
         :min="0.01"
diff --git a/photon-client/src/components/dashboard/PipelineConfigTabs/ContoursTab.vue b/photon-client/src/components/dashboard/PipelineConfigTabs/ContoursTab.vue
index b10a1c2f30..3c484ce164 100644
--- a/photon-client/src/components/dashboard/PipelineConfigTabs/ContoursTab.vue
+++ b/photon-client/src/components/dashboard/PipelineConfigTabs/ContoursTab.vue
@@ -4,7 +4,8 @@ import { PipelineType } from "@/types/PipelineTypes";
 import CvRangeSlider from "@/components/common/cv-range-slider.vue";
 import CvSelect from "@/components/common/cv-select.vue";
 import CvSlider from "@/components/common/cv-slider.vue";
-import { computed } from "vue";
+import {computed, getCurrentInstance} from "vue";
+import {useStateStore} from "@/stores/StateStore";
 
 // TODO fix pipeline typing in order to fix this, the store settings call should be able to infer that only valid pipeline type settings are exposed based on pre-checks for the entire config section
 // Defer reference to store access method
@@ -39,6 +40,8 @@ const contourRadius = computed<[number, number]>({
     }
   }
 });
+
+const interactiveCols = computed(() => (getCurrentInstance()?.proxy.$vuetify.breakpoint.mdAndDown || false) && (!useStateStore().sidebarFolded || useCameraSettingsStore().isDriverMode)) ? 9 : 8;
 </script>
 
 <template>
@@ -48,6 +51,7 @@ const contourRadius = computed<[number, number]>({
         label="Area"
         :min="0"
         :max="100"
+        :slider-cols="interactiveCols"
         :step="0.01"
         @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourArea: value}, false)"
     />
@@ -58,6 +62,7 @@ const contourRadius = computed<[number, number]>({
         tooltip="Min and max ratio between the width and height of a contour's bounding rectangle"
         :min="0"
         :max="100"
+        :slider-cols="interactiveCols"
         :step="0.1"
         @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourRatio: value}, false)"
     />
@@ -66,7 +71,7 @@ const contourRadius = computed<[number, number]>({
         label="Target Orientation"
         tooltip="Used to determine how to calculate target landmarks, as well as aspect ratio"
         :items="['Portrait', 'Landscape']"
-        :select-cols="10"
+        :select-cols="interactiveCols"
         @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourTargetOrientation: value}, false)"
     />
     <cv-range-slider
@@ -76,6 +81,7 @@ const contourRadius = computed<[number, number]>({
         tooltip="Min and max ratio between a contour's area and its bounding rectangle"
         :min="0"
         :max="100"
+        :slider-cols="interactiveCols"
         @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourFullness: value}, false)"
     />
     <cv-range-slider
@@ -85,6 +91,7 @@ const contourRadius = computed<[number, number]>({
         tooltip="Min and max perimeter of the shape, in pixels"
         min="0"
         max="4000"
+        :slider-cols="interactiveCols"
         @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourPerimeter: value}, false)"
     />
     <cv-slider
@@ -93,7 +100,7 @@ const contourRadius = computed<[number, number]>({
         tooltip="Rejects contours whose average area is less than the given percentage of the average area of all the other contours"
         :min="0"
         :max="100"
-        :slider-cols="10"
+        :slider-cols="interactiveCols"
         @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourSpecklePercentage: value}, false)"
     />
     <template v-if="currentPipelineSettings.pipelineType === PipelineType.Reflective">
@@ -104,7 +111,7 @@ const contourRadius = computed<[number, number]>({
           :min="0.1"
           :max="4"
           :step="0.1"
-          :slider-cols="10"
+          :slider-cols="interactiveCols"
           @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourFilterRangeX: value}, false)"
       />
       <cv-slider
@@ -114,14 +121,14 @@ const contourRadius = computed<[number, number]>({
           :min="0.1"
           :max="4"
           :step="0.1"
-          :slider-cols="10"
+          :slider-cols="interactiveCols"
           @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourFilterRangeY: value}, false)"
       />
       <cv-select
           v-model="useCameraSettingsStore().currentPipelineSettings.contourGroupingMode"
           label="Target Grouping"
           tooltip="Whether or not every two targets are paired with each other (good for e.g. 2019 targets)"
-          :select-cols="10"
+          :select-cols="interactiveCols"
           :items="['Single','Dual','Two or More']"
           @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourGroupingMode: value}, false)"
       />
@@ -129,7 +136,7 @@ const contourRadius = computed<[number, number]>({
           v-model="useCameraSettingsStore().currentPipelineSettings.contourIntersection"
           label="Target Intersection"
           tooltip="If target grouping is in dual mode it will use this dropdown to decide how targets are grouped with adjacent targets"
-          :select-cols="10"
+          :select-cols="interactiveCols"
           :items="['None','Up','Down','Left','Right']"
           :disabled="useCameraSettingsStore().currentPipelineSettings.contourGroupingMode === 0"
           @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourIntersection: value}, false)"
@@ -141,7 +148,7 @@ const contourRadius = computed<[number, number]>({
           v-model="currentPipelineSettings.contourShape"
           label="Target Shape"
           tooltip="The shape of targets to look for"
-          :select-cols="10"
+          :select-cols="interactiveCols"
           :items="['Circle', 'Polygon', 'Triangle', 'Quadrilateral']"
           @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourShape: value}, false)"
       />
@@ -152,7 +159,7 @@ const contourRadius = computed<[number, number]>({
         tooltip="How much we should simply the input contour before checking how many sides it has"
         :min="0"
         :max="100"
-        :slider-cols="10"
+        :slider-cols="interactiveCols"
         @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({accuracyPercentage: value}, false)"
       />
       <cv-slider
@@ -162,7 +169,7 @@ const contourRadius = computed<[number, number]>({
           tooltip="How close the centroid of a contour must be to the center of a circle in order for them to be matched"
           :min="1"
           :max="100"
-          :slider-cols="10"
+          :slider-cols="interactiveCols"
           @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({circleDetectThreshold: value}, false)"
       />
       <cv-range-slider
@@ -171,6 +178,7 @@ const contourRadius = computed<[number, number]>({
           label="Radius"
           :min="0"
           :max="100"
+          :slider-cols="interactiveCols"
           @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourRadius: value}, false)"
       />
       <cv-slider
@@ -179,7 +187,7 @@ const contourRadius = computed<[number, number]>({
           label="Max Canny Threshold"
           :min="1"
           :max="100"
-          :slider-cols="10"
+          :slider-cols="interactiveCols"
           @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({maxCannyThresh: value}, false)"
       />
       <cv-slider
@@ -188,7 +196,7 @@ const contourRadius = computed<[number, number]>({
           label="Circle Accuracy"
           :min="1"
           :max="100"
-          :slider-cols="10"
+          :slider-cols="interactiveCols"
           @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({circleAccuracy: value}, false)"
       />
       <v-divider class="mt-3" />
@@ -197,7 +205,7 @@ const contourRadius = computed<[number, number]>({
         v-model="useCameraSettingsStore().currentPipelineSettings.contourSortMode"
         label="Target Sort"
         tooltip="Chooses the sorting mode used to determine the 'best' targets to provide to user code"
-        :select-cols="10"
+        :select-cols="interactiveCols"
         :items="['Largest','Smallest','Highest','Lowest','Rightmost','Leftmost','Centermost']"
         @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourSortMode: value}, false)"
     />
diff --git a/photon-client/src/components/dashboard/PipelineConfigTabs/InputTab.vue b/photon-client/src/components/dashboard/PipelineConfigTabs/InputTab.vue
index 0ff84730e7..9d46a64961 100644
--- a/photon-client/src/components/dashboard/PipelineConfigTabs/InputTab.vue
+++ b/photon-client/src/components/dashboard/PipelineConfigTabs/InputTab.vue
@@ -3,8 +3,9 @@ import CvSlider from "@/components/common/cv-slider.vue";
 import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
 import CvSwitch from "@/components/common/cv-switch.vue";
 import CvSelect from "@/components/common/cv-select.vue";
-import { computed } from "vue";
+import { computed, getCurrentInstance} from "vue";
 import { useSettingsStore } from "@/stores/settings/GeneralSettingsStore";
+import { useStateStore } from "@/stores/StateStore";
 
 // Due to something with libcamera or something else IDK much about, the 90° rotations need to be disabled if the libcamera drivers are being used.
 const cameraRotations = computed(() => ["Normal","90° CW","180°","90° CCW"].map((v, i) => ({ name: v, value: i, disabled: useSettingsStore().gpuAccelerationEnabled ?  [1, 3].includes(i) : false })));
@@ -41,6 +42,8 @@ const streamResolutions = computed(() => {
 const handleStreamResolutionChange = (value: number) => {
   useCameraSettingsStore().changeCurrentPipelineSetting({ streamingFrameDivisor: value + getNumberOfSkippedDivisors() }, false);
 };
+
+const interactiveCols = computed(() => (getCurrentInstance()?.proxy.$vuetify.breakpoint.mdAndDown || false) && (!useStateStore().sidebarFolded || useCameraSettingsStore().isDriverMode)) ? 9 : 8;
 </script>
 
 <template>
@@ -52,7 +55,7 @@ const handleStreamResolutionChange = (value: number) => {
         tooltip="Directly controls how much light is allowed to fall onto the sensor, which affects apparent brightness"
         :min="0"
         :max="100"
-        :slider-cols="10"
+        :slider-cols="interactiveCols"
         :step="0.1"
         @input="args => useCameraSettingsStore().changeCurrentPipelineSetting({cameraExposure: args}, false)"
     />
@@ -61,14 +64,14 @@ const handleStreamResolutionChange = (value: number) => {
         label="Brightness"
         :min="0"
         :max="100"
-        :slider-cols="10"
+        :slider-cols="interactiveCols"
         @input="args => useCameraSettingsStore().changeCurrentPipelineSetting({cameraBrightness: args}, false)"
     />
     <cv-switch
         v-model="useCameraSettingsStore().currentPipelineSettings.cameraAutoExposure"
         class="pt-2"
         label="Auto Exposure"
-        :label-cols="2"
+        :switch-cols="interactiveCols"
         tooltip="Enables or Disables camera automatic adjustment for current lighting conditions"
         @input="args => useCameraSettingsStore().changeCurrentPipelineSetting({cameraAutoExposure: args}, false)"
     />
@@ -79,7 +82,7 @@ const handleStreamResolutionChange = (value: number) => {
         tooltip="Controls camera gain, similar to brightness"
         :min="0"
         :max="100"
-        :slider-cols="10"
+        :slider-cols="interactiveCols"
         @input="args => useCameraSettingsStore().changeCurrentPipelineSetting({cameraGain: args}, false)"
     />
     <cv-slider
@@ -88,7 +91,7 @@ const handleStreamResolutionChange = (value: number) => {
         label="Red AWB Gain"
         :min="0"
         :max="100"
-        :slider-cols="10"
+        :slider-cols="interactiveCols"
         tooltip="Controls red automatic white balance gain, which affects how the camera captures colors in different conditions"
         @input="args => useCameraSettingsStore().changeCurrentPipelineSetting({cameraRedGain: args}, false)"
     />
@@ -98,7 +101,7 @@ const handleStreamResolutionChange = (value: number) => {
         label="Blue AWB Gain"
         :min="0"
         :max="100"
-        :slider-cols="10"
+        :slider-cols="interactiveCols"
         tooltip="Controls blue automatic white balance gain, which affects how the camera captures colors in different conditions"
         @input="args => useCameraSettingsStore().changeCurrentPipelineSetting({cameraBlueGain: args}, false)"
     />
@@ -107,7 +110,7 @@ const handleStreamResolutionChange = (value: number) => {
         label="Orientation"
         tooltip="Rotates the camera stream"
         :items="cameraRotations"
-        :select-cols="10"
+        :select-cols="interactiveCols"
         @input="args => useCameraSettingsStore().changeCurrentPipelineSetting({inputImageRotationMode: args}, false)"
     />
     <cv-select
@@ -115,7 +118,7 @@ const handleStreamResolutionChange = (value: number) => {
         label="Resolution"
         tooltip="Resolution and FPS the camera should directly capture at"
         :items="cameraResolutions"
-        :select-cols="10"
+        :select-cols="interactiveCols"
         @input="args => handleResolutionChange(args)"
     />
     <cv-select
@@ -123,7 +126,7 @@ const handleStreamResolutionChange = (value: number) => {
         label="Stream Resolution"
         tooltip="Resolution to which camera frames are downscaled for streaming to the dashboard"
         :items="streamResolutions"
-        :select-cols="10"
+        :select-cols="interactiveCols"
         @input="args => handleStreamResolutionChange(args)"
     />
   </div>
diff --git a/photon-client/src/components/dashboard/PipelineConfigTabs/OutputTab.vue b/photon-client/src/components/dashboard/PipelineConfigTabs/OutputTab.vue
index ba632a797b..3d4c1c69a0 100644
--- a/photon-client/src/components/dashboard/PipelineConfigTabs/OutputTab.vue
+++ b/photon-client/src/components/dashboard/PipelineConfigTabs/OutputTab.vue
@@ -4,10 +4,13 @@ import CvSelect from "@/components/common/cv-select.vue";
 import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
 import { PipelineType, RobotOffsetPointMode } from "@/types/PipelineTypes";
 import CvSwitch from "@/components/common/cv-switch.vue";
-import { computed } from "vue";
+import {computed, getCurrentInstance} from "vue";
 import { RobotOffsetType } from "@/types/SettingTypes";
+import {useStateStore} from "@/stores/StateStore";
 
 const isTagPipeline = computed(() => useCameraSettingsStore().currentPipelineType === PipelineType.AprilTag || useCameraSettingsStore().currentPipelineType === PipelineType.Aruco);
+
+const interactiveCols = computed(() => (getCurrentInstance()?.proxy.$vuetify.breakpoint.mdAndDown || false) && (!useStateStore().sidebarFolded || useCameraSettingsStore().isDriverMode)) ? 9 : 8;
 </script>
 
 <template>
@@ -17,7 +20,7 @@ const isTagPipeline = computed(() => useCameraSettingsStore().currentPipelineTyp
         label="Target Offset Point"
         tooltip="Changes where the 'center' of the target is (used for calculating e.g. pitch and yaw)"
         :items="['Center','Top','Bottom','Left','Right']"
-        :select-cols="10"
+        :select-cols="interactiveCols"
         @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourTargetOffsetPointEdge: value}, false)"
     />
     <cv-select
@@ -26,7 +29,7 @@ const isTagPipeline = computed(() => useCameraSettingsStore().currentPipelineTyp
         label="Target Orientation"
         tooltip="Used to determine how to calculate target landmarks (e.g. the top, left, or bottom of the target)"
         :items="['Portrait', 'Landscape']"
-        :select-cols="10"
+        :select-cols="interactiveCols"
         @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourTargetOrientation: value}, false)"
     />
     <cv-switch
@@ -34,7 +37,7 @@ const isTagPipeline = computed(() => useCameraSettingsStore().currentPipelineTyp
         label="Show Multiple Targets"
         tooltip="If enabled, up to five targets will be displayed and sent to user code, instead of just one"
         :disabled="isTagPipeline"
-        :label-cols="2"
+        :switch-cols="interactiveCols"
         @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({outputShowMultipleTargets: value}, false)"
     />
     <cv-select
@@ -42,7 +45,7 @@ const isTagPipeline = computed(() => useCameraSettingsStore().currentPipelineTyp
         label="Robot Offset Mode"
         tooltip="Used to add an arbitrary offset to the location of the targeting crosshair"
         :items="['None','Single Point','Dual Point']"
-        :select-cols="10"
+        :select-cols="interactiveCols"
         @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({offsetRobotOffsetMode: value}, false)"
     />
     <v-row
diff --git a/photon-client/src/components/dashboard/PipelineConfigTabs/PnPTab.vue b/photon-client/src/components/dashboard/PipelineConfigTabs/PnPTab.vue
index 4baed5dfe3..7bf0e3d4bd 100644
--- a/photon-client/src/components/dashboard/PipelineConfigTabs/PnPTab.vue
+++ b/photon-client/src/components/dashboard/PipelineConfigTabs/PnPTab.vue
@@ -3,6 +3,10 @@ import CvSelect from "@/components/common/cv-select.vue";
 import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
 import { TargetModel } from "@/types/PipelineTypes";
 import CvSlider from "@/components/common/cv-slider.vue";
+import {computed, getCurrentInstance} from "vue";
+import {useStateStore} from "@/stores/StateStore";
+
+const interactiveCols = computed(() => (getCurrentInstance()?.proxy.$vuetify.breakpoint.mdAndDown || false) && (!useStateStore().sidebarFolded || useCameraSettingsStore().isDriverMode)) ? 9 : 8;
 </script>
 
 <template>
@@ -21,13 +25,13 @@ import CvSlider from "@/components/common/cv-slider.vue";
             {name: '6in (16h5) Aruco', value: TargetModel.kAruco6in_16h5},
             {name: '6in (16h5) AprilTag', value: TargetModel.k6in_16h5}
         ]"
-        :select-cols="10"
+        :select-cols="interactiveCols"
         @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({targetModel: value}, false)"
     />
     <cv-slider
         v-model="useCameraSettingsStore().currentPipelineSettings.cornerDetectionAccuracyPercentage"
         class="pt-2"
-        :slider-cols="10"
+        :slider-cols="interactiveCols"
         label="Contour simplification Percentage"
         :min="0"
         :max="100"
diff --git a/photon-client/src/components/dashboard/PipelineConfigTabs/ThresholdTab.vue b/photon-client/src/components/dashboard/PipelineConfigTabs/ThresholdTab.vue
index 0887676135..8017f7ec1a 100644
--- a/photon-client/src/components/dashboard/PipelineConfigTabs/ThresholdTab.vue
+++ b/photon-client/src/components/dashboard/PipelineConfigTabs/ThresholdTab.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
-import { computed } from "vue";
+import {computed, getCurrentInstance} from "vue";
 import CvRangeSlider from "@/components/common/cv-range-slider.vue";
 import CvSwitch from "@/components/common/cv-switch.vue";
+import { useStateStore } from "@/stores/StateStore";
 
 const averageHue = computed<number>(() => {
   const isHueInverted = useCameraSettingsStore().currentPipelineSettings.hueInverted;
@@ -27,6 +28,8 @@ const hsvValue = computed<[number, number]>({
   get: () => Object.values(useCameraSettingsStore().currentPipelineSettings.hsvValue) as [number, number],
   set: v => useCameraSettingsStore().currentPipelineSettings.hsvValue = v
 });
+
+const interactiveCols = computed(() => (getCurrentInstance()?.proxy.$vuetify.breakpoint.mdAndDown || false) && (!useStateStore().sidebarFolded || useCameraSettingsStore().isDriverMode)) ? 9 : 8;
 </script>
 
 <template>
@@ -39,6 +42,7 @@ const hsvValue = computed<[number, number]>({
       tooltip="Describes color"
       :min="0"
       :max="180"
+      :slider-cols="interactiveCols"
       :inverted="useCameraSettingsStore().currentPipelineSettings.hueInverted"
       @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({hsvHue: value}, false)"
     />
@@ -50,6 +54,7 @@ const hsvValue = computed<[number, number]>({
         tooltip="Describes colorfulness; the smaller this value the 'whiter' the color becomes"
         :min="0"
         :max="255"
+        :slider-cols="interactiveCols"
         @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({hsvSaturation: value}, false)"
     />
     <cv-range-slider
@@ -60,11 +65,13 @@ const hsvValue = computed<[number, number]>({
         tooltip="Describes lightness; the smaller this value the 'blacker' the color becomes"
         :min="0"
         :max="255"
+        :slider-cols="interactiveCols"
         @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({hsvValue: value}, false)"
     />
     <cv-switch
         v-model="useCameraSettingsStore().currentPipelineSettings.hueInverted"
         label="Invert Hue"
+        :switch-cols="interactiveCols"
         tooltip="Selects the hue range outside of the hue slider bounds instead of inside"
         @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({hueInverted: value}, false)"
     />