Fixes design issues in metadata panel

RELEASE.md

@@ -5,6 +5,12 @@
 - Use present tense (e.g. 'Add new feature')
 - Include the ID number for the related PR (or PRs) in parentheses
 -->
+# Upcoming Release
+
+## Bug fixes and other changes
+
+- Fixes design issues in metadata panel. (#2009)
+
 # Release 9.2.0
 
 ## Major features and improvements

src/components/metadata/metadata.js

@@ -284,7 +284,7 @@ const MetaData = ({
                   >
                     <ExpandIcon className="pipeline-metadata__link-icon"></ExpandIcon>
                     <span className="pipeline-metadata__link-text">
-                      Expand Plotly Visualization
+                      Expand Preview
                     </span>
                   </button>
                 </>
@@ -307,7 +307,7 @@ const MetaData = ({
                   >
                     <ExpandIcon className="pipeline-metadata__link-icon"></ExpandIcon>
                     <span className="pipeline-metadata__link-text">
-                      Expand Matplotlib Image
+                      Expand Preview
                     </span>
                   </button>
                 </>
@@ -346,7 +346,7 @@ const MetaData = ({
                   >
                     <ExpandIcon className="pipeline-metadata__link-icon"></ExpandIcon>
                     <span className="pipeline-metadata__link-text">
-                      Expand Preview Table
+                      Expand Preview
                     </span>
                   </button>
                 </>
@@ -369,7 +369,7 @@ const MetaData = ({
                   >
                     <ExpandIcon className="pipeline-metadata__link-icon"></ExpandIcon>
                     <span className="pipeline-metadata__link-text">
-                      Expand JSON View
+                      Expand Preview
                     </span>
                   </button>
                 </>

src/components/metadata/styles/metadata-code.scss

@@ -26,7 +26,7 @@
   padding: 0 variables.$metadata-sidebar-width-open 0 0;
   transform: translateX(100vw);
   transition: transform ease 0.5s 0.1s, left ease 0.5s;
-  z-index: 2;
+  z-index: 4;
 
   &--visible {
     transform: translateX(variables.$global-toolbar-width);

src/components/metadata/styles/metadata.scss

@@ -28,7 +28,7 @@
   top: -1px; /* Avoids pixel rounding gaps */
   right: -1px;
   bottom: -1px;
-  z-index: 2;
+  z-index: 4;
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -69,15 +69,14 @@
 .pipeline-metadata__header {
   display: flex;
   justify-content: space-between;
-  margin-top: -0.12em;
 }
 
 .pipeline-metadata__header-toolbox {
   position: relative;
   display: flex;
   flex-direction: column-reverse;
   justify-content: space-between;
-  margin: 3em 3.6em;
+  margin: 3.2em 3.6em;
   padding-right: 24px;
 }
 
@@ -261,12 +260,12 @@ $list-inline-spacing: 0.2em;
 .pipeline-metadata__link-icon {
   width: 1.9em;
   height: 1.9em;
-  margin: 0 6px 0 36px;
+  margin: 0 0.8em 0 0;
   fill: var(--color-button-text);
 }
 
 .pipeline-metadata__link-text {
-  margin: 12px 10px 12px 5px;
+  margin: 18px 0;
   color: var(--color-button-text);
   font-size: 1.6em;
 }
@@ -281,14 +280,14 @@ $list-inline-spacing: 0.2em;
 .pipeline-metadata__preview {
   background: var(--color-metadata-preview-bg);
   height: 300px;
-  overflow: hidden;
+  overflow: scroll;
   position: relative;
 }
 
 .pipeline-metadata__preview-json {
   background: var(--color-metadata-preview-bg);
   height: 300px;
-  overflow: hidden;
+  overflow: scroll;
   position: relative;
   padding: 10px 20px 0;
 }

src/components/ui/command-copier/command-copier.scss

@@ -43,6 +43,7 @@
   margin-top: 0.3em;
   margin-right: -0.6em;
   opacity: 0.55;
+  padding-left: 24px;
 
   .pipeline-icon {
     width: 26px;

src/components/ui/toggle/toggle.scss

@@ -22,6 +22,7 @@
   margin-top: 0.3em;
   margin-bottom: 2em;
   transition: opacity 0.2s ease;
+  display: flex;
 }
 
 .pipeline-toggle--no-hasCode {
@@ -41,7 +42,7 @@
 
 .pipeline-toggle-label {
   position: relative;
-  padding: 0 0 0 2.8em;
+  padding: 0 0 0 2.2em;
   cursor: pointer;
   user-select: none;
   color: var(--color-toggle-off-label);