From 9b6ffac66fd163e8a62544c0d35146f453c9cb2c Mon Sep 17 00:00:00 2001
From: David Crespo <david.crespo@oxidecomputer.com>
Date: Tue, 14 Oct 2025 22:05:06 -0500
Subject: [PATCH 1/6] min width on update release list cardblock

---
 app/pages/system/UpdatePage.tsx | 2 +-
 app/ui/lib/CardBlock.tsx        | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/app/pages/system/UpdatePage.tsx b/app/pages/system/UpdatePage.tsx
index 695038b55..200ed002b 100644
--- a/app/pages/system/UpdatePage.tsx
+++ b/app/pages/system/UpdatePage.tsx
@@ -166,7 +166,7 @@ export default function UpdatePage() {
         </PropertiesTable.Row>
       </PropertiesTable>
 
-      <CardBlock>
+      <CardBlock className="min-w-160">
         <CardBlock.Header title="Releases" />
         <CardBlock.Body>
           <ul className="space-y-3">
diff --git a/app/ui/lib/CardBlock.tsx b/app/ui/lib/CardBlock.tsx
index bf584ee54..b7d8c22a6 100644
--- a/app/ui/lib/CardBlock.tsx
+++ b/app/ui/lib/CardBlock.tsx
@@ -22,14 +22,16 @@ const widthClass: Record<Width, string> = {
 export type CardBlockProps = {
   children: ReactNode
   width?: Width
+  className?: string
 }
 
-export function CardBlock({ children, width = 'full' }: CardBlockProps) {
+export function CardBlock({ children, className, width = 'full' }: CardBlockProps) {
   return (
     <div
       className={cn(
         'text-sans-md border-default *:border-b-secondary flex flex-col rounded-lg border py-5 *:border-b last:*:border-0 last:*:pb-0',
-        widthClass[width]
+        widthClass[width],
+        className
       )}
     >
       {children}

From e98012a06e214727fe88d29722f99bbf6eecb875 Mon Sep 17 00:00:00 2001
From: David Crespo <david.crespo@oxidecomputer.com>
Date: Wed, 15 Oct 2025 10:27:34 -0500
Subject: [PATCH 2/6] let's just wrap instead. this is why I'm not a designer

---
 app/pages/system/UpdatePage.tsx | 28 ++++++++++++++--------------
 app/ui/lib/CardBlock.tsx        |  6 ++----
 2 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/app/pages/system/UpdatePage.tsx b/app/pages/system/UpdatePage.tsx
index 200ed002b..1d06540b2 100644
--- a/app/pages/system/UpdatePage.tsx
+++ b/app/pages/system/UpdatePage.tsx
@@ -13,7 +13,7 @@ import {
   Images24Icon,
   SoftwareUpdate16Icon,
   SoftwareUpdate24Icon,
-  Time16Icon,
+  TimeOutline12Icon,
 } from '@oxide/design-system/icons/react'
 import { Badge } from '@oxide/design-system/ui'
 
@@ -166,7 +166,7 @@ export default function UpdatePage() {
         </PropertiesTable.Row>
       </PropertiesTable>
 
-      <CardBlock className="min-w-160">
+      <CardBlock>
         <CardBlock.Header title="Releases" />
         <CardBlock.Body>
           <ul className="space-y-3">
@@ -175,21 +175,21 @@ export default function UpdatePage() {
               return (
                 <li
                   key={repo.hash}
-                  className="border-secondary flex items-center gap-4 rounded border p-4"
+                  className="border-secondary flex items-center gap-3 rounded border p-4"
                 >
-                  <Images24Icon className="text-secondary shrink-0" aria-hidden />
-                  <div className="flex-1">
-                    <div className="flex items-center gap-2">
-                      <span className="text-sans-semi-lg text-raise">
-                        {repo.systemVersion}
-                      </span>
-                      {isTarget && <Badge color="default">Target</Badge>}
+                  <Images24Icon className="text-tertiary shrink-0" aria-hidden />
+                  <div className="flex min-w-0 flex-1 flex-wrap items-center gap-x-4 gap-y-2">
+                    <div className="flex-1">
+                      <div className="flex items-center gap-2">
+                        <span className="text-sans-semi-lg text-raise">
+                          {repo.systemVersion}
+                        </span>
+                        {isTarget && <Badge color="default">Target</Badge>}
+                      </div>
+                      <div className="text-secondary">{repo.fileName}</div>
                     </div>
-                    <div className="text-secondary">{repo.fileName}</div>
-                  </div>
-                  <div className="flex items-center gap-4">
                     <div className="flex items-center gap-1">
-                      <Time16Icon aria-hidden />
+                      <TimeOutline12Icon className="text-tertiary mr-0.75" aria-hidden />
                       <DateTime date={repo.timeCreated} />
                     </div>
                   </div>
diff --git a/app/ui/lib/CardBlock.tsx b/app/ui/lib/CardBlock.tsx
index b7d8c22a6..bf584ee54 100644
--- a/app/ui/lib/CardBlock.tsx
+++ b/app/ui/lib/CardBlock.tsx
@@ -22,16 +22,14 @@ const widthClass: Record<Width, string> = {
 export type CardBlockProps = {
   children: ReactNode
   width?: Width
-  className?: string
 }
 
-export function CardBlock({ children, className, width = 'full' }: CardBlockProps) {
+export function CardBlock({ children, width = 'full' }: CardBlockProps) {
   return (
     <div
       className={cn(
         'text-sans-md border-default *:border-b-secondary flex flex-col rounded-lg border py-5 *:border-b last:*:border-0 last:*:pb-0',
-        widthClass[width],
-        className
+        widthClass[width]
       )}
     >
       {children}

From 9b8cd0ce4246f1e6aa863159aacccbaadaada0e7 Mon Sep 17 00:00:00 2001
From: Benjamin Leonard <benji@oxide.computer>
Date: Wed, 15 Oct 2025 17:12:17 +0100
Subject: [PATCH 3/6] Fix card block child border

---
 app/ui/lib/CardBlock.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/ui/lib/CardBlock.tsx b/app/ui/lib/CardBlock.tsx
index bf584ee54..5fd890636 100644
--- a/app/ui/lib/CardBlock.tsx
+++ b/app/ui/lib/CardBlock.tsx
@@ -28,7 +28,7 @@ export function CardBlock({ children, width = 'full' }: CardBlockProps) {
   return (
     <div
       className={cn(
-        'text-sans-md border-default *:border-b-secondary flex flex-col rounded-lg border py-5 *:border-b last:*:border-0 last:*:pb-0',
+        'text-sans-md border-default *:border-b-secondary flex flex-col rounded-lg border py-5 *:border-b *:last:border-0 *:last:pb-0',
         widthClass[width]
       )}
     >

From 21b42cf8c700df3adf8a48de1fe15ba84239a0ea Mon Sep 17 00:00:00 2001
From: Benjamin Leonard <benji@oxide.computer>
Date: Wed, 15 Oct 2025 17:12:28 +0100
Subject: [PATCH 4/6] Add divider

---
 app/pages/system/UpdatePage.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/app/pages/system/UpdatePage.tsx b/app/pages/system/UpdatePage.tsx
index 1d06540b2..cc079e8cd 100644
--- a/app/pages/system/UpdatePage.tsx
+++ b/app/pages/system/UpdatePage.tsx
@@ -34,6 +34,7 @@ import { addToast } from '~/stores/toast'
 import { EmptyCell } from '~/table/cells/EmptyCell'
 import { CardBlock } from '~/ui/lib/CardBlock'
 import { DateTime } from '~/ui/lib/DateTime'
+import { Divider } from '~/ui/lib/Divider'
 import * as DropdownMenu from '~/ui/lib/DropdownMenu'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
 import { PropertiesTable } from '~/ui/lib/PropertiesTable'
@@ -106,7 +107,7 @@ export default function UpdatePage() {
           />
         </div>
       </PageHeader>
-      <PropertiesTable className="-mt-8 mb-8">
+      <PropertiesTable className="-mt-8">
         {/* targetRelease will never be null on a customer system after the
             first time it is set. */}
         <PropertiesTable.Row label="Target release">
@@ -166,6 +167,8 @@ export default function UpdatePage() {
         </PropertiesTable.Row>
       </PropertiesTable>
 
+      <Divider className="my-8" />
+
       <CardBlock>
         <CardBlock.Header title="Releases" />
         <CardBlock.Body>
@@ -175,7 +178,7 @@ export default function UpdatePage() {
               return (
                 <li
                   key={repo.hash}
-                  className="border-secondary flex items-center gap-3 rounded border p-4"
+                  className="border-default flex items-center gap-3 rounded border p-4"
                 >
                   <Images24Icon className="text-tertiary shrink-0" aria-hidden />
                   <div className="flex min-w-0 flex-1 flex-wrap items-center gap-x-4 gap-y-2">

From 3be3b9a7a4163bbaef2deb67a47308f75e2a1654 Mon Sep 17 00:00:00 2001
From: Benjamin Leonard <benji@oxide.computer>
Date: Wed, 15 Oct 2025 18:09:10 +0100
Subject: [PATCH 5/6] Tweak tuf repo list rows

---
 app/components/MoreActionsMenu.tsx         | 20 ++++--
 app/components/oxql-metrics/OxqlMetric.tsx |  2 +-
 app/pages/system/UpdatePage.tsx            | 77 ++++++++++++----------
 3 files changed, 60 insertions(+), 39 deletions(-)

diff --git a/app/components/MoreActionsMenu.tsx b/app/components/MoreActionsMenu.tsx
index a2e72179b..5bf0c0999 100644
--- a/app/components/MoreActionsMenu.tsx
+++ b/app/components/MoreActionsMenu.tsx
@@ -15,23 +15,33 @@ import * as DropdownMenu from '~/ui/lib/DropdownMenu'
 interface MoreActionsMenuProps {
   /** The accessible name for the menu button */
   label: string
-  isSmall?: boolean
+  variant?: 'default' | 'small' | 'filled'
   /** Dropdown items only */
   children?: ReactNode
 }
 
 export const MoreActionsMenu = ({
   label,
-  isSmall = false,
+  variant = 'default',
   children,
 }: MoreActionsMenuProps) => {
   return (
     <DropdownMenu.Root>
-      <DropdownMenu.Trigger aria-label={label} className="rounded">
+      <DropdownMenu.Trigger
+        aria-label={label}
+        className={cn(
+          'headless-hide-focus rounded',
+          variant === 'filled' && 'h-full w-full'
+        )}
+      >
         <div
           className={cn(
-            'active-clicked border-default hover:bg-tertiary flex items-center justify-center rounded border',
-            isSmall ? 'h-6 w-6' : 'h-8 w-8'
+            'active-clicked hover:bg-tertiary flex items-center justify-center',
+            variant === 'small' && 'h-6 w-6',
+            variant === 'default' && 'h-8 w-8',
+            (variant === 'default' || variant === 'small') &&
+              'border-default rounded border',
+            variant === 'filled' && 'h-full w-full px-3'
           )}
         >
           <More12Icon />
diff --git a/app/components/oxql-metrics/OxqlMetric.tsx b/app/components/oxql-metrics/OxqlMetric.tsx
index db8c09799..5eba37cfb 100644
--- a/app/components/oxql-metrics/OxqlMetric.tsx
+++ b/app/components/oxql-metrics/OxqlMetric.tsx
@@ -89,7 +89,7 @@ export function OxqlMetric({ title, description, unit, ...queryObj }: OxqlMetric
   return (
     <ChartContainer>
       <ChartHeader title={title} label={label} description={description}>
-        <MoreActionsMenu label="Instance actions" isSmall>
+        <MoreActionsMenu label="Instance actions" variant="small">
           <Dropdown.LinkItem to={links.oxqlSchemaDocs(queryObj.metricName)}>
             About this metric
           </Dropdown.LinkItem>
diff --git a/app/pages/system/UpdatePage.tsx b/app/pages/system/UpdatePage.tsx
index cc079e8cd..a141ac4e9 100644
--- a/app/pages/system/UpdatePage.tsx
+++ b/app/pages/system/UpdatePage.tsx
@@ -11,6 +11,7 @@ import * as R from 'remeda'
 
 import {
   Images24Icon,
+  SizeOutline12Icon,
   SoftwareUpdate16Icon,
   SoftwareUpdate24Icon,
   TimeOutline12Icon,
@@ -178,50 +179,60 @@ export default function UpdatePage() {
               return (
                 <li
                   key={repo.hash}
-                  className="border-default flex items-center gap-3 rounded border p-4"
+                  className="border-default flex items-center gap-3 rounded border pl-4"
                 >
                   <Images24Icon className="text-tertiary shrink-0" aria-hidden />
-                  <div className="flex min-w-0 flex-1 flex-wrap items-center gap-x-4 gap-y-2">
+                  <div className="flex min-w-0 flex-1 flex-wrap items-center gap-x-4 gap-y-2 py-3">
                     <div className="flex-1">
-                      <div className="flex items-center gap-2">
+                      <div className="flex items-center gap-1.5">
                         <span className="text-sans-semi-lg text-raise">
                           {repo.systemVersion}
                         </span>
                         {isTarget && <Badge color="default">Target</Badge>}
                       </div>
-                      <div className="text-secondary">{repo.fileName}</div>
                     </div>
-                    <div className="flex items-center gap-1">
-                      <TimeOutline12Icon className="text-tertiary mr-0.75" aria-hidden />
-                      <DateTime date={repo.timeCreated} />
+                    <div className="flex flex-col items-end gap-0.5">
+                      <div className="flex items-center gap-1.5">
+                        <DateTime date={repo.timeCreated} />
+                        <TimeOutline12Icon className="text-quaternary" aria-hidden />
+                      </div>
+                      <div className="flex items-center gap-1.5">
+                        <div>{repo.fileName}</div>
+                        <SizeOutline12Icon className="text-quaternary" aria-hidden />
+                      </div>
                     </div>
                   </div>
-                  <MoreActionsMenu label={`${repo.systemVersion} actions`} isSmall>
-                    <DropdownMenu.Item
-                      label="Set as target release"
-                      onSelect={() => {
-                        confirmAction({
-                          actionType: 'primary',
-                          doAction: () =>
-                            setTargetRelease({
-                              body: { systemVersion: repo.systemVersion },
-                            }),
-                          modalTitle: 'Confirm set target release',
-                          modalContent: (
-                            <p>
-                              Are you sure you want to set <HL>{repo.systemVersion}</HL> as
-                              the target release?
-                            </p>
-                          ),
-                          errorTitle: `Error setting target release to ${repo.systemVersion}`,
-                        })
-                      }}
-                      // TODO: follow API logic, disabling for older releases.
-                      // Or maybe just have the API tell us by adding a field to
-                      // the TufRepo response type.
-                      disabled={isTarget && 'Already set as target'}
-                    />
-                  </MoreActionsMenu>
+                  <div className="border-secondary flex items-center justify-center self-stretch border-l">
+                    <MoreActionsMenu
+                      label={`${repo.systemVersion} actions`}
+                      variant="filled"
+                    >
+                      <DropdownMenu.Item
+                        label="Set as target release"
+                        onSelect={() => {
+                          confirmAction({
+                            actionType: 'primary',
+                            doAction: () =>
+                              setTargetRelease({
+                                body: { systemVersion: repo.systemVersion },
+                              }),
+                            modalTitle: 'Confirm set target release',
+                            modalContent: (
+                              <p>
+                                Are you sure you want to set <HL>{repo.systemVersion}</HL>{' '}
+                                as the target release?
+                              </p>
+                            ),
+                            errorTitle: `Error setting target release to ${repo.systemVersion}`,
+                          })
+                        }}
+                        // TODO: follow API logic, disabling for older releases.
+                        // Or maybe just have the API tell us by adding a field to
+                        // the TufRepo response type.
+                        disabled={isTarget && 'Already set as target'}
+                      />
+                    </MoreActionsMenu>
+                  </div>
                 </li>
               )
             })}

From 508a37eee6cfb69404e322ad053fde9aca64fe53 Mon Sep 17 00:00:00 2001
From: Benjamin Leonard <benji@oxide.computer>
Date: Wed, 15 Oct 2025 18:34:07 +0100
Subject: [PATCH 6/6] Responsive tweaks

---
 app/pages/system/UpdatePage.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/pages/system/UpdatePage.tsx b/app/pages/system/UpdatePage.tsx
index a141ac4e9..42a7a0885 100644
--- a/app/pages/system/UpdatePage.tsx
+++ b/app/pages/system/UpdatePage.tsx
@@ -134,7 +134,7 @@ export default function UpdatePage() {
           {componentProgress ? (
             <>
               <div className="mr-1.5">{componentProgress.percentage}%</div>
-              <div className="text-secondary">
+              <div className="text-tertiary">
                 ({componentProgress.current} of {componentProgress.total})
               </div>
             </>
@@ -179,10 +179,10 @@ export default function UpdatePage() {
               return (
                 <li
                   key={repo.hash}
-                  className="border-default flex items-center gap-3 rounded border pl-4"
+                  className="border-default @container flex items-center gap-3 rounded border pl-4"
                 >
                   <Images24Icon className="text-tertiary shrink-0" aria-hidden />
-                  <div className="flex min-w-0 flex-1 flex-wrap items-center gap-x-4 gap-y-2 py-3">
+                  <div className="flex min-w-0 flex-1 flex-col flex-wrap items-start gap-x-4 gap-y-1 py-3 @md:flex-row @md:items-center">
                     <div className="flex-1">
                       <div className="flex items-center gap-1.5">
                         <span className="text-sans-semi-lg text-raise">
@@ -191,7 +191,7 @@ export default function UpdatePage() {
                         {isTarget && <Badge color="default">Target</Badge>}
                       </div>
                     </div>
-                    <div className="flex flex-col items-end gap-0.5">
+                    <div className="flex flex-col items-start gap-0.5 @md:items-end">
                       <div className="flex items-center gap-1.5">
                         <DateTime date={repo.timeCreated} />
                         <TimeOutline12Icon className="text-quaternary" aria-hidden />