From 78cf93da8a1d7043ec89524c845c689c01c416df Mon Sep 17 00:00:00 2001
From: mbecker20 <becker.maxh@gmail.com>
Date: Sat, 10 Aug 2024 23:52:24 -0700
Subject: [PATCH] improve dashboard recents responsiveness

---
 frontend/src/lib/socket.tsx           | 2 +-
 frontend/src/pages/home/dashboard.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/lib/socket.tsx b/frontend/src/lib/socket.tsx
index 17ffd7ad1..bd3984d80 100644
--- a/frontend/src/lib/socket.tsx
+++ b/frontend/src/lib/socket.tsx
@@ -266,7 +266,7 @@ export const WsStatusIndicator = () => {
       variant="ghost"
       onClick={onclick}
       size="icon"
-      className="inline-flex"
+      className="hidden sm:inline-flex"
     >
       <Circle
         className={cn(
diff --git a/frontend/src/pages/home/dashboard.tsx b/frontend/src/pages/home/dashboard.tsx
index b07ad9d9e..e929d0177 100644
--- a/frontend/src/pages/home/dashboard.tsx
+++ b/frontend/src/pages/home/dashboard.tsx
@@ -84,7 +84,7 @@ const ResourceRow = ({ type }: { type: UsableResource }) => {
           <History className="w-4" />
           Recently Viewed
         </p>
-        <div className="h-52 grid md:grid-cols-2 lg:grid-cols-3 gap-4">
+        <div className="h-52 grid sm:grid-cols-2 md:grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 gap-4">
           {ids.map((id, i) => (
             <RecentCard
               key={type + id}
@@ -126,7 +126,7 @@ const RecentCard = ({
       )}
     >
       <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2 text-sm">
+        <div className="flex items-center gap-2 text-sm text-nowrap">
           <Components.Icon id={id} />
           <ResourceName type={type} id={id} />
         </div>