From ff92e2c0a773544676a612fb07ccd0c0ba914489 Mon Sep 17 00:00:00 2001
From: Hatice Karatay <haticekaraty@gmail.com>
Date: Wed, 20 Dec 2023 12:00:01 -0500
Subject: [PATCH 1/8] Scroll when data menu list gets longer

---
 jdaviz/components/viewer_data_select.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/jdaviz/components/viewer_data_select.vue b/jdaviz/components/viewer_data_select.vue
index 29e65c65c4..dbfb85da6a 100644
--- a/jdaviz/components/viewer_data_select.vue
+++ b/jdaviz/components/viewer_data_select.vue
@@ -75,6 +75,7 @@
         </div>
 
         <div v-if="extraDataItems.length > 0" style="margin-bottom: -8px;">
+        <div v-if="extraDataItems.length" style="margin-bottom: -100px; height: 200px">
           <v-row key="extra-items-expand" style="padding-left: 25px; margin-right: 0px; padding-bottom: 4px; background-color: #E3F2FD"> 
             <span 
               @click="toggleShowExtraItems"

From 1eaeaf088f386c5486a9490d9407cf02da3d3c99 Mon Sep 17 00:00:00 2001
From: Hatice Karatay <haticekaraty@gmail.com>
Date: Wed, 31 Jan 2024 15:52:51 -0500
Subject: [PATCH 2/8] Add dynamic menu position update - in progress

---
 jdaviz/components/viewer_data_select.vue | 21 ++------------
 jdaviz/container.vue                     | 36 ++++++++++++++++++++----
 2 files changed, 32 insertions(+), 25 deletions(-)

diff --git a/jdaviz/components/viewer_data_select.vue b/jdaviz/components/viewer_data_select.vue
index dbfb85da6a..ef04a3a3c9 100644
--- a/jdaviz/components/viewer_data_select.vue
+++ b/jdaviz/components/viewer_data_select.vue
@@ -1,6 +1,6 @@
 <template>
   <j-tooltip v-if="menuButtonAvailable()" tipid="viewer-toolbar-data">
-    <v-menu attach offset-y :close-on-content-click="false" v-model="data_menu_open">
+    <v-menu :attach="'#target-' + viewer.id" offset-y :close-on-content-click="false" v-model="viewer.data_open">
       <template v-slot:activator="{ on, attrs }">
         <v-btn
           text 
@@ -58,24 +58,7 @@
           ></j-viewer-data-select-item>
         </v-row>
 
-        <div v-if="linkedByWcs()">
-          <j-plugin-section-header style="margin-top: 0px">Orientation</j-plugin-section-header>
-          <v-row v-for="item in wcsOnlyItems" :key="item.id" style="padding-left: 25px; margin-right: -8px; margin-top: 4px; margin-bottom: 4px">
-            <j-viewer-data-select-item
-              :item="item"
-              :icon="layer_icons[item.name]"
-              :icons="icons"
-              :viewer="viewer"
-              :multi_select="multi_select"
-              :is_wcs_only="true"
-              @data-item-remove="$emit('data-item-remove', $event)"
-              @change-reference-data="$emit('change-reference-data', $event)"
-            ></j-viewer-data-select-item>
-          </v-row>
-        </div>
-
-        <div v-if="extraDataItems.length > 0" style="margin-bottom: -8px;">
-        <div v-if="extraDataItems.length" style="margin-bottom: -100px; height: 200px">
+        <div v-if="extraDataItems.length" style="margin-bottom: -8px">
           <v-row key="extra-items-expand" style="padding-left: 25px; margin-right: 0px; padding-bottom: 4px; background-color: #E3F2FD"> 
             <span 
               @click="toggleShowExtraItems"
diff --git a/jdaviz/container.vue b/jdaviz/container.vue
index 0056126e3a..70a5392696 100644
--- a/jdaviz/container.vue
+++ b/jdaviz/container.vue
@@ -1,5 +1,6 @@
 <template>
   <component :is="stack.container">
+  <div id="scrollable-container" style="position: relative; overflow: auto;">
     <g-viewer-tab
       v-for="(child, index) in stack.children"
       :stack="child"
@@ -57,7 +58,6 @@
             <v-spacer></v-spacer>
             <jupyter-widget class='jdaviz-nested-toolbar' :widget="viewer.toolbar"></jupyter-widget>
           </v-row>
-
         </div>
 
         <v-card tile flat style="flex: 1; margin-top: -2px; overflow: hidden;">
@@ -82,13 +82,15 @@
             </div>
           </div>
 
-          <jupyter-widget
-            :widget="viewer.widget"
+          <jupyter-widget 
+            :widget="viewer.widget" 
             :ref="'viewer-widget-'+viewer.id"
             :style="'width: 100%; height: 100%; overflow: hidden; transform: rotateY('+viewer_rotateY(viewer.canvas_flip_horizontal)+') rotate('+viewer.canvas_angle+'deg)'"
