From bc759c5c9eefd6a41a3a390494611dbc905c1a8f Mon Sep 17 00:00:00 2001
From: miloschwartz <mschwartz10612@gmail.com>
Date: Tue, 30 Jun 2026 22:11:25 -0400
Subject: [PATCH] improve mobile responsiveness

---
 .../LauncherGroupTrigger.tsx                  |  2 +-
 .../LauncherResourceAccess.tsx                |  6 +-
 .../LauncherResourceCard.tsx                  |  3 +-
 .../LauncherResourceList.tsx                  | 22 +++----
 .../resource-launcher/LauncherResourceRow.tsx | 30 ++++++----
 .../resource-launcher/ResourceLauncher.tsx    | 60 +++++++++----------
 6 files changed, 66 insertions(+), 57 deletions(-)

diff --git a/src/components/resource-launcher/LauncherGroupTrigger.tsx b/src/components/resource-launcher/LauncherGroupTrigger.tsx
index a43536fd5..cd4048d65 100644
--- a/src/components/resource-launcher/LauncherGroupTrigger.tsx
+++ b/src/components/resource-launcher/LauncherGroupTrigger.tsx
@@ -48,7 +48,7 @@ export function LauncherGroupTrigger({
     isOpen
 }: LauncherGroupTriggerProps) {
     return (
-        <CollapsibleTrigger className="flex w-full items-center gap-2.5 rounded-md bg-accent px-4 py-2.5 text-left transition-colors cursor-pointer">
+        <CollapsibleTrigger className="sticky top-0 z-20 md:top-16 flex w-full items-center gap-2.5 rounded-md bg-accent px-4 py-2.5 text-left transition-colors cursor-pointer">
             {group.groupType === "site" || group.groupType === "label" ? (
                 <LauncherGroupStatusDot group={group} />
             ) : null}
diff --git a/src/components/resource-launcher/LauncherResourceAccess.tsx b/src/components/resource-launcher/LauncherResourceAccess.tsx
index 729036589..81a867e17 100644
--- a/src/components/resource-launcher/LauncherResourceAccess.tsx
+++ b/src/components/resource-launcher/LauncherResourceAccess.tsx
@@ -27,18 +27,18 @@ export function LauncherResourceAccess({
 
     if (variant === "list") {
         return (
-            <div className="flex min-w-0 flex-1 items-center gap-2.5">
+            <div className="flex min-w-0 flex-1 items-center gap-2.5 max-md:min-w-[12rem] max-md:shrink-0 max-md:flex-none">
                 {canLink ? (
                     <Link
                         href={href}
                         target="_blank"
                         rel="noopener noreferrer"
-                        className="min-w-0 truncate text-sm text-muted-foreground hover:underline"
+                        className="min-w-0 truncate text-sm text-muted-foreground hover:underline max-md:overflow-visible max-md:whitespace-nowrap"
                     >
                         {accessDisplay}
                     </Link>
                 ) : (
-                    <span className="min-w-0 truncate text-sm text-muted-foreground">
+                    <span className="min-w-0 truncate text-sm text-muted-foreground max-md:overflow-visible max-md:whitespace-nowrap">
                         {accessDisplay}
                     </span>
                 )}
diff --git a/src/components/resource-launcher/LauncherResourceCard.tsx b/src/components/resource-launcher/LauncherResourceCard.tsx
index 506893c29..039877393 100644
--- a/src/components/resource-launcher/LauncherResourceCard.tsx
+++ b/src/components/resource-launcher/LauncherResourceCard.tsx
@@ -29,8 +29,7 @@ export function LauncherResourceCard({
     return (
         <div
             className={cn(
-                "flex min-w-0 flex-col gap-2.5 overflow-hidden rounded-xl border border-border bg-background p-4 transition-colors",
-                isClickable && "hover:bg-accent/40",
+                "flex min-w-0 flex-col gap-2.5 overflow-hidden rounded-xl border border-border bg-background p-4",
                 clickProps.className
             )}
             onClick={clickProps.onClick}
diff --git a/src/components/resource-launcher/LauncherResourceList.tsx b/src/components/resource-launcher/LauncherResourceList.tsx
index 69d9a5385..781d361c8 100644
--- a/src/components/resource-launcher/LauncherResourceList.tsx
+++ b/src/components/resource-launcher/LauncherResourceList.tsx
@@ -15,16 +15,18 @@ export function LauncherResourceList({
     showSiteTags
 }: LauncherResourceListProps) {
     return (
-        <div className="flex w-full flex-col">
-            {resources.map((resource, index) => (
-                <LauncherResourceRow
-                    key={resource.launcherResourceKey}
-                    resource={resource}
-                    showLabels={showLabels}
-                    showSiteTags={showSiteTags}
-                    isLast={index === resources.length - 1}
-                />
-            ))}
+        <div className="w-full max-md:overflow-x-auto max-md:overflow-y-hidden">
+            <div className="flex w-full flex-col max-md:w-max">
+                {resources.map((resource, index) => (
+                    <LauncherResourceRow
+                        key={resource.launcherResourceKey}
+                        resource={resource}
+                        showLabels={showLabels}
+                        showSiteTags={showSiteTags}
+                        isLast={index === resources.length - 1}
+                    />
+                ))}
+            </div>
         </div>
     );
 }
diff --git a/src/components/resource-launcher/LauncherResourceRow.tsx b/src/components/resource-launcher/LauncherResourceRow.tsx
index 21dd763fe..b3cbde724 100644
--- a/src/components/resource-launcher/LauncherResourceRow.tsx
+++ b/src/components/resource-launcher/LauncherResourceRow.tsx
@@ -36,9 +36,8 @@ export function LauncherResourceRow({
     return (
         <div
             className={cn(
-                "flex items-center gap-2.5 p-4 transition-colors",
+                "flex items-center gap-2.5 p-4 max-md:min-w-max max-md:whitespace-nowrap",
                 isLast ? undefined : "border-b border-border",
-                isClickable && "hover:bg-accent/40",
                 clickProps.className
             )}
             onClick={clickProps.onClick}
@@ -46,15 +45,24 @@ export function LauncherResourceRow({
             role={clickProps.role}
             tabIndex={clickProps.tabIndex}
         >
-            <LauncherResourceIcon
-                iconUrl={resource.iconUrl}
-                name={resource.name}
-                variant="list"
-            />
+            <div
+                className={cn(
+                    "flex shrink-0 items-center gap-2.5",
+                    "max-md:sticky max-md:left-0 max-md:z-10 max-md:min-w-[9rem]",
+                    "max-md:-my-4 max-md:-ml-4 max-md:py-4 max-md:pl-4 max-md:pr-3",
+                    "max-md:bg-card max-md:[mask-image:linear-gradient(to_left,transparent_0%,black_20px)]"
+                )}
+            >
+                <LauncherResourceIcon
+                    iconUrl={resource.iconUrl}
+                    name={resource.name}
+                    variant="list"
+                />
 
-            <span className="shrink-0 text-sm font-semibold text-foreground">
-                {resource.name}
-            </span>
+                <span className="text-sm font-semibold text-foreground">
+                    {resource.name}
+                </span>
+            </div>
 
             <LauncherResourceAccess
                 accessDisplay={resource.accessDisplay}
@@ -64,7 +72,7 @@ export function LauncherResourceRow({
             />
 
             {hasTags ? (
-                <div className="ml-auto flex min-w-0 max-w-md shrink items-center justify-end gap-1">
+                <div className="flex min-w-0 max-w-md shrink items-center justify-end gap-1 max-md:shrink-0 max-md:max-w-none md:ml-auto">
                     {showSiteTags && resource.site ? (
                         <LabelBadge
                             name={resource.site.name}
diff --git a/src/components/resource-launcher/ResourceLauncher.tsx b/src/components/resource-launcher/ResourceLauncher.tsx
index e5258d122..435388ece 100644
--- a/src/components/resource-launcher/ResourceLauncher.tsx
+++ b/src/components/resource-launcher/ResourceLauncher.tsx
@@ -371,36 +371,8 @@ export default function ResourceLauncher({
             />
 
             <div className="flex flex-col gap-3 mb-6">
-                <div className="flex flex-col xl:flex-row xl:items-center gap-3 justify-between">
-                    <div className="flex flex-col sm:flex-row sm:items-center gap-3 min-w-0 flex-1">
-                        <div className="relative w-full sm:max-w-sm shrink-0">
-                            <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
-                            <Input
-                                value={searchInput}
-                                onChange={(event) => {
-                                    const value = event.target.value;
-                                    setSearchInput(value);
-                                    debouncedNavigateSearch(
-                                        activeViewIdRef.current,
-                                        value
-                                    );
-                                }}
-                                placeholder={t(
-                                    "resourceLauncherSearchPlaceholder"
-                                )}
-                                className="pl-8"
-                            />
-                        </div>
-                        <LauncherViewTabs
-                            activeViewId={activeViewId}
-                            savedViews={views.map((view) => ({
-                                viewId: view.viewId,
-                                name: view.name
-                            }))}
-                            onSelectView={selectView}
-                        />
-                    </div>
-                    <div className="flex items-center gap-2 shrink-0 justify-end">
+                <div className="flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between">
+                    <div className="flex items-center gap-2 shrink-0 justify-start xl:justify-end order-1 sm:order-2 xl:order-2">
                         <LauncherSaveViewMenu
                             isDefaultView={isDefaultView}
                             isAdmin={isAdmin}
@@ -448,6 +420,34 @@ export default function ResourceLauncher({
                             }}
                         />
                     </div>
+                    <div className="flex flex-col sm:flex-row sm:items-center gap-3 min-w-0 flex-1 order-2 sm:order-1 xl:order-1">
+                        <div className="relative w-full sm:max-w-sm shrink-0">
+                            <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
+                            <Input
+                                value={searchInput}
+                                onChange={(event) => {
+                                    const value = event.target.value;
+                                    setSearchInput(value);
+                                    debouncedNavigateSearch(
+                                        activeViewIdRef.current,
+                                        value
+                                    );
+                                }}
+                                placeholder={t(
+                                    "resourceLauncherSearchPlaceholder"
+                                )}
+                                className="pl-8"
+                            />
+                        </div>
+                        <LauncherViewTabs
+                            activeViewId={activeViewId}
+                            savedViews={views.map((view) => ({
+                                viewId: view.viewId,
+                                name: view.name
+                            }))}
+                            onSelectView={selectView}
+                        />
+                    </div>
                 </div>
             </div>