From bbafd20ddeeca95af339aaae7ce447ab1680b4af Mon Sep 17 00:00:00 2001
From: Matt Dawkins <matt.dawkins@kitware.com>
Date: Tue, 30 Jun 2026 12:42:43 -0400
Subject: [PATCH 1/3] Fix bottom-sidebar timeline controls layout

Restore the previous/next frame buttons, the selected-camera filename, and the synchronize-cameras button to the bottom-sidebar controls bar, which had been hidden behind a popup menu. Keep the count-settings, seek, and camera-control buttons on a single line with the filename below, and let the timeline shrink to fit the panel so its x-axis labels are no longer clipped.
---
 .../components/ControlsContainer.vue          |  17 +-
 client/src/components/controls/Controls.vue   | 214 ++++++------------
 client/src/components/controls/Timeline.vue   |  12 +
 3 files changed, 86 insertions(+), 157 deletions(-)

diff --git a/client/dive-common/components/ControlsContainer.vue b/client/dive-common/components/ControlsContainer.vue
index eb84eee57..cd4f47a37 100644
--- a/client/dive-common/components/ControlsContainer.vue
+++ b/client/dive-common/components/ControlsContainer.vue
@@ -159,7 +159,7 @@ export default defineComponent({
   <v-col
     dense
     :style="bottomLayout
-      ? 'position: relative; padding: 0px; margin: 0px; width: 100%;'
+      ? 'position: relative; padding: 0px; margin: 0px; width: 100%; height: 100%; display: flex; flex-direction: column; min-height: 0;'
       : 'position: absolute; bottom: 0px; padding: 0px; margin: 0px;'"
   >
     <Controls
@@ -169,7 +169,7 @@ export default defineComponent({
       :wrap-bottom-controls="wrapBottomControls"
     >
       <template slot="timelineControls">
-        <div :style="{ 'min-width': bottomLayout && wrapBottomControls ? 'auto' : '270px', 'white-space': 'nowrap', width: '100%' }">
+        <div :style="{ 'min-width': bottomLayout && wrapBottomControls ? 'auto' : '270px', 'white-space': 'nowrap', width: bottomLayout && wrapBottomControls ? 'auto' : '100%' }">
           <v-tooltip
             v-if="!bottomLayout || !wrapBottomControls"
             open-delay="200"
@@ -319,18 +319,6 @@ export default defineComponent({
           </v-btn>
         </div>
       </template>
-      <template #bottomControlsActivator="{ activatorId }">
-        <v-btn
-          v-if="bottomLayout && wrapBottomControls"
-          :id="activatorId"
-          icon
-          small
-          class="ml-1"
-          title="Timeline controls"
-        >
-          <v-icon>mdi-tune-variant</v-icon>
-        </v-btn>
-      </template>
       <template #middle>
         <div :class="{ 'middle-content-bottom': bottomLayout }">
           <file-name-time-display
@@ -452,6 +440,7 @@ export default defineComponent({
       :frame="frame"
       :display="!collapsed"
       :dataset-type="datasetType"
+      :bottom-layout="bottomLayout"
       @seek="seek"
     >
       <template
diff --git a/client/src/components/controls/Controls.vue b/client/src/components/controls/Controls.vue
index d15afea11..ca22208e6 100644
--- a/client/src/components/controls/Controls.vue
+++ b/client/src/components/controls/Controls.vue
@@ -45,8 +45,6 @@ export default defineComponent({
     const datasetId = useDatasetId();
     const activeLockedCamera = ref(false);
     const activeTimeFilter = ref(false);
-    const activeBottomControlsMenu = ref(false);
-    const bottomControlsActivatorId = 'bottom-controls-menu-activator';
     watch(mediaController.frame, (frame) => {
       if (!data.dragging) {
         data.frame = frame;
@@ -213,8 +211,6 @@ export default defineComponent({
     return {
       activeLockedCamera,
       activeTimeFilter,
-      activeBottomControlsMenu,
-      bottomControlsActivatorId,
       data,
       mediaController,
       dragHandler,
@@ -295,17 +291,48 @@ export default defineComponent({
               justify="start"
               name="timelineControls"
             />
-            <slot
-              name="bottomControlsActivator"
-              :activator-id="bottomControlsActivatorId"
-            />
           </div>
         </v-col>
         <v-col
           v-if="bottomLayout"
-          class="py-1 shrink d-flex align-center bottom-controls-actions"
+          class="py-1 d-flex align-center bottom-controls-actions"
           style="min-width: auto;"
         >
+          <v-btn
+            icon
+            small
+            title="(d, left-arrow) previous frame"
+            @click="mediaController.prevFrame"
+          >
+            <v-icon>mdi-skip-previous</v-icon>
+          </v-btn>
+          <v-btn
+            v-if="!mediaController.playing.value"
+            icon
+            small
+            title="(space) Play"
+            @click="mediaController.play"
+          >
+            <v-icon>mdi-play</v-icon>
+          </v-btn>
+          <v-btn
+            v-else
+            icon
+            small
+            title="(space) Pause"
+            @click="mediaController.pause"
+          >
+            <v-icon>mdi-pause</v-icon>
+          </v-btn>
+          <v-btn
+            icon
+            small
+            title="(f, right-arrow) next frame"
+            @click="mediaController.nextFrame"
+          >
+            <v-icon>mdi-skip-next</v-icon>
+          </v-btn>
+          <v-divider vertical class="mx-1" />
           <v-menu
             v-model="activeTimeFilter"
             bottom
@@ -562,121 +589,29 @@ export default defineComponent({
             color="warning"
             dot
             overlap
-          />
-          <v-menu
-            v-model="activeBottomControlsMenu"
-            :activator="`#${bottomControlsActivatorId}`"
-            :nudge-left="8"
-            left
             bottom
-            :close-on-content-click="false"
           >
-            <v-card
-              outlined
-              class="pa-2"
-              color="blue-grey darken-3"
-              min-width="360"
+            <v-btn
+              icon
+              small
+              :title="!isDefaultImage ? 'Image Enhancements (Modified)' : 'Image Enhancements'"
+              @click="toggleEnhancements"
             >
-              <div class="d-flex align-center mb-2">
-                <slot name="middle" />
-              </div>
-              <div class="d-flex align-center">
-                <v-btn
-                  icon
-                  small
-                  title="(d, left-arrow) previous frame"
-                  @click="mediaController.prevFrame"
-                >
-                  <v-icon>mdi-skip-previous</v-icon>
-                </v-btn>
-                <v-btn
-                  v-if="!mediaController.playing.value"
-                  icon
-                  small
-                  title="(space) Play"
-                  @click="mediaController.play"
-                >
-                  <v-icon>mdi-play</v-icon>
-                </v-btn>
-                <v-btn
-                  v-else
-                  icon
-                  small
-                  title="(space) Pause"
-                  @click="mediaController.pause"
-                >
-                  <v-icon>mdi-pause</v-icon>
-                </v-btn>
-                <v-btn
-                  icon
-                  small
-                  title="(f, right-arrow) next frame"
-                  @click="mediaController.nextFrame"
-                >
-                  <v-icon>mdi-skip-next</v-icon>
-                </v-btn>
-                <v-divider vertical class="mx-1" />
-                <v-btn
-                  icon
-                  small
-                  :color="timeFilterActive ? 'primary' : 'default'"
-                  title="Filter tracks by time range"
-                  @click="handleTimeFilterClick"
-                >
-                  <v-icon>
-                    {{ timeFilterActive ? 'mdi-filter' : 'mdi-filter-outline' }}
-                  </v-icon>
-                </v-btn>
-                <v-btn
-                  icon
-                  small
-                  :color="clientSettings.annotatorPreferences.lockedCamera.enabled ? 'primary' : 'default'"
-                  title="center camera on selected track"
-                  @click="clientSettings.annotatorPreferences.lockedCamera.enabled = !clientSettings.annotatorPreferences.lockedCamera.enabled"
-                >
-                  <v-icon>
-                    {{ clientSettings.annotatorPreferences.lockedCamera.enabled ? 'mdi-lock-check' : 'mdi-lock-open' }}
-                  </v-icon>
-                </v-btn>
-                <v-btn
-                  icon
-                  small
-                  title="(r)eset pan and zoom"
-                  @click="mediaController.resetZoom"
-                >
-                  <v-icon>mdi-image-filter-center-focus</v-icon>
-                </v-btn>
-                <v-badge
-                  :value="!isDefaultImage"
-                  color="warning"
-                  dot
-                  overlap
-                  bottom
-                >
-                  <v-btn
-                    icon
-                    small
-                    :title="!isDefaultImage ? 'Image Enhancements (Modified)' : 'Image Enhancements'"
-                    @click="toggleEnhancements"
-                  >
-                    <v-icon>mdi-contrast-box</v-icon>
-                  </v-btn>
-                </v-badge>
-                <v-btn
-                  v-if="mediaController.cameras.value.length > 1"
-                  icon
-                  small
-                  :color="mediaController.cameraSync.value ? 'primary' : 'default'"
-                  title="Synchronize camera controls"
-                  @click="mediaController.toggleSynchronizeCameras(!mediaController.cameraSync.value)"
-                >
-                  <v-icon>
-                    {{ mediaController.cameraSync.value ? 'mdi-link' : 'mdi-link-off' }}
-                  </v-icon>
-                </v-btn>
-              </div>
-            </v-card>
-          </v-menu>
+              <v-icon>mdi-contrast-box</v-icon>
+            </v-btn>
+          </v-badge>
+          <v-btn
+            v-if="mediaController.cameras.value.length > 1"
+            icon
+            small
+            :color="mediaController.cameraSync.value ? 'primary' : 'default'"
+            title="Synchronize camera controls"
+            @click="mediaController.toggleSynchronizeCameras(!mediaController.cameraSync.value)"
+          >
+            <v-icon>
+              {{ mediaController.cameraSync.value ? 'mdi-link' : 'mdi-link-off' }}
+            </v-icon>
+          </v-btn>
         </v-col>
         <template v-else>
           <v-col
@@ -1291,45 +1226,38 @@ export default defineComponent({
           </v-col>
         </template>
       </v-row>
+      <div
+        v-if="bottomLayout"
+        class="bottom-controls-filename px-1"
+      >
+        <slot name="middle" />
+      </div>
     </v-card>
   </div>
 </template>
 
 <style scoped>
 .bottom-controls-row {
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
 }
 
 .bottom-controls-row-nowrap {
   flex-wrap: nowrap;
 }
 
-.bottom-controls-left {
-  order: 1;
-}
-
-.bottom-controls-middle {
-  order: 2;
-}
-
-.bottom-controls-actions {
-  order: 3;
-}
-
 .bottom-controls-row .bottom-controls-left {
-  flex: 1 1 auto;
-}
-
-.bottom-controls-row .bottom-controls-middle {
-  flex: 1 1 260px;
-  min-width: 0;
-  overflow: hidden;
+  flex: 0 0 auto;
 }
 
 .bottom-controls-row .bottom-controls-actions {
   flex: 0 0 auto;
-  margin-left: auto;
-  justify-content: flex-end;
+  flex-wrap: nowrap;
+}
+
+.bottom-controls-filename {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
 .bottom-controls-row-nowrap .bottom-controls-left {
diff --git a/client/src/components/controls/Timeline.vue b/client/src/components/controls/Timeline.vue
index 99ded4bab..b6cfc5297 100644
--- a/client/src/components/controls/Timeline.vue
+++ b/client/src/components/controls/Timeline.vue
@@ -29,6 +29,10 @@ export default defineComponent({
       type: String as PropType<DatasetType>,
       required: true,
     },
+    bottomLayout: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ['seek'],
   setup(props, { emit }) {
@@ -577,6 +581,7 @@ export default defineComponent({
   <div
     ref="timelineEl"
     class="timeline"
+    :class="{ 'timeline-compact': bottomLayout }"
     @wheel="onwheel"
     @mouseup="containerMouseup"
     @mousemove="containerMousemove"
@@ -662,6 +667,13 @@ export default defineComponent({
   display: flex;
   flex-direction: column;
 
+  &.timeline-compact {
+    // In the bottom panel the height is fixed; fill the space left below the
+    // controls bar and shrink instead of overflowing (which clips the x-axis).
+    min-height: 90px;
+    flex: 1 1 0;
+  }
+
   .work-area {
     flex: 1;
     position: relative;

From 444a475b7757ed93b400b0b128e69c547d54ccc7 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Tue, 30 Jun 2026 13:23:54 -0400
Subject: [PATCH 2/3] expand frame/name title to prevent from cutting off

---
 client/dive-common/components/ControlsContainer.vue |  3 ++-
 client/src/components/controls/Controls.vue         | 11 +++++++++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/client/dive-common/components/ControlsContainer.vue b/client/dive-common/components/ControlsContainer.vue
index cd4f47a37..afdbd8bad 100644
--- a/client/dive-common/components/ControlsContainer.vue
+++ b/client/dive-common/components/ControlsContainer.vue
@@ -515,7 +515,8 @@ export default defineComponent({
   display: flex;
   align-items: center;
   white-space: nowrap;
-  overflow: hidden;
+  overflow-x: hidden;
+  overflow-y: visible;
   min-width: 0;
 }
 .middle-content-bottom .text-middle {
diff --git a/client/src/components/controls/Controls.vue b/client/src/components/controls/Controls.vue
index ca22208e6..4370ef058 100644
--- a/client/src/components/controls/Controls.vue
+++ b/client/src/components/controls/Controls.vue
@@ -260,6 +260,7 @@ export default defineComponent({
         disabled: visible(),
       },
     ]"
+    :class="{ 'controls-bottom-layout': bottomLayout }"
     style="position: relative;"
   >
     <v-card
@@ -1228,7 +1229,7 @@ export default defineComponent({
       </v-row>
       <div
         v-if="bottomLayout"
-        class="bottom-controls-filename px-1"
+        class="bottom-controls-filename px-1 py-1"
       >
         <slot name="middle" />
       </div>
@@ -1254,10 +1255,16 @@ export default defineComponent({
   flex-wrap: nowrap;
 }
 
+.controls-bottom-layout {
+  flex-shrink: 0;
+}
+
 .bottom-controls-filename {
-  overflow: hidden;
+  overflow-x: hidden;
+  overflow-y: visible;
   white-space: nowrap;
   text-overflow: ellipsis;
+  line-height: 2;
 }
 
 .bottom-controls-row-nowrap .bottom-controls-left {

From 14d2144daef6f9afe4ffe21c066e3a18d5a15a0e Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Tue, 30 Jun 2026 13:37:59 -0400
Subject: [PATCH 3/3] truncate filename and add tooltip

---
 .../components/ControlsContainer.vue          | 12 +--
 client/src/components/controls/Controls.vue   |  5 +-
 .../controls/FileNameTimeDisplay.vue          | 82 ++++++++++++++++++-
 3 files changed, 87 insertions(+), 12 deletions(-)

diff --git a/client/dive-common/components/ControlsContainer.vue b/client/dive-common/components/ControlsContainer.vue
index afdbd8bad..c0f135df7 100644
--- a/client/dive-common/components/ControlsContainer.vue
+++ b/client/dive-common/components/ControlsContainer.vue
@@ -323,8 +323,9 @@ export default defineComponent({
         <div :class="{ 'middle-content-bottom': bottomLayout }">
           <file-name-time-display
             v-if="datasetType === 'image-sequence' || datasetType === 'large-image'"
-            class="text-middle px-3"
+            :class="bottomLayout ? 'filename-toolbar' : 'text-middle px-3'"
             display-type="filename"
+            :truncate-filename="bottomLayout"
           />
           <span v-else-if="datasetType === 'video'">
             <span class="mr-2">
@@ -513,16 +514,15 @@ export default defineComponent({
 }
 .middle-content-bottom {
   display: flex;
-  align-items: center;
+  align-items: baseline;
   white-space: nowrap;
   overflow-x: hidden;
   overflow-y: visible;
   min-width: 0;
 }
-.middle-content-bottom .text-middle {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  flex-shrink: 1;
+.middle-content-bottom .filename-toolbar {
+  flex: 1 1 auto;
   min-width: 0;
+  max-width: 100%;
 }
 </style>
diff --git a/client/src/components/controls/Controls.vue b/client/src/components/controls/Controls.vue
index 4370ef058..3bf2239a2 100644
--- a/client/src/components/controls/Controls.vue
+++ b/client/src/components/controls/Controls.vue
@@ -1260,11 +1260,12 @@ export default defineComponent({
 }
 
 .bottom-controls-filename {
+  display: flex;
+  align-items: baseline;
   overflow-x: hidden;
   overflow-y: visible;
   white-space: nowrap;
-  text-overflow: ellipsis;
-  line-height: 2;
+  min-width: 0;
 }
 
 .bottom-controls-row-nowrap .bottom-controls-left {
diff --git a/client/src/components/controls/FileNameTimeDisplay.vue b/client/src/components/controls/FileNameTimeDisplay.vue
index 9b15af20d..a98d084a8 100644
--- a/client/src/components/controls/FileNameTimeDisplay.vue
+++ b/client/src/components/controls/FileNameTimeDisplay.vue
@@ -7,9 +7,13 @@ export default defineComponent({
   name: 'FileNameTimeDisplay',
   props: {
     displayType: {
-      type: String as PropType<'filename' |'time'>,
+      type: String as PropType<'filename' | 'time'>,
       required: true,
     },
+    truncateFilename: {
+      type: Boolean,
+      default: false,
+    },
   },
   setup(props) {
     const mediaController = injectAggregateController();
@@ -33,29 +37,99 @@ export default defineComponent({
       }
       return value;
     });
+    const showFilenameTooltip = computed(
+      () => props.truncateFilename && props.displayType === 'filename',
+    );
     return {
       display,
       frame,
       currentTime,
       selectedCamera,
+      showFilenameTooltip,
     };
   },
 });
 </script>
 
 <template>
-  <span>
-    <span>
-      {{ display }}
+  <span
+    class="filename-time-display"
+    :class="{ 'filename-time-display--truncate': truncateFilename }"
+  >
+    <span
+      v-if="showFilenameTooltip"
+      class="filename-text-wrap"
+    >
+      <v-tooltip
+        bottom
+        open-delay="300"
+        :z-index="999"
+      >
+        <template #activator="{ on, attrs }">
+          <span
+            class="filename-text"
+            v-bind="attrs"
+            v-on="on"
+          >{{ display }}</span>
+        </template>
+        <span>{{ display }}</span>
+      </v-tooltip>
     </span>
+    <span
+      v-else
+      class="display-text"
+    >{{ display }}</span>
     <span class="border-radius mr-1">frame {{ frame }}</span>
   </span>
 </template>
 
 <style scoped>
+.filename-time-display {
+  vertical-align: baseline;
+  font-family: monospace;
+  font-size: 11px;
+  font-weight: bold;
+  white-space: nowrap;
+}
+
+.filename-time-display--truncate {
+  display: flex;
+  align-items: baseline;
+  min-width: 0;
+  max-width: 100%;
+  flex: 1 1 auto;
+}
+
+.filename-text-wrap {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.filename-text-wrap ::v-deep .v-tooltip {
+  display: block;
+  min-width: 0;
+}
+
+.filename-text,
+.display-text {
+  vertical-align: baseline;
+}
+
+.filename-text {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  direction: rtl;
+  text-align: left;
+  min-width: 0;
+}
+
 .border-radius {
   border: 1px solid #888888;
   padding: 2px 5px;
   border-radius: 5px;
+  margin-left: 4px;
 }
 </style>