Adjust how css is applied to the max-merge controls

This makes it easier to modify in other clients.
girder · Oct 4, 2023 · 88fa67e · 88fa67e
1 parent a469851
commit 88fa67e
Showing 1 changed file with 13 additions and 3 deletions.
diff --git a/girder/girder_large_image/web_client/vue/components/DualInput.vue b/girder/girder_large_image/web_client/vue/components/DualInput.vue
@@ -38,7 +38,7 @@ export default {
         :disabled="merge"
       >
     </td>
-    <td style="width: 100%">
+    <td class="slider-control-cell">
       <input
         v-model="value"
         type="range"
@@ -64,13 +64,13 @@ export default {
     </td>
     <td
       v-show="merge !== undefined"
-      style="min-width: 150px; text-align: right;"
+      class="max-merge-cell"
+      :title="'Max Merge ' + label"
     >
       <input
         :id="'maxMerge'+label"
         v-model="merge"
         type="checkbox"
-        style="margin: 0px 5px 0px 10px"
       >
       <label :for="'maxMerge'+label">Max Merge</label>
     </td>
@@ -110,4 +110,14 @@ export default {
   top: -1px;
   left: 50%;
 }
+.slider-control-cell {
+  width: 100%;
+}
+.max-merge-cell {
+  min-width: 125px;
+  text-align: right;
+}
+.max-merge-cell input[type="checkbox"] {
+  margin: 0px 2px 0px 0px;
+}
 </style>