Determine overflow on tab not parent level

Author: guerler

client/src/components/Dataset/DatasetView.vue

@@ -100,7 +100,7 @@ watch(
 
 <template>
     <LoadingSpan v-if="isLoading || !dataset" message="Loading dataset details" />
-    <div v-else class="dataset-view d-flex flex-column h-100">
+    <div v-else class="dataset-view d-flex flex-column">
         <header v-if="!displayOnly" :key="`dataset-header-${dataset.id}`" class="dataset-header flex-shrink-0">
             <div class="d-flex">
                 <Heading
@@ -188,7 +188,7 @@ watch(
                 <FontAwesomeIcon :icon="faBug" class="mr-1" /> Error
             </BNavItem>
         </BNav>
-        <div v-if="tab === 'preview'" class="h-100 overflow-auto">
+        <div v-if="tab === 'preview'" class="tab-content-panel">
             <VisualizationFrame
                 v-if="preferredVisualization"
                 :dataset-id="datasetId"
@@ -211,7 +211,7 @@ watch(
                 class="p-3" />
             <DatasetDisplay v-else :dataset-id="datasetId" :is-binary="isBinaryDataset" @load="iframeLoading = false" />
         </div>
-        <div v-else-if="tab === 'raw'" class="h-100 overflow-auto">
+        <div v-else-if="tab === 'raw'" class="tab-content-panel">
             <div v-if="isAutoDownloadType && !isPdfDataset" class="auto-download-message p-4">
                 <div class="alert alert-info">
                     <h4>Download Required</h4>
@@ -307,8 +307,7 @@ watch(
 .tab-content-panel {
     display: flex;
     flex-direction: column;
-    overflow: hidden;
-    overflow-y: auto;
+    overflow: auto;
     height: 100%;
 }
 

client/src/components/DatasetInformation/DatasetAttributes.vue

@@ -91,7 +91,7 @@ onMounted(async () => {
 </script>
 
 <template>
-    <div aria-labelledby="dataset-attributes-heading">
+    <div class="dataset-attributes" aria-labelledby="dataset-attributes-heading">
         <Heading id="dataset-attributes-heading" h1 separator inline size="md">
             {{ localize("Edit Dataset Attributes") }}
         </Heading>
@@ -230,3 +230,10 @@ onMounted(async () => {
         </div>
     </div>
 </template>
+
+<style>
+.dataset-attributes {
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+</style>

client/src/components/DatasetInformation/DatasetDetails.vue

@@ -155,7 +155,8 @@ onUnmounted(() => {
     display: flex;
     flex-direction: column;
     gap: 1rem;
-
+    overflow-x: hidden;
+    overflow-y: auto;
     .dataset-peek {
         word-break: break-all;
     }

client/src/entry/analysis/modules/CenterFrame.vue

@@ -34,7 +34,7 @@ function onLoad(ev: Event) {
 }
 </script>
 <template>
-    <div class="h-100">
+    <div class="h-100 overflow-hidden">
         <LoadingSpan v-if="isLoading">Loading ...</LoadingSpan>
         <iframe
             :id="id"