diff --git a/app/javascript/components/MediaObjectRamp.jsx b/app/javascript/components/MediaObjectRamp.jsx
index 738e7d3c97..8ad5acffff 100644
--- a/app/javascript/components/MediaObjectRamp.jsx
+++ b/app/javascript/components/MediaObjectRamp.jsx
@@ -217,7 +217,7 @@ const Ramp = ({
)
}
-
+
{ cdl.enabled && }
diff --git a/app/javascript/components/Ramp.scss b/app/javascript/components/Ramp.scss
index 3e3c7a2ce2..b57c50e62f 100644
--- 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;