Fix analyzer tabs not on one line

app/components/SubNav.tsx

@@ -21,7 +21,7 @@ export function SubNavLink({
   children: React.ReactNode;
 }) {
   return (
-    <NavLink className={"sub-nav__link__container"} end={end} {...props}>
+    <NavLink className="sub-nav__link__container" end={end} {...props}>
       <div className={clsx("sub-nav__link", className)}>{children}</div>
       <div className="sub-nav__border-guy" />
     </NavLink>

app/components/Tabs.tsx

@@ -6,12 +6,16 @@ import type * as React from "react";
 export function Tabs({
   children,
   className,
+  compact = false,
 }: {
   children: React.ReactNode;
   className?: string;
+  compact?: boolean;
 }) {
   return (
-    <div className={clsx("sub-nav__container", className)}>{children}</div>
+    <div className={clsx("sub-nav__container", className, { compact })}>
+      {children}
+    </div>
   );
 }
 

app/features/build-analyzer/routes/analyzer.tsx

@@ -211,7 +211,7 @@ export default function BuildAnalyzerPage() {
           </div>
           <div className="stack md items-center w-full">
             <div className="w-full">
-              <Tabs className="analyzer__sub-nav">
+              <Tabs className="analyzer__sub-nav" compact>
                 <Tab
                   active={focused === 1}
                   onClick={() => handleChange({ newFocused: 1 })}

app/styles/common.css

@@ -500,6 +500,10 @@ dialog::backdrop {
   white-space: nowrap;
 }
 
+.sub-nav__container.compact .sub-nav__link {
+  padding: var(--s-1) var(--s-2);
+}
+
 .sub-nav__border-guy {
   width: 78%;
   height: 3px;