From 48e54a0bc9d40f6f6d3671d8be12b7332c0ba4e8 Mon Sep 17 00:00:00 2001
From: David Manthey <david.manthey@kitware.com>
Date: Wed, 4 Oct 2023 12:26:33 -0400
Subject: [PATCH] Adjust how css is applied to the max-merge controls

This makes it easier to modify in other clients.
---
 CHANGELOG.md                                     |  2 +-
 .../web_client/vue/components/DualInput.vue      | 16 +++++++++++++---
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c827d5ed7..a90ea305c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,7 +4,7 @@
 
 ### Improvements
 - Style can specify a dtype of 'source' to maintain the original dtype even when compositing frames ([#1326](../../pull/1326))
-- Max Merge option in Frame Selector ([#1306](../../pull/1306))
+- Max Merge option in Frame Selector ([#1306](../../pull/1306), [#1330](../../pull/1330))
 
 ### Changes
 - Prohibit bioformats and vips from reading mrxs directly ([#1328](../../pull/1328))
diff --git a/girder/girder_large_image/web_client/vue/components/DualInput.vue b/girder/girder_large_image/web_client/vue/components/DualInput.vue
index f1aad0b02..e1599d9ad 100644
--- 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>