Merge pull request #5541 from avalonmediasystem/itemview-tab-height

Let tabs in itemview page span the column height
avalonmediasystem · Dec 22, 2023 · d4a9eed · d4a9eed
2 parents c7aaccc + 60ac83f
commit d4a9eed
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 9 deletions.
diff --git a/app/javascript/components/MediaObjectRamp.jsx b/app/javascript/components/MediaObjectRamp.jsx
@@ -217,7 +217,7 @@ const Ramp = ({
               )
           }
         </Col>
-        <Col sm={ (master_files_count == 0) ? 12 : 4}>
+        <Col sm={ (master_files_count == 0) ? 12 : 4} className="ramp--tabs-panel">
           { cdl.enabled && <div dangerouslySetInnerHTML={{ __html: cdl.destroy }}/> }
           <Tabs>
             <Tab eventKey="details" title="Details">

diff --git a/app/javascript/components/Ramp.scss b/app/javascript/components/Ramp.scss
@@ -157,12 +157,24 @@
     }
   }
 
-  .tab-pane {
-    padding:1rem;
-    border-bottom-left-radius: 0.25rem;
-    border-bottom-right-radius: 0.25rem;
-    max-height: 75vh;
-    overflow: auto;
+  .ramp--tabs-panel {
+    display: flex;
+    flex-direction: column;
+
+    .tab-content {
+      display: flex;
+      flex: 1;
+      height: 100%;
+    }
+
+    .tab-pane {
+      flex: 1;
+      padding:1rem;
+      border-bottom-left-radius: 0.25rem;
+      border-bottom-right-radius: 0.25rem;
+      max-height: inherit;
+      overflow: auto;
+    }
   }
 
   // Remove double scroll-bar for transcripts tab
@@ -181,15 +193,16 @@
   /* Override Ramp styling */
   .ramp--metadata-display {
     min-width: fit-content !important;
+    height: 100%;
 
     .ramp--metadata-display-content {
       padding: 0;
-      max-height: inherit;
+      max-height: 50rem;
     }
   }
 
   .ramp--transcript_nav {
-    max-height: 72vh;
+    max-height: 50rem;
     display: flex;
     flex-direction: column;
     padding: 0;