From 1c4781e620ea1b256f5098e8a36de0e7d74e1b03 Mon Sep 17 00:00:00 2001
From: Linus Rath <139418639+rathlinus@users.noreply.github.com>
Date: Tue, 3 Nov 2026 05:19:50 +0100
Subject: [PATCH] fix: give the update and manage buttons their own line in the
 marketplace installed list on phones

---
 app/(main)/admin/_pages/marketplace.tsx |  1 +
 components/admin/list.tsx               | 13 ++++++++++---
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/app/(main)/admin/_pages/marketplace.tsx b/app/(main)/admin/_pages/marketplace.tsx
index c70d65354..25385f963 100644
--- a/app/(main)/admin/_pages/marketplace.tsx
+++ b/app/(main)/admin/_pages/marketplace.tsx
@@ -594,6 +594,7 @@ function InstalledView({
               href={fromMarketplace ? detailHref(entry.id) : undefined}
               icon={entry.kind === 'plugin' ? <Puzzle /> : <SwatchBook />}
               title={entry.name}
+              wideControl
               titleExtra={(
                 <>
                   <span className="text-xs text-muted-foreground">v{entry.version}</span>
diff --git a/components/admin/list.tsx b/components/admin/list.tsx
index ad3269c1d..d988f7dbd 100644
--- a/components/admin/list.tsx
+++ b/components/admin/list.tsx
@@ -31,17 +31,20 @@ interface AdminListRowProps {
   meta?: ReactNode;
   /** Controls on the end side; they sit above the row link. */
   control?: ReactNode;
+  /** The control is wider than a switch: on a phone it gets its own line under the text. */
+  wideControl?: boolean;
   className?: string;
   'data-testid'?: string;
 }
 
-export function AdminListRow({ href, icon, title, titleExtra, description, meta, control, className, ...rest }: AdminListRowProps) {
+export function AdminListRow({ href, icon, title, titleExtra, description, meta, control, wideControl, className, ...rest }: AdminListRowProps) {
   return (
     <div
       data-testid={rest['data-testid']}
       className={cn(
         'relative flex items-center gap-3 px-4 py-3 transition-colors',
         href && 'hover:bg-muted/40',
+        wideControl && 'max-sm:flex-wrap',
         className,
       )}
     >
@@ -50,7 +53,7 @@ export function AdminListRow({ href, icon, title, titleExtra, description, meta,
           {icon}
         </div>
       )}
-      <div className="min-w-0 flex-1">
+      <div className={cn('min-w-0 flex-1', wideControl && 'max-sm:basis-0')}>
         <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
           {href ? (
             <AdminLink
@@ -67,7 +70,11 @@ export function AdminListRow({ href, icon, title, titleExtra, description, meta,
         {description && <p className="mt-0.5 line-clamp-1 text-xs text-muted-foreground">{description}</p>}
         {meta && <div className="mt-0.5 text-xs text-muted-foreground">{meta}</div>}
       </div>
-      {control && <div className="relative z-10 flex shrink-0 items-center gap-2">{control}</div>}
+      {control && (
+        <div className={cn('relative z-10 flex shrink-0 items-center gap-2', wideControl && 'max-sm:order-last max-sm:w-full max-sm:flex-wrap max-sm:ps-12')}>
+          {control}
+        </div>
+      )}
       {href && <ChevronRight className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden="true" />}
     </div>
   );