Calibration card and PV input styling (#1695)

Images are before and after comparison.
Does the following:
- Fixes several styling issues with pv-* input elements, including top
padding, vertical alignment, and allocated input width

![image](https://github.com/user-attachments/assets/70d37e65-e0cd-4c71-8ea1-941ec2175850)

![image](https://github.com/user-attachments/assets/031d008d-3cce-4ed2-bc88-5fbecf20c94f)

- Conforms the calibration details modal to overall styling and spacing
standards

![image](https://github.com/user-attachments/assets/18281551-f924-4e12-9ad4-d2ec470dbc70)

![image](https://github.com/user-attachments/assets/db772325-7650-467d-8521-252c7d38601f)
(left the blank table there on empty calibrations to give the user a
sense of what they might see if they don't have any)

photon-client/src/components/dashboard/tabs/OutputTab.vue

@@ -56,27 +56,6 @@ const interactiveCols = computed(() =>
 
 <template>
   <div>
-    <pv-select
-      v-model="useCameraSettingsStore().currentPipelineSettings.contourTargetOffsetPointEdge"
-      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="interactiveCols"
-      @input="
-        (value) => useCameraSettingsStore().changeCurrentPipelineSetting({ contourTargetOffsetPointEdge: value }, false)
-      "
-    />
-    <pv-select
-      v-if="!isTagPipeline"
-      v-model="useCameraSettingsStore().currentPipelineSettings.contourTargetOrientation"
-      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="interactiveCols"
-      @input="
-        (value) => useCameraSettingsStore().changeCurrentPipelineSetting({ contourTargetOrientation: value }, false)
-      "
-    />
     <pv-switch
       v-model="useCameraSettingsStore().currentPipelineSettings.outputShowMultipleTargets"
       label="Show Multiple Targets"
@@ -115,6 +94,35 @@ const interactiveCols = computed(() =>
       :disabled="!isTagPipeline || !currentPipelineSettings.doMultiTarget"
       @input="(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ doSingleTargetAlways: value }, false)"
     />
+    <pv-select
+      v-model="useCameraSettingsStore().currentPipelineSettings.contourTargetOffsetPointEdge"
+      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="interactiveCols"
+      @input="
+        (value) => useCameraSettingsStore().changeCurrentPipelineSetting({ contourTargetOffsetPointEdge: value }, false)
+      "
+    />
+    <pv-select
+      v-if="!isTagPipeline"
+      v-model="useCameraSettingsStore().currentPipelineSettings.contourTargetOrientation"
+      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="interactiveCols"
+      @input="
+        (value) => useCameraSettingsStore().changeCurrentPipelineSetting({ contourTargetOrientation: value }, false)
+      "
+    />
+    <pv-select
+      v-model="useCameraSettingsStore().currentPipelineSettings.offsetRobotOffsetMode"
+      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="interactiveCols"
+      @input="(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ offsetRobotOffsetMode: value }, false)"
+    />
     <table
       v-if="useCameraSettingsStore().currentPipelineSettings.offsetRobotOffsetMode !== RobotOffsetPointMode.None"
       class="metrics-table mt-3 mb-3"
@@ -130,71 +138,74 @@ const interactiveCols = computed(() =>
         </td>
       </tr>
     </table>
-    <pv-select
-      v-model="useCameraSettingsStore().currentPipelineSettings.offsetRobotOffsetMode"
-      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="interactiveCols"
-      @input="(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ offsetRobotOffsetMode: value }, false)"
-    />
-    <v-row
+    <div
       v-if="useCameraSettingsStore().currentPipelineSettings.offsetRobotOffsetMode !== RobotOffsetPointMode.None"
-      align="center"
-      justify="start"
+      class="d-flex align-center"
     >
-      <v-row
+      <v-card-text
         v-if="useCameraSettingsStore().currentPipelineSettings.offsetRobotOffsetMode === RobotOffsetPointMode.Single"
+        class="d-flex pa-0 flex-wrap"
       >
-        <v-col>
+        <v-col cols="6" class="pl-0">
           <v-btn
             small
+            block
             color="accent"
-            style="width: 100%"
             class="black--text"
             @click="useCameraSettingsStore().takeRobotOffsetPoint(RobotOffsetType.Single)"
           >
             Take Point
           </v-btn>
         </v-col>
-      </v-row>
-      <v-row
-        v-else-if="useCameraSettingsStore().currentPipelineSettings.offsetRobotOffsetMode === RobotOffsetPointMode.Dual"
-      >
-        <v-col>
+        <v-col cols="6" class="pr-0">
           <v-btn
             small
+            block
+            color="yellow darken-3"
+            @click="useCameraSettingsStore().takeRobotOffsetPoint(RobotOffsetType.Clear)"
+          >
+            Clear All Points
+          </v-btn>
+        </v-col>
+      </v-card-text>
+      <v-card-text
+        v-else-if="useCameraSettingsStore().currentPipelineSettings.offsetRobotOffsetMode === RobotOffsetPointMode.Dual"
+        class="d-flex pa-0 flex-wrap"
+      >
+        <v-col cols="6" lg="4" class="pl-0 pr-2">
+          <v-btn
+            small
+            block
             color="accent"
-            style="width: 100%"
             class="black--text"
             @click="useCameraSettingsStore().takeRobotOffsetPoint(RobotOffsetType.DualFirst)"
           >
             Take First Point
           </v-btn>
         </v-col>
-        <v-col>
+        <v-col cols="6" lg="4" class="pl-2 pr-0 pr-lg-2">
           <v-btn
             small
+            block
             color="accent"
-            style="width: 100%"
             class="black--text"
             @click="useCameraSettingsStore().takeRobotOffsetPoint(RobotOffsetType.DualSecond)"
           >
             Take Second Point
           </v-btn>
         </v-col>
-      </v-row>
-      <v-col>
-        <v-btn
-          small
-          color="yellow darken-3"
-          style="width: 100%"
-          @click="useCameraSettingsStore().takeRobotOffsetPoint(RobotOffsetType.Clear)"
-        >
-          Clear All Points
-        </v-btn>
-      </v-col>
-    </v-row>
+        <v-col cols="12" lg="4" class="pl-0 pl-lg-2 pr-0">
+          <v-btn
+            small
+            block
+            color="yellow darken-3"
+            @click="useCameraSettingsStore().takeRobotOffsetPoint(RobotOffsetType.Clear)"
+          >
+            Clear All Points
+          </v-btn>
+        </v-col>
+      </v-card-text>
+    </div>
   </div>
 </template>