Fix the height of the buttons in the ribbon (#1843)

* Make the height of the first buttons the same as the rest of the ribbon list

* Make everything the same height

Author: sroy3

webview/src/plots/components/ribbon/Ribbon.tsx

@@ -35,14 +35,14 @@ export const Ribbon: React.FC<RibbonProps> = ({ revisions }) => {
 
   return (
     <ul className={styles.list} data-testid="ribbon">
-      <li className={styles.addButtonWrapper}>
+      <li className={styles.buttonWrapper}>
         <IconButton
           onClick={selectRevisions}
           icon={AllIcons.LINES}
           text={`${revisions.length} of ${MAX_NB_EXP}`}
         />
       </li>
-      <li className={styles.addButtonWrapper}>
+      <li className={styles.buttonWrapper}>
         <IconButton
           onClick={refreshRevisions}
           icon={AllIcons.REFRESH}

webview/src/plots/components/ribbon/styles.module.scss

@@ -10,7 +10,6 @@
 .block {
   border-left-style: solid;
   border-left-width: 3px;
-  padding: 4px;
   background-color: $header-bg-color;
   color: $fg-color;
   display: inline-flex;
@@ -31,7 +30,8 @@
 }
 
 .label {
-  height: 30px;
+  height: 26px;
+  padding: 2px 4px;
   background-color: transparent;
   border: none;
   text-align: left;
@@ -40,17 +40,20 @@
   flex-direction: column;
   justify-content: center;
   min-width: max-content;
+  line-height: 1.1;
 }
 
 .title {
   display: inline-flex;
   align-items: center;
   padding-right: 15px;
   position: relative;
+  font-size: 0.8rem;
 }
 
 .subtitle {
   color: $watermark-color;
+  font-size: 0.5625rem;
 }
 
 .clearButton {
@@ -78,7 +81,6 @@
   flex-wrap: wrap;
 }
 
-.addButtonWrapper {
-  background-color: $accent-color;
+.buttonWrapper {
   list-style: none;
 }