Fixed: Consistent icon position for toolbar buttons

Co-Authored-By: Mark McDowall <markus101@users.noreply.github.com>

frontend/src/Components/Menu/ToolbarMenuButton.css

@@ -1,11 +1,16 @@
 .menuButton {
   composes: menuButton from '~./MenuButton.css';
 
+  padding-top: 4px;
   width: $toolbarButtonWidth;
   height: $toolbarHeight;
   text-align: center;
 }
 
+.labelContainer {
+  composes: labelContainer from '~Components/Page/Toolbar/PageToolbarButton.css';
+}
+
 .label {
   composes: label from '~Components/Page/Toolbar/PageToolbarButton.css';
 }

frontend/src/Components/Menu/ToolbarMenuButton.js

@@ -22,10 +22,12 @@ function ToolbarMenuButton(props) {
           size={21}
         />
 
+        <div className={styles.labelContainer}>
           <div className={styles.label}>
             {text}
           </div>
         </div>
+      </div>
     </MenuButton>
   );
 }

frontend/src/Components/Page/Toolbar/PageToolbarButton.css

@@ -1,6 +1,7 @@
 .toolbarButton {
   composes: link from '~Components/Link/Link.css';
 
+  padding-top: 4px;
   width: $toolbarButtonWidth;
   text-align: center;
 
@@ -21,7 +22,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  min-height: 16px;
+  height: 24px;
 }
 
 .label {

frontend/src/Components/Page/Toolbar/PageToolbarSection.css

@@ -6,7 +6,7 @@
 
 .section {
   display: flex;
-  align-items: center;
+  align-items: stretch;
   flex-grow: 1;
 }