-          ></jupyter-widget>
+            ></jupyter-widget>
         </v-card>
-    </gl-component>
+        <div ref="menuAttachTarget" :id="'target-' + viewer.id" style="position: absolute;"></div>
+      </gl-component>
+    </div>
   </component>
 </template>
 
@@ -114,7 +116,7 @@
 .viewer-label:hover {
   background-color: #e5e5e5;
   width: auto;
-  border-bottom-left-radius: 4px; 
+  border-bottom-left-radius: 4px;
   border-top-left-radius: 4px;
 }
 .imviz div.v-card.v-card--flat.v-sheet.v-sheet--tile {
@@ -137,7 +139,29 @@ module.exports = {
       this.$emit('resize')
     }
   },
+  mounted() {
+    let menuAttachTarget = this.$refs.menuAttachTarget[0]
+    while (menuAttachTarget && menuAttachTarget.className !== "lm_items") {
+      if (["auto"].includes(window.getComputedStyle(menuAttachTarget).overflowY)) {
+        menuAttachTarget.addEventListener("scroll", this.onScroll);
+      }
+      menuAttachTarget = menuAttachTarget.parentElement;
+    }
+  },
+
+  beforeDestroy() {
+    let menuAttachTarget = this.$refs.menuAttachTarget[0]
+    while (menuAttachTarget && menuAttachTarget.className !== "lm_items") {
+      if (["auto"].includes(window.getComputedStyle(menuAttachTarget).overflowY)) {
+        menuAttachTarget.removeEventListener("scroll", this.onScroll);
+      }
+      menuAttachTarget = menuAttachTarget.parentElement;
+    }
+  },
   methods: {
+    onScroll(e) {
+      // TODO: Complete scroll logic for the menu
+    },
     computeChildrenPath() {
       return this.$parent.computeChildrenPath();
     },

From d6af23d6348aef74d25660c14a9624b3177cb82a Mon Sep 17 00:00:00 2001
From: Hatice Karatay <haticekaraty@gmail.com>
Date: Fri, 2 Feb 2024 10:02:55 -0500
Subject: [PATCH 3/8] Menu scrolls with the viewer but location needs update

---
 jdaviz/components/viewer_data_select.vue | 124 ++++++++++++-----------
 1 file changed, 63 insertions(+), 61 deletions(-)

diff --git a/jdaviz/components/viewer_data_select.vue b/jdaviz/components/viewer_data_select.vue
index ef04a3a3c9..d21ada3986 100644
--- a/jdaviz/components/viewer_data_select.vue
+++ b/jdaviz/components/viewer_data_select.vue
@@ -1,38 +1,26 @@
 <template>
   <j-tooltip v-if="menuButtonAvailable()" tipid="viewer-toolbar-data">
-    <v-menu :attach="'#target-' + viewer.id" offset-y :close-on-content-click="false" v-model="viewer.data_open">
+    <v-menu offset-y :close-on-content-click="false" v-model="viewer.data_open">
       <template v-slot:activator="{ on, attrs }">
-        <v-btn
-          text 
-          elevation="3" 
-          v-bind="attrs" 
-          v-on="on" 
-          color="white"
-          tile
-          icon
-          outlined
-          :class="{active: data_menu_open}"
-          style="height: 42px; width: 42px">
+        <v-btn text elevation="3" v-bind="attrs" v-on="on" color="white" tile icon outlined
+          :class="{ active: data_menu_open }" style="height: 42px; width: 42px">
           <v-icon>mdi-format-list-bulleted-square</v-icon>
         </v-btn>
       </template>
-      <v-list style="max-height: 500px; width: 465px; padding-top: 0px" class="overflow-y-auto">
+      <v-list :id="'menu-content- '+ viewer.id" style="max-height: 500px; width: 465px; padding-top: 0px" class="overflow-y-auto">
         <v-row key="title" style="padding-left: 25px; margin-right: 0px; background-color: #E3F2FD">
-            <span style="overflow-wrap: anywhere; font-size: 12pt; padding-top: 6px; padding-left: 6px; font-weight: bold; color: black">
-              {{viewerTitleCase}}
-            </span>
+          <span
+            style="overflow-wrap: anywhere; font-size: 12pt; padding-top: 6px; padding-left: 6px; font-weight: bold; color: black">
+            {{ viewerTitleCase }}
+          </span>
 
-            <span style="position: absolute; right: 5px">
-              <j-tooltip :tipid="multi_select ? 'viewer-data-select-enabled' : 'viewer-data-radio-enabled'">
-                <v-btn
-                  icon
-                  @click="toggleMultiSelect"
-                  style="opacity: 0.7"
-                  >
-                    <img :src="multi_select ? icons.checktoradial : icons.radialtocheck" width="24"/>
-                </v-btn>
-              </j-tooltip>
-            </span>
+          <span style="position: absolute; right: 5px">
+            <j-tooltip :tipid="multi_select ? 'viewer-data-select-enabled' : 'viewer-data-radio-enabled'">
+              <v-btn icon @click="toggleMultiSelect" style="opacity: 0.7">
+                <img :src="multi_select ? icons.checktoradial : icons.radialtocheck" width="24" />
+              </v-btn>
+            </j-tooltip>
+          </span>
         </v-row>
 
         <v-row style="padding-left: 32px; margin-right: 0px; padding-right: 10px;
@@ -43,54 +31,43 @@
           </span>
         </v-row>
 
-        <v-row v-for="item in filteredDataItems" :key="item.id" style="padding-left: 25px; margin-right: 0px; margin-top: 4px; margin-bottom: 4px">
-          <j-viewer-data-select-item
-            :item="item"
-            :icon="layer_icons[item.name]"
-            :icons="icons"
-            :viewer="viewer"
-            :multi_select="multi_select"
-            :is_wcs_only="false"
-            :n_data_entries="nDataEntries"
+        <v-row v-for="item in filteredDataItems" :key="item.id"
+          style="padding-left: 25px; margin-right: 0px; margin-top: 4px; margin-bottom: 4px">
+          <j-viewer-data-select-item :item="item" :icon="layer_icons[item.name]" :icons="icons" :viewer="viewer"
+            :multi_select="multi_select" :is_wcs_only="false" :n_data_entries="nDataEntries"
             @data-item-visibility="$emit('data-item-visibility', $event)"
             @data-item-unload="$emit('data-item-unload', $event)"
-            @data-item-remove="$emit('data-item-remove', $event)"
-          ></j-viewer-data-select-item>
+            @data-item-remove="$emit('data-item-remove', $event)"></j-viewer-data-select-item>
         </v-row>
 
         <div v-if="extraDataItems.length" style="margin-bottom: -8px">
-          <v-row key="extra-items-expand" style="padding-left: 25px; margin-right: 0px; padding-bottom: 4px; background-color: #E3F2FD"> 
-            <span 
-              @click="toggleShowExtraItems"
-              class='text--primary'
-              style="overflow-wrap: anywhere; font-size: 12pt; padding-top: 6px; padding-left: 6px; cursor: pointer"
-            >
-              <v-icon class='invert-if-dark'>{{showExtraItems ? 'mdi-chevron-double-up' : 'mdi-chevron-double-down'}}</v-icon>
+          <v-row key="extra-items-expand"
+            style="padding-left: 25px; margin-right: 0px; padding-bottom: 4px; background-color: #E3F2FD">
+            <span @click="toggleShowExtraItems" class='text--primary'
+              style="overflow-wrap: anywhere; font-size: 12pt; padding-top: 6px; padding-left: 6px; cursor: pointer">
+              <v-icon class='invert-if-dark'>{{ showExtraItems ? 'mdi-chevron-double-up' :
+                'mdi-chevron-double-down' }}</v-icon>
               <span v-if="viewer.config === 'mosviz'">
-                {{showExtraItems ? 'hide other row data not in viewer' : 'show other row data not in viewer'}}
+                {{ showExtraItems ? 'hide other row data not in viewer' : 'show other row data not in viewer' }}
               </span>
               <span v-else>
-                {{showExtraItems ? 'hide data not in viewer' : 'show data not in viewer'}}
+                {{ showExtraItems ? 'hide data not in viewer' : 'show data not in viewer' }}
               </span>
             </span>
           </v-row>
 
-          <v-row v-if="showExtraItems" v-for="item in extraDataItems" :key="item.id" style="padding-left: 25px; margin-right: 0px; margin-top: 4px; margin-bottom: 4px">
-            <j-viewer-data-select-item
-              :item="item"
-              :icon="layer_icons[item.name]"
-              :icons="icons"
-              :viewer="viewer"
-              :multi_select="multi_select"
-              :is_wcs_only="false"
-              :n_data_entries="nDataEntries"
+          <v-row v-if="showExtraItems" v-for="item in extraDataItems" :key="item.id"
+            style="padding-left: 25px; margin-right: 0px; margin-top: 4px; margin-bottom: 4px">
+            <j-viewer-data-select-item :item="item" :icon="layer_icons[item.name]" :icons="icons" :viewer="viewer"
+              :multi_select="multi_select" :is_wcs_only="false" :n_data_entries="nDataEntries"
               @data-item-visibility="$emit('data-item-visibility', $event)"
-              @data-item-remove="$emit('data-item-remove', $event)"
-            ></j-viewer-data-select-item>
+              @data-item-remove="$emit('data-item-remove', $event)"></j-viewer-data-select-item>
           </v-row>
         </div>
       </v-list>
     </v-menu>
+    <div ref="placeholder" :id="'target-' + viewer.id"></div>
+    <div style="height: 100px"></div>
   </j-tooltip>
 </template>
 <script>
@@ -126,7 +103,32 @@ module.exports = {
       uncertTrunc: this.uncertainty,
     }
   },
