From 60ac83fd17aebd98de1a0b140dc6bd7753210c7f Mon Sep 17 00:00:00 2001
From: dananji <dwithana@iu.edu>
Date: Wed, 20 Dec 2023 12:24:21 -0800
Subject: [PATCH] Let tabs in itemview page span the column height

---
 app/javascript/components/MediaObjectRamp.jsx |  2 +-
 app/javascript/components/Ramp.scss           | 29 ++++++++++++++-----
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/app/javascript/components/MediaObjectRamp.jsx b/app/javascript/components/MediaObjectRamp.jsx
index 53d934b272..548edf364c 100644
--- 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
index 6123bd8c47..6b4693a1ff 100644
--- a/app/javascript/components/Ramp.scss
+++ b/app/javascript/components/Ramp.scss
@@ -163,12 +163,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
@@ -187,15 +199,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;