Adjust metrics side tabs spacing (#2724)

* Adjust metrics side tabs spacing * Inline more classes * Remove need for on tab and container * Remove need for div wrapper on tab and container * Update RouteTabs.tsx * Sneak in tighter properties table spacing * `38px` properties table row height
oxidecomputer · Mar 3, 2025 · 873e898 · 873e898
1 parent 46f14c2
commit 873e898
Show file tree

Hide file tree

Showing 11 changed files with 69 additions and 66 deletions.
diff --git a/app/components/RouteTabs.tsx b/app/components/RouteTabs.tsx
@@ -50,23 +50,27 @@ export function RouteTabs({
   sideTabs = false,
   tabListClassName,
 }: RouteTabsProps) {
-  const wrapperClasses = sideTabs
-    ? 'ox-side-tabs flex'
-    : cn('ox-tabs', { 'full-width': fullWidth })
-  const tabListClasses = sideTabs ? 'ox-side-tabs-list' : 'ox-tabs-list'
-  const panelClasses = cn('ox-tabs-panel @container', { 'ml-5 flex-grow': sideTabs })
+  /* TODO: Add aria-describedby for active tab */
   return (
-    <div className={wrapperClasses}>
+    <div
+      className={cn(sideTabs ? 'ox-side-tabs flex' : 'ox-tabs', {
+        'full-width': !sideTabs && fullWidth,
+      })}
+    >
       {/* eslint-disable-next-line jsx-a11y/interactive-supports-focus */}
       <div
         role="tablist"
-        className={cn(tabListClasses, tabListClassName)}
+        className={cn(sideTabs ? 'ox-side-tabs-list' : 'ox-tabs-list', tabListClassName)}
         onKeyDown={selectTab}
       >
         {children}
       </div>
-      {/* TODO: Add aria-describedby for active tab */}
-      <div className={panelClasses} role="tabpanel" tabIndex={0}>
+
+      <div
+        className={cn('ox-tabs-panel @container', { 'ml-5 flex-grow': sideTabs })}
+        role="tabpanel"
+        tabIndex={0}
+      >
         <Outlet />
       </div>
     </div>
@@ -76,16 +80,14 @@ export function RouteTabs({
 export interface TabProps {
   to: string
   children: ReactNode
-  sideTab?: boolean
 }
-export const Tab = ({ to, children, sideTab = false }: TabProps) => {
+export const Tab = ({ to, children }: TabProps) => {
   const isActive = useIsActivePath({ to })
-  const baseClass = sideTab ? 'ox-side-tab' : 'ox-tab'
   return (
     <Link
       role="tab"
       to={to}
-      className={cn(baseClass, { 'is-selected': isActive })}
+      className={cn('ox-tab', { 'is-selected': isActive })}
       tabIndex={isActive ? 0 : -1}
       aria-selected={isActive}
     >

diff --git a/app/components/oxql-metrics/OxqlMetric.tsx b/app/components/oxql-metrics/OxqlMetric.tsx
@@ -134,8 +134,8 @@ export function OxqlMetric({ title, description, unit, ...queryObj }: OxqlMetric
 export const MetricHeader = ({ children }: { children: ReactNode }) => {
   // If header has only one child, align it to the end of the container
   const justify = Children.count(children) === 1 ? 'justify-end' : 'justify-between'
-  return <div className={`flex flex-wrap gap-2 ${justify} mt-8`}>{children}</div>
+  return <div className={`flex flex-wrap gap-2 ${justify}`}>{children}</div>
 }
-export const MetricCollection = classed.div`mt-4 flex flex-col gap-4`
+export const MetricCollection = classed.div`mt-3 flex flex-col gap-4`
 
 export const MetricRow = classed.div`flex w-full flex-col gap-4 @[48rem]:flex-row`
diff --git a/app/pages/project/instances/InstancePage.tsx b/app/pages/project/instances/InstancePage.tsx
@@ -218,7 +218,7 @@ export default function InstancePage() {
           <MoreActionsMenu label="Instance actions" actions={allMenuActions} />
         </div>
       </PageHeader>
-      <PropertiesTable columns={2} className="-mt-8 mb-16">
+      <PropertiesTable columns={2} className="-mt-8 mb-8">
         <PropertiesTable.Row label="cpu">
           <span className="text-default">{instance.ncpus}</span>
           <span className="ml-1 text-tertiary">{pluralize(' vCPU', instance.ncpus)}</span>

diff --git a/app/pages/project/instances/MetricsTab.tsx b/app/pages/project/instances/MetricsTab.tsx
@@ -57,16 +57,10 @@ export default function MetricsTab() {
   // Find the relevant <Outlet> in RouteTabs
   return (
     <MetricsContext.Provider value={context}>
-      <RouteTabs sideTabs tabListClassName="mt-24">
-        <Tab to={pb.instanceCpuMetrics({ project, instance })} sideTab>
-          CPU
-        </Tab>
-        <Tab to={pb.instanceDiskMetrics({ project, instance })} sideTab>
-          Disk
-        </Tab>
-        <Tab to={pb.instanceNetworkMetrics({ project, instance })} sideTab>
-          Network
-        </Tab>
+      <RouteTabs sideTabs tabListClassName="mt-14">
+        <Tab to={pb.instanceCpuMetrics({ project, instance })}>CPU</Tab>
+        <Tab to={pb.instanceDiskMetrics({ project, instance })}>Disk</Tab>
+        <Tab to={pb.instanceNetworkMetrics({ project, instance })}>Network</Tab>
       </RouteTabs>
     </MetricsContext.Provider>
   )

diff --git a/app/pages/project/vpcs/RouterPage.tsx b/app/pages/project/vpcs/RouterPage.tsx
@@ -200,7 +200,7 @@ export default function RouterPage() {
           <MoreActionsMenu label="Router actions" actions={actions} />
         </div>
       </PageHeader>
-      <PropertiesTable columns={2} className="-mt-8 mb-16">
+      <PropertiesTable columns={2} className="-mt-8 mb-8">
         <PropertiesTable.DescriptionRow description={routerData.description} />
         <PropertiesTable.Row label="Kind">
           <Badge color="neutral">{routerData.kind}</Badge>

diff --git a/app/pages/project/vpcs/VpcPage.tsx b/app/pages/project/vpcs/VpcPage.tsx
@@ -75,7 +75,7 @@ export default function VpcPage() {
           <MoreActionsMenu label="VPC actions" actions={actions} />
         </div>
       </PageHeader>
-      <PropertiesTable columns={2} className="-mt-8 mb-16">
+      <PropertiesTable columns={2} className="-mt-8 mb-8">
         <PropertiesTable.DescriptionRow description={vpc.description} />
         <PropertiesTable.Row label="DNS Name">{vpc.dnsName}</PropertiesTable.Row>
         <PropertiesTable.DateRow date={vpc.timeCreated} label="Created" />

diff --git a/app/pages/settings/ProfilePage.tsx b/app/pages/settings/ProfilePage.tsx
@@ -43,7 +43,7 @@ export default function ProfilePage() {
         <PageTitle icon={<Settings24Icon />}>Profile</PageTitle>
       </PageHeader>
 
-      <PropertiesTable className="-mt-8 mb-16">
+      <PropertiesTable className="-mt-8 mb-8">
         <PropertiesTable.Row label="Display name">{me.displayName}</PropertiesTable.Row>
         <PropertiesTable.Row label="User ID">
           {me.id}

diff --git a/app/pages/system/inventory/sled/SledPage.tsx b/app/pages/system/inventory/sled/SledPage.tsx
@@ -43,7 +43,7 @@ export default function SledPage() {
         <PageTitle icon={<Servers24Icon />}>Sled</PageTitle>
       </PageHeader>
 
-      <PropertiesTable columns={2} className="-mt-8 mb-16">
+      <PropertiesTable columns={2} className="-mt-8 mb-8">
         <PropertiesTable.Row label="sled id">
           <span className="text-default">{sled.id}</span>
         </PropertiesTable.Row>

diff --git a/app/pages/system/silos/SiloPage.tsx b/app/pages/system/silos/SiloPage.tsx
@@ -66,7 +66,7 @@ export default function SiloPage() {
         />
       </PageHeader>
 
-      <PropertiesTable columns={2} className="-mt-8 mb-16">
+      <PropertiesTable columns={2} className="-mt-8 mb-8">
         <PropertiesTable.IdRow id={silo.id} />
         <PropertiesTable.DescriptionRow description={silo.description} />
         <PropertiesTable.DateRow date={silo.timeCreated} label="Created" />

diff --git a/app/ui/lib/PropertiesTable.tsx b/app/ui/lib/PropertiesTable.tsx
@@ -62,7 +62,7 @@ PropertiesTable.Row = ({ label, children }: PropertiesTableRowProps) => (
     <span className="flex items-center whitespace-nowrap text-mono-sm text-secondary">
       {label}
     </span>
-    <div className="flex h-10 items-center overflow-hidden whitespace-nowrap pr-4 text-sans-md text-default">
+    <div className="flex h-[38px] items-center overflow-hidden whitespace-nowrap pr-4 text-sans-md text-default">
       {children}
     </div>
   </>

diff --git a/app/ui/styles/components/Tabs.css b/app/ui/styles/components/Tabs.css
@@ -6,83 +6,90 @@
  * Copyright Oxide Computer Company
  */
 
-.ox-tabs.full-width {
-  @apply !mx-0 !w-full;
-}
-
-.ox-tabs.full-width .ox-tabs-panel {
-  @apply mx-[var(--content-gutter)];
-}
-
-.ox-tabs.full-width .ox-side-tabs .ox-tabs-panel {
-  @apply mx-0 ml-4;
-}
-
+/* Tab list container styles */
 .ox-tabs-list {
-  @apply mb-8 flex bg-transparent;
+  @apply mb-10 flex bg-transparent;
 }
 
 .ox-tabs-list:after {
   @apply block w-full border-b border-secondary;
-  content: ' ';
-}
-.ox-tabs.full-width .ox-tabs-list:before {
-  @apply block w-10 min-w-max flex-shrink-0 border-b border-secondary;
-  content: ' ';
+  content: '';
 }
 
+/* Panel styles */
 .ox-tabs-panel:focus-visible {
   @apply outline outline-2 outline-offset-[1rem] outline-accent-secondary;
 }
 
+/* Base tab styles */
 .ox-tab {
   @apply h-10 space-x-2 whitespace-nowrap border-b px-1.5 pb-1 pt-2 uppercase !no-underline text-mono-sm text-secondary border-secondary;
 }
 
-.ox-tab[data-state='active'],
-.ox-tab.is-selected {
-  @apply text-accent border-accent;
-}
-
-.ox-tab > * {
+.ox-tabs-list .ox-tab > * {
   @apply rounded bg-transparent px-1.5 py-1;
 }
-.ox-tab:hover > * {
+
+/* Hover states */
+.ox-tabs-list .ox-tab:hover > * {
   @apply bg-hover;
 }
 
-.ox-tab[data-state='active']:hover > *,
+/* Active states */
+.ox-tab.is-selected {
+  @apply text-accent border-accent;
+}
+
 .ox-tab.is-selected:hover > * {
   @apply !bg-accent-secondary;
 }
 
+/* Badge styles */
 .ox-tab > .ox-badge {
   @apply -mt-1 select-none text-current;
 }
 
-.ox-tab[data-state='inactive'] > .ox-badge,
 .ox-tab:not(.is-selected) > .ox-badge {
   @apply bg-disabled;
 }
 
-.ox-tab[data-state='active'] > .ox-badge,
 .ox-tab.is-selected > .ox-badge {
   @apply bg-accent-secondary;
 }
 
+/* Full width variants */
+.ox-tabs.full-width {
+  @apply !mx-0 !w-full;
+}
+
+.ox-tabs.full-width > .ox-tabs-panel {
+  @apply mx-[var(--content-gutter)];
+}
+
+.ox-tabs.full-width .ox-tabs-list:before {
+  @apply block w-10 min-w-max flex-shrink-0 border-b border-secondary;
+  content: '';
+}
+
+/* Side tabs styles */
 .ox-side-tabs-list {
-  @apply flex w-[180px] flex-shrink-0 flex-col gap-1;
+  @apply sticky top-10 flex w-[180px] flex-shrink-0 flex-col gap-0.5 self-start;
 }
 
-.ox-side-tab {
-  @apply space-x-2 whitespace-nowrap rounded p-2 py-1.5 !no-underline text-sans-md text-secondary;
+.ox-side-tabs-list .ox-tab {
+  @apply h-auto whitespace-nowrap rounded p-2 py-1.5 normal-case !no-underline text-sans-md text-secondary;
+  border-bottom: none;
 }
 
-.ox-side-tab[data-state='active'],
-.ox-side-tab.is-selected {
+.ox-side-tabs .ox-tab.is-selected {
   @apply text-accent bg-accent-secondary;
+  border: none;
+}
+
+.ox-side-tabs .ox-tabs-panel {
+  @apply mx-0 ml-4;
 }
 
-.ox-side-tab:not([data-state='active'], .is-selected):hover {
+.ox-side-tabs-list .ox-tab:not(.is-selected):hover {
   @apply text-default bg-hover;
 }