Fix panel icon alignment (again)

previous fixes were on a specified font size.
had to fix the viewbox to span the full path to make its alignment accurate

Author: eps1lon

packages/react-devtools-shared/src/devtools/views/ButtonIcon.js

@@ -52,7 +52,7 @@ type Props = {
   type: IconType,
 };
 
-const panelIcons = '0 -960 960 820';
+const panelIconsViewBox = '144 -816 672 672';
 export default function ButtonIcon({className = '', type}: Props): React.Node {
   let pathData = null;
   let viewBox = '0 0 24 24';
@@ -131,27 +131,27 @@ export default function ButtonIcon({className = '', type}: Props): React.Node {
       break;
     case 'panel-left-close':
       pathData = PATH_MATERIAL_PANEL_LEFT_CLOSE;
-      viewBox = panelIcons;
+      viewBox = panelIconsViewBox;
       break;
     case 'panel-left-open':
       pathData = PATH_MATERIAL_PANEL_LEFT_OPEN;
-      viewBox = panelIcons;
+      viewBox = panelIconsViewBox;
       break;
     case 'panel-right-close':
       pathData = PATH_MATERIAL_PANEL_RIGHT_CLOSE;
-      viewBox = panelIcons;
+      viewBox = panelIconsViewBox;
       break;
     case 'panel-right-open':
       pathData = PATH_MATERIAL_PANEL_RIGHT_OPEN;
-      viewBox = panelIcons;
+      viewBox = panelIconsViewBox;
       break;
     case 'panel-bottom-open':
       pathData = PATH_MATERIAL_PANEL_BOTTOM_OPEN;
-      viewBox = panelIcons;
+      viewBox = panelIconsViewBox;
       break;
     case 'panel-bottom-close':
       pathData = PATH_MATERIAL_PANEL_BOTTOM_CLOSE;
-      viewBox = panelIcons;
+      viewBox = panelIconsViewBox;
       break;
     case 'suspend':
       pathData = PATH_SUSPEND;

packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.css

@@ -53,6 +53,12 @@
   display: none;
 }
 
+
+.TogglePanelIcon {
+  width: 16px;
+  height: 16px;
+}
+
 @container devtools (width < 600px) {
   .SuspenseTab {
     flex-direction: column;
@@ -111,14 +117,24 @@
 
 .SuspenseTreeViewHeader {
   padding: 0.25rem;
-  display: grid;
+   display: grid;
   grid-template-columns: auto 1fr auto;
-  align-items: flex-start;
+  grid-template-rows: auto auto;
+  grid-template-areas:
+    "toggle-left timeline toggle-right"
+    ". breadcrumbs breadcrumbs";
 }
 
-.SuspenseTreeViewHeaderMain {
-  display: grid;
-  grid-template-rows: auto auto;
+.ToggleTreeList {
+  grid-area: toggle-left;
+}
+
+.SuspenseTimeline {
+  grid-area: timeline;
+}
+
+.ToggleInspectedElement {
+  grid-area: toggle-right;;
 }
 
 .SuspenseBreadcrumbs {
@@ -127,4 +143,5 @@
    * OwnerStack has more constraints that make it easier so it won't be a 1:1 port.
    */
   overflow-x: auto;
+  grid-area: breadcrumbs;
 }

packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js

@@ -57,6 +57,7 @@ function ToggleTreeList({
 }) {
   return (
     <Button
+      className={styles.ToggleTreeList}
       onClick={() =>
         dispatch({
           type: 'ACTION_SET_TREE_LIST_TOGGLE',
@@ -65,6 +66,7 @@ function ToggleTreeList({
       }
       title={state.treeListHidden ? 'Show Tree List' : 'Hide Tree List'}>
       <ButtonIcon
+        className={styles.TogglePanelIcon}
         type={state.treeListHidden ? 'panel-left-open' : 'panel-left-close'}
       />
     </Button>
@@ -105,7 +107,7 @@ function ToggleInspectedElement({
           ? 'Show Inspected Element'
           : 'Hide Inspected Element'
       }>
-      <ButtonIcon type={iconType} />
+      <ButtonIcon className={styles.TogglePanelIcon} type={iconType} />
     </Button>
   );
 }
@@ -307,13 +309,11 @@ function SuspenseTab(_: {}) {
         <div className={styles.TreeView}>
           <div className={styles.SuspenseTreeViewHeader}>
             <ToggleTreeList dispatch={dispatch} state={state} />
-            <div className={styles.SuspenseTreeViewHeaderMain}>
-              <div className={styles.SuspenseTimeline}>
-                <SuspenseTimeline />
-              </div>
-              <div className={styles.SuspenseBreadcrumbs}>
-                <SuspenseBreadcrumbs />
-              </div>
+            <div className={styles.SuspenseTimeline}>
+              <SuspenseTimeline />
+            </div>
+            <div className={styles.SuspenseBreadcrumbs}>
+              <SuspenseBreadcrumbs />
             </div>
             <ToggleInspectedElement
               dispatch={dispatch}