Merge pull request #390 from mongodb/steph/alignment

Fix alignment for SideNavItem and external links

Author: stephl3

package-lock.json

@@ -50,7 +50,7 @@
     "@leafygreen-ui/split-button": "^1.1.2",
     "@leafygreen-ui/stepper": "^3.2.13",
     "@leafygreen-ui/table": "^12.6.4",
-    "@leafygreen-ui/tabs": "^12.0.3",
+    "@leafygreen-ui/tabs": "^13.0.0",
     "@leafygreen-ui/text-area": "^9.1.1",
     "@leafygreen-ui/text-input": "^13.1.1",
     "@leafygreen-ui/toast": "^6.1.26",

package.json

@@ -84,16 +84,7 @@ export default function ComponentLayout({
           margin-bottom: ${spacing[800]}px;
         `}
         inlineChildren={
-          <div
-            className={css`
-              display: flex;
-              gap: ${spacing[200]}px;
-              border-bottom: 1px solid ${color[theme].border.secondary.default};
-              flex: 1;
-              justify-content: flex-end;
-              height: 100%;
-            `}
-          >
+          <>
             {externalLinks.map(
               ({ 'aria-label': ariaLabel, href, icon }, index) => (
                 <IconButton
@@ -108,7 +99,7 @@ export default function ComponentLayout({
                 </IconButton>
               ),
             )}
-          </div>
+          </>
         }
       >
         <Tab

src/app/component/[component]/layout.tsx

@@ -87,6 +87,8 @@ export function SideNavItem({
         className={css`
           margin: 0;
           padding: ${spacing[200]}px ${spacing[400]}px;
+          display: flex;
+          align-items: center;
         `}
       >
         {children}