+  mounted() {
+    let element = document.getElementById(`target-${this.viewer.id}`).parentElement
+    while (element["tagName"] !== "BODY") {
+      if (["auto","scroll"].includes(window.getComputedStyle(element).overflowY)) {
+        element.addEventListener("scroll", this.onScroll);
+      }
+      element = element.parentElement;
+    }
+  },
+  beforeDestroy() {
+    let element = document.getElementById(`target-${this.viewer.id}`).parentElement
+    while (element["tagName"] !== "BODY") {
+      if (["auto", "scroll"].includes(window.getComputedStyle(element).overflowY)) {
+        element.removeEventListener("scroll", this.onScroll);
+      }
+      element = element.parentElement;
+    }
+  },
   methods: {
+    onScroll(e) {
+      const top = document.getElementById(`target-${this.viewer.id}`).getBoundingClientRect().y + document.body.parentElement.scrollTop;
+      if (this.viewer.data_open && document.getElementById(`target-${this.viewer.id}`)) {
+        const menuContent = document.getElementById(`menu-content- ${this.viewer.id}`);
+        menuContent.parentElement.style.top = top + "px";
+      }
+    },
     menuButtonAvailable() {
       if (this.$props.viewer.reference === 'table-viewer') {
         return false
@@ -175,9 +177,9 @@ module.exports = {
         }
       } else if (this.$props.viewer.config === 'specviz2d') {
         if (this.$props.viewer.reference === 'spectrum-viewer') {
-          return item.ndims === 1 && item.type!=='trace' && this.dataItemInViewer(item, returnExtraItems)
+          return item.ndims === 1 && item.type !== 'trace' && this.dataItemInViewer(item, returnExtraItems)
         } else if (this.$props.viewer.reference === 'spectrum-2d-viewer') {
-          return (item.ndims === 2 || item.type==='trace') && this.dataItemInViewer(item, returnExtraItems)
+          return (item.ndims === 2 || item.type === 'trace') && this.dataItemInViewer(item, returnExtraItems)
         }
       } else if (this.$props.viewer.config === 'lcviz') {
         // TODO: generalize itemIsVisible so downstream apps can provide their own customized filters
@@ -238,7 +240,7 @@ module.exports = {
       var title = this.$props.viewer.reference || this.$props.viewer.id
       // this translates from kebab-case to human readable (individual words, in title case)
       // each word that should NOT be capitalized needs to explicitly be set here
-      return title.toLowerCase().replaceAll('-', ' ').split(' ').map((word) => {if (['vs'].indexOf(word) !== -1) {return word} else {return word.charAt(0).toUpperCase() + word.slice(1)}}).join(' ');
+      return title.toLowerCase().replaceAll('-', ' ').split(' ').map((word) => { if (['vs'].indexOf(word) !== -1) { return word } else { return word.charAt(0).toUpperCase() + word.slice(1) } }).join(' ');
     },
     showModeToggle() {
       if (this.$props.viewer.config === 'cubeviz') {

From fa00ac7f913538f20b6fee4e8c610d8dd0de9fba Mon Sep 17 00:00:00 2001
From: Hatice Karatay <haticekaraty@gmail.com>
Date: Mon, 5 Feb 2024 14:10:57 -0500
Subject: [PATCH 4/8] Sync with the main

---
 jdaviz/components/viewer_data_select.vue | 142 +++++++++++++----------
 jdaviz/container.vue                     |  36 +-----
 2 files changed, 84 insertions(+), 94 deletions(-)

diff --git a/jdaviz/components/viewer_data_select.vue b/jdaviz/components/viewer_data_select.vue
index d21ada3986..29e65c65c4 100644
--- a/jdaviz/components/viewer_data_select.vue
+++ b/jdaviz/components/viewer_data_select.vue
@@ -1,26 +1,38 @@
 <template>
   <j-tooltip v-if="menuButtonAvailable()" tipid="viewer-toolbar-data">
-    <v-menu offset-y :close-on-content-click="false" v-model="viewer.data_open">
+    <v-menu attach offset-y :close-on-content-click="false" v-model="data_menu_open">
       <template v-slot:activator="{ on, attrs }">
-        <v-btn text elevation="3" v-bind="attrs" v-on="on" color="white" tile icon outlined
-          :class="{ active: data_menu_open }" style="height: 42px; width: 42px">
+        <v-btn
+          text 
+          elevation="3" 
+          v-bind="attrs" 
+          v-on="on" 
+          color="white"
+          tile
+          icon
+          outlined
+          :class="{active: data_menu_open}"
+          style="height: 42px; width: 42px">
           <v-icon>mdi-format-list-bulleted-square</v-icon>
         </v-btn>
       </template>
-      <v-list :id="'menu-content- '+ viewer.id" style="max-height: 500px; width: 465px; padding-top: 0px" class="overflow-y-auto">
+      <v-list style="max-height: 500px; width: 465px; padding-top: 0px" class="overflow-y-auto">
         <v-row key="title" style="padding-left: 25px; margin-right: 0px; background-color: #E3F2FD">
-          <span
-            style="overflow-wrap: anywhere; font-size: 12pt; padding-top: 6px; padding-left: 6px; font-weight: bold; color: black">
-            {{ viewerTitleCase }}
-          </span>
+            <span style="overflow-wrap: anywhere; font-size: 12pt; padding-top: 6px; padding-left: 6px; font-weight: bold; color: black">
+              {{viewerTitleCase}}
+            </span>
 
-          <span style="position: absolute; right: 5px">
-            <j-tooltip :tipid="multi_select ? 'viewer-data-select-enabled' : 'viewer-data-radio-enabled'">
-              <v-btn icon @click="toggleMultiSelect" style="opacity: 0.7">
-                <img :src="multi_select ? icons.checktoradial : icons.radialtocheck" width="24" />
-              </v-btn>
-            </j-tooltip>
-          </span>
+            <span style="position: absolute; right: 5px">
+              <j-tooltip :tipid="multi_select ? 'viewer-data-select-enabled' : 'viewer-data-radio-enabled'">
+                <v-btn
+                  icon
+                  @click="toggleMultiSelect"
+                  style="opacity: 0.7"
+                  >
+                    <img :src="multi_select ? icons.checktoradial : icons.radialtocheck" width="24"/>
+                </v-btn>
+              </j-tooltip>
+            </span>
         </v-row>
 
         <v-row style="padding-left: 32px; margin-right: 0px; padding-right: 10px;
@@ -31,43 +43,70 @@
           </span>
         </v-row>
 
-        <v-row v-for="item in filteredDataItems" :key="item.id"
-          style="padding-left: 25px; margin-right: 0px; margin-top: 4px; margin-bottom: 4px">
-          <j-viewer-data-select-item :item="item" :icon="layer_icons[item.name]" :icons="icons" :viewer="viewer"
-            :multi_select="multi_select" :is_wcs_only="false" :n_data_entries="nDataEntries"
+        <v-row v-for="item in filteredDataItems" :key="item.id" style="padding-left: 25px; margin-right: 0px; margin-top: 4px; margin-bottom: 4px">
+          <j-viewer-data-select-item
+            :item="item"
+            :icon="layer_icons[item.name]"
+            :icons="icons"
+            :viewer="viewer"
+            :multi_select="multi_select"
+            :is_wcs_only="false"
+            :n_data_entries="nDataEntries"
             @data-item-visibility="$emit('data-item-visibility', $event)"
             @data-item-unload="$emit('data-item-unload', $event)"
-            @data-item-remove="$emit('data-item-remove', $event)"></j-viewer-data-select-item>
+            @data-item-remove="$emit('data-item-remove', $event)"
+          ></j-viewer-data-select-item>
         </v-row>
 
-        <div v-if="extraDataItems.length" style="margin-bottom: -8px">
-          <v-row key="extra-items-expand"
-            style="padding-left: 25px; margin-right: 0px; padding-bottom: 4px; background-color: #E3F2FD">
-            <span @click="toggleShowExtraItems" class='text--primary'
-              style="overflow-wrap: anywhere; font-size: 12pt; padding-top: 6px; padding-left: 6px; cursor: pointer">
-              <v-icon class='invert-if-dark'>{{ showExtraItems ? 'mdi-chevron-double-up' :
-                'mdi-chevron-double-down' }}</v-icon>
+        <div v-if="linkedByWcs()">
+          <j-plugin-section-header style="margin-top: 0px">Orientation</j-plugin-section-header>
+          <v-row v-for="item in wcsOnlyItems" :key="item.id" style="padding-left: 25px; margin-right: -8px; margin-top: 4px; margin-bottom: 4px">
+            <j-viewer-data-select-item
+              :item="item"
+              :icon="layer_icons[item.name]"
+              :icons="icons"
+              :viewer="viewer"
+              :multi_select="multi_select"
+              :is_wcs_only="true"
+              @data-item-remove="$emit('data-item-remove', $event)"
+              @change-reference-data="$emit('change-reference-data', $event)"
+            ></j-viewer-data-select-item>
+          </v-row>
+        </div>
+
+        <div v-if="extraDataItems.length > 0" style="margin-bottom: -8px;">
+          <v-row key="extra-items-expand" style="padding-left: 25px; margin-right: 0px; padding-bottom: 4px; background-color: #E3F2FD"> 
+            <span 
+              @click="toggleShowExtraItems"
+              class='text--primary'
+              style="overflow-wrap: anywhere; font-size: 12pt; padding-top: 6px; padding-left: 6px; cursor: pointer"
+            >
+              <v-icon class='invert-if-dark'>{{showExtraItems ? 'mdi-chevron-double-up' : 'mdi-chevron-double-down'}}</v-icon>
               <span v-if="viewer.config === 'mosviz'">
-                {{ showExtraItems ? 'hide other row data not in viewer' : 'show other row data not in viewer' }}
+                {{showExtraItems ? 'hide other row data not in viewer' : 'show other row data not in viewer'}}
               </span>
               <span v-else>
-                {{ showExtraItems ? 'hide data not in viewer' : 'show data not in viewer' }}
+                {{showExtraItems ? 'hide data not in viewer' : 'show data not in viewer'}}
               </span>
             </span>
           </v-row>
 
-          <v-row v-if="showExtraItems" v-for="item in extraDataItems" :key="item.id"
-            style="padding-left: 25px; margin-right: 0px; margin-top: 4px; margin-bottom: 4px">
-            <j-viewer-data-select-item :item="item" :icon="layer_icons[item.name]" :icons="icons" :viewer="viewer"
-              :multi_select="multi_select" :is_wcs_only="false" :n_data_entries="nDataEntries"
+          <v-row v-if="showExtraItems" v-for="item in extraDataItems" :key="item.id" style="padding-left: 25px; margin-right: 0px; margin-top: 4px; margin-bottom: 4px">
+            <j-viewer-data-select-item
+              :item="item"
+              :icon="layer_icons[item.name]"
+              :icons="icons"
+              :viewer="viewer"
+              :multi_select="multi_select"
+              :is_wcs_only="false"
+              :n_data_entries="nDataEntries"
               @data-item-visibility="$emit('data-item-visibility', $event)"
-              @data-item-remove="$emit('data-item-remove', $event)"></j-viewer-data-select-item>
+              @data-item-remove="$emit('data-item-remove', $event)"
+            ></j-viewer-data-select-item>
           </v-row>
         </div>
       </v-list>
     </v-menu>
-    <div ref="placeholder" :id="'target-' + viewer.id"></div>
-    <div style="height: 100px"></div>
   </j-tooltip>
 </template>
 <script>
@@ -103,32 +142,7 @@ module.exports = {
       uncertTrunc: this.uncertainty,
     }
   },
-  mounted() {
-    let element = document.getElementById(`target-${this.viewer.id}`).parentElement
-    while (element["tagName"] !== "BODY") {
-      if (["auto","scroll"].includes(window.getComputedStyle(element).overflowY)) {
-        element.addEventListener("scroll", this.onScroll);
-      }
-      element = element.parentElement;
-    }
-  },
-  beforeDestroy() {
-    let element = document.getElementById(`target-${this.viewer.id}`).parentElement
-    while (element["tagName"] !== "BODY") {
-      if (["auto", "scroll"].includes(window.getComputedStyle(element).overflowY)) {
-        element.removeEventListener("scroll", this.onScroll);
-      }
-      element = element.parentElement;
-    }
-  },
   methods: {
-    onScroll(e) {
-      const top = document.getElementById(`target-${this.viewer.id}`).getBoundingClientRect().y + document.body.parentElement.scrollTop;
-      if (this.viewer.data_open && document.getElementById(`target-${this.viewer.id}`)) {
-        const menuContent = document.getElementById(`menu-content- ${this.viewer.id}`);
-        menuContent.parentElement.style.top = top + "px";
-      }
-    },
     menuButtonAvailable() {
       if (this.$props.viewer.reference === 'table-viewer') {
         return false
@@ -177,9 +191,9 @@ module.exports = {
         }
       } else if (this.$props.viewer.config === 'specviz2d') {
         if (this.$props.viewer.reference === 'spectrum-viewer') {
-          return item.ndims === 1 && item.type !== 'trace' && this.dataItemInViewer(item, returnExtraItems)
+          return item.ndims === 1 && item.type!=='trace' && this.dataItemInViewer(item, returnExtraItems)
         } else if (this.$props.viewer.reference === 'spectrum-2d-viewer') {
-          return (item.ndims === 2 || item.type === 'trace') && this.dataItemInViewer(item, returnExtraItems)
+          return (item.ndims === 2 || item.type==='trace') && this.dataItemInViewer(item, returnExtraItems)
         }
       } else if (this.$props.viewer.config === 'lcviz') {
         // TODO: generalize itemIsVisible so downstream apps can provide their own customized filters
@@ -240,7 +254,7 @@ module.exports = {
       var title = this.$props.viewer.reference || this.$props.viewer.id
       // this translates from kebab-case to human readable (individual words, in title case)
       // each word that should NOT be capitalized needs to explicitly be set here
-      return title.toLowerCase().replaceAll('-', ' ').split(' ').map((word) => { if (['vs'].indexOf(word) !== -1) { return word } else { return word.charAt(0).toUpperCase() + word.slice(1) } }).join(' ');
+      return title.toLowerCase().replaceAll('-', ' ').split(' ').map((word) => {if (['vs'].indexOf(word) !== -1) {return word} else {return word.charAt(0).toUpperCase() + word.slice(1)}}).join(' ');
     },
     showModeToggle() {
       if (this.$props.viewer.config === 'cubeviz') {
diff --git a/jdaviz/container.vue b/jdaviz/container.vue
index 70a5392696..0056126e3a 100644
--- a/jdaviz/container.vue
+++ b/jdaviz/container.vue
@@ -1,6 +1,5 @@
 <template>
   <component :is="stack.container">
-  <div id="scrollable-container" style="position: relative; overflow: auto;">
     <g-viewer-tab
       v-for="(child, index) in stack.children"
       :stack="child"
@@ -58,6 +57,7 @@
             <v-spacer></v-spacer>
             <jupyter-widget class='jdaviz-nested-toolbar' :widget="viewer.toolbar"></jupyter-widget>
           </v-row>
+
         </div>
 
         <v-card tile flat style="flex: 1; margin-top: -2px; overflow: hidden;">
@@ -82,15 +82,13 @@
             </div>
           </div>
 
-          <jupyter-widget 
-            :widget="viewer.widget" 
+          <jupyter-widget
+            :widget="viewer.widget"
             :ref="'viewer-widget-'+viewer.id"
             :style="'width: 100%; height: 100%; overflow: hidden; transform: rotateY('+viewer_rotateY(viewer.canvas_flip_horizontal)+') rotate('+viewer.canvas_angle+'deg)'"
-            ></jupyter-widget>
+          ></jupyter-widget>
         </v-card>
-        <div ref="menuAttachTarget" :id="'target-' + viewer.id" style="position: absolute;"></div>
-      </gl-component>
-    </div>
+    </gl-component>
   </component>
 </template>
 
@@ -116,7 +114,7 @@
 .viewer-label:hover {
   background-color: #e5e5e5;
   width: auto;
-  border-bottom-left-radius: 4px;
+  border-bottom-left-radius: 4px; 
   border-top-left-radius: 4px;
 }
 .imviz div.v-card.v-card--flat.v-sheet.v-sheet--tile {
@@ -139,29 +137,7 @@ module.exports = {
       this.$emit('resize')
     }
   },
-  mounted() {
-    let menuAttachTarget = this.$refs.menuAttachTarget[0]
-    while (menuAttachTarget && menuAttachTarget.className !== "lm_items") {
-      if (["auto"].includes(window.getComputedStyle(menuAttachTarget).overflowY)) {
-        menuAttachTarget.addEventListener("scroll", this.onScroll);
-      }
-      menuAttachTarget = menuAttachTarget.parentElement;
-    }
-  },
-
-  beforeDestroy() {
-    let menuAttachTarget = this.$refs.menuAttachTarget[0]
-    while (menuAttachTarget && menuAttachTarget.className !== "lm_items") {
-      if (["auto"].includes(window.getComputedStyle(menuAttachTarget).overflowY)) {
-        menuAttachTarget.removeEventListener("scroll", this.onScroll);
-      }
-      menuAttachTarget = menuAttachTarget.parentElement;
-    }
-  },
   methods: {
-    onScroll(e) {
-      // TODO: Complete scroll logic for the menu
-    },
     computeChildrenPath() {
       return this.$parent.computeChildrenPath();
     },

From 625800ae0ac9ace73ce666f517eb2e0e59c0bb43 Mon Sep 17 00:00:00 2001
From: Hatice Karatay <haticekaraty@gmail.com>
Date: Mon, 5 Feb 2024 14:25:53 -0500
Subject: [PATCH 5/8] Dynamically position the menu with the button

---
 jdaviz/components/viewer_data_select.vue | 32 ++++++++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

diff --git a/jdaviz/components/viewer_data_select.vue b/jdaviz/components/viewer_data_select.vue
index 29e65c65c4..af6bf2bb4a 100644
--- a/jdaviz/components/viewer_data_select.vue
+++ b/jdaviz/components/viewer_data_select.vue
@@ -1,8 +1,9 @@
 <template>
   <j-tooltip v-if="menuButtonAvailable()" tipid="viewer-toolbar-data">
-    <v-menu attach offset-y :close-on-content-click="false" v-model="data_menu_open">
+    <v-menu offset-y :close-on-content-click="false" v-model="data_menu_open">
       <template v-slot:activator="{ on, attrs }">
         <v-btn
+          id="menu-button"
           text 
           elevation="3" 
           v-bind="attrs" 
@@ -16,7 +17,7 @@
           <v-icon>mdi-format-list-bulleted-square</v-icon>
         </v-btn>
       </template>
-      <v-list style="max-height: 500px; width: 465px; padding-top: 0px" class="overflow-y-auto">
+      <v-list :id="'menu-content-' + viewer.id" style="max-height: 500px; width: 465px; padding-top: 0px" class="overflow-y-auto">
         <v-row key="title" style="padding-left: 25px; margin-right: 0px; background-color: #E3F2FD">
             <span style="overflow-wrap: anywhere; font-size: 12pt; padding-top: 6px; padding-left: 6px; font-weight: bold; color: black">
               {{viewerTitleCase}}
@@ -107,6 +108,7 @@
         </div>
       </v-list>
     </v-menu>
+    <div ref="placeholder" :id="'target-' + viewer.id"></div>
   </j-tooltip>
 </template>
 <script>
@@ -142,7 +144,33 @@ module.exports = {
       uncertTrunc: this.uncertainty,
     }
   },
+  mounted() {
+    let element = document.getElementById(`target-${this.viewer.id}`).parentElement
+    while (element["tagName"] !== "BODY") {
+      if (["auto", "scroll"].includes(window.getComputedStyle(element).overflowY)) {
+        element.addEventListener("scroll", this.onScroll);
+      }
+      element = element.parentElement;
+    }
+  },
+  beforeDestroy() {
+    let element = document.getElementById(`target-${this.viewer.id}`).parentElement
+    while (element["tagName"] !== "BODY") {
+      if (["auto", "scroll"].includes(window.getComputedStyle(element).overflowY)) {
+        element.removeEventListener("scroll", this.onScroll);
+      }
+      element = element.parentElement;
+    }
+  },
   methods: {
+    onScroll(e) {
+      const dataMenuHeight = document.getElementById("menu-button").parentElement.getBoundingClientRect().height
+      const top = document.getElementById(`target-${this.viewer.id}`).getBoundingClientRect().y + document.body.parentElement.scrollTop + dataMenuHeight;
+      if (this.data_menu_open && document.getElementById(`target-${this.viewer.id}`)) {
+        const menuContent = document.getElementById(`menu-content-${this.viewer.id}`);
+        menuContent.parentElement.style.top = top + "px";
+      }
+    },
     menuButtonAvailable() {
       if (this.$props.viewer.reference === 'table-viewer') {
         return false

From 01e75802832f17a68d31fa2000faba346ffb5398 Mon Sep 17 00:00:00 2001
From: Hatice Karatay <haticekaraty@gmail.com>
Date: Mon, 5 Feb 2024 15:44:49 -0500
Subject: [PATCH 6/8] Add a change log

---
 CHANGES.rst | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGES.rst b/CHANGES.rst
index 84f3db0bc2..95637f44e4 100644
--- a/CHANGES.rst
+++ b/CHANGES.rst
@@ -116,6 +116,8 @@ Bug Fixes
 * Viewer data-menu is no-longer synced between different instances of the app to avoid recursion
   between click events. [#2670]
 
+* Fix data-menu cutoff in smaller viewers, ensuring full visibility regardless of viewer dimensions. [#2630]
+
 Cubeviz
 ^^^^^^^
 - Fixes Spectral Extraction's assumptions of one data per viewer, and flux data only in

From bab8f5faba2e091eaf238a20bf49bc903f86f281 Mon Sep 17 00:00:00 2001
From: Hatice Karatay <haticekaraty@gmail.com>
Date: Mon, 5 Feb 2024 16:05:15 -0500
Subject: [PATCH 7/8] Remove redundant ref

---
 jdaviz/components/viewer_data_select.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/jdaviz/components/viewer_data_select.vue b/jdaviz/components/viewer_data_select.vue
index af6bf2bb4a..f80eeb0175 100644
--- a/jdaviz/components/viewer_data_select.vue
+++ b/jdaviz/components/viewer_data_select.vue
@@ -108,7 +108,7 @@
         </div>
       </v-list>
     </v-menu>
-    <div ref="placeholder" :id="'target-' + viewer.id"></div>
+    <div :id="'target-' + viewer.id"></div>
   </j-tooltip>
 </template>
 <script>

From a3817ca361a5919b777a452d66b973596dace38a Mon Sep 17 00:00:00 2001
From: Hatice Karatay <haticekaraty@gmail.com>
Date: Tue, 6 Feb 2024 10:15:09 -0500
Subject: [PATCH 8/8] Add unique viewer IDs to buttons for improved specificity

---
 jdaviz/components/viewer_data_select.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/jdaviz/components/viewer_data_select.vue b/jdaviz/components/viewer_data_select.vue
index f80eeb0175..bde3092dcf 100644
--- a/jdaviz/components/viewer_data_select.vue
+++ b/jdaviz/components/viewer_data_select.vue
@@ -3,7 +3,7 @@
     <v-menu offset-y :close-on-content-click="false" v-model="data_menu_open">
       <template v-slot:activator="{ on, attrs }">
         <v-btn
-          id="menu-button"
+          :id="'menu-button-'+ viewer.id"
           text 
           elevation="3" 
           v-bind="attrs" 
@@ -164,7 +164,7 @@ module.exports = {
   },
   methods: {
     onScroll(e) {
-      const dataMenuHeight = document.getElementById("menu-button").parentElement.getBoundingClientRect().height
+      const dataMenuHeight = document.getElementById(`menu-button-${this.viewer.id}`).parentElement.getBoundingClientRect().height
       const top = document.getElementById(`target-${this.viewer.id}`).getBoundingClientRect().y + document.body.parentElement.scrollTop + dataMenuHeight;
       if (this.data_menu_open && document.getElementById(`target-${this.viewer.id}`)) {
         const menuContent = document.getElementById(`menu-content-${this.viewer.id}`);