improve dashboard responsiveness

frontend/src/components/layouts.tsx

@@ -35,7 +35,7 @@ export const Layout = () => {
       <div className="h-screen overflow-y-auto">
         <div className="container">
           <Sidebar />
-          <div className="md:ml-64 md:pl-8 py-24">
+          <div className="lg:ml-64 lg:pl-8 py-24">
             <Outlet />
           </div>
         </div>
@@ -53,7 +53,6 @@ interface PageProps {
   subtitle?: ReactNode;
   actions?: ReactNode;
   superHeader?: ReactNode;
-  wrapSize?: "md" | "lg" | "xl" | "2xl";
 }
 
 export const Page = ({
@@ -72,7 +71,7 @@ export const Page = ({
         {superHeader}
         {(title || icon || subtitle || actions) && (
           <div
-            className={`flex flex-col gap-6 lg:flex-row lg:gap-0 lg:justify-between`}
+            className={`flex flex-col gap-6 md:flex-row md:gap-0 md:justify-between`}
           >
             <div className="flex flex-col gap-4">
               <div className="flex flex-wrap gap-4 items-center">
@@ -89,7 +88,7 @@ export const Page = ({
     ) : (
       (title || icon || subtitle || actions) && (
         <div
-          className={`flex flex-col gap-6 lg:flex-row lg:gap-0 lg:justify-between`}
+          className={`flex flex-col gap-6 md:flex-row md:gap-0 md:justify-between`}
         >
           <div className="flex flex-col gap-4">
             <div className="flex flex-wrap gap-4 items-center">

frontend/src/components/sidebar.tsx

@@ -17,7 +17,7 @@ import { homeViewAtom } from "@main";
 export const Sidebar = () => {
   const [view, setView] = useAtom(homeViewAtom);
   return (
-    <div className="fixed top-24 w-64 border-r hidden md:block pr-8 pb-4 h-[85vh] overflow-y-auto">
+    <div className="fixed top-24 w-64 border-r hidden lg:block pr-8 pb-4 h-[85vh] overflow-y-auto">
       <div className="flex flex-col gap-1">
         <p className="pl-4 pb-1 text-xs text-muted-foreground">Overviews</p>
         <SidebarLink

frontend/src/components/topbar.tsx

@@ -47,14 +47,14 @@ export const Topbar = () => {
 
   return (
     <div className="fixed top-0 w-full bg-background z-50 border-b shadow-sm">
-      <div className="container h-16 flex items-center justify-between md:grid md:grid-cols-2 lg:grid-cols-3">
+      <div className="container h-16 flex items-center justify-between md:grid md:grid-cols-[auto_1fr] lg:grid-cols-3">
         {/* Logo */}
         <Link
           to="/"
           className="flex gap-3 items-center text-2xl tracking-widest md:mx-2"
         >
           <img src="/monitor-circle.png" className="w-[28px] dark:invert" />
-          <div className="hidden md:block">MONITOR</div>
+          <div className="hidden lg:block">MONITOR</div>
         </Link>
 
         {/* Searchbar */}
@@ -131,7 +131,7 @@ const MobileDropdown = () => {
 
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger asChild className="md:hidden justify-self-end">
+      <DropdownMenuTrigger asChild className="lg:hidden justify-self-end">
         <Button
           variant="ghost"
           className="flex justify-start items-center gap-2 w-36 px-3"

frontend/src/lib/socket.tsx

@@ -266,7 +266,7 @@ export const WsStatusIndicator = () => {
       variant="ghost"
       onClick={onclick}
       size="icon"
-      className="hidden sm:inline-flex"
+      className="hidden lg:inline-flex"
     >
       <Circle
         className={cn(

frontend/src/pages/home/dashboard.tsx

@@ -84,14 +84,18 @@ const ResourceRow = ({ type }: { type: UsableResource }) => {
           <History className="w-4" />
           Recently Viewed
         </p>
-        <div className="h-52 grid sm:grid-cols-2 md:grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 gap-4">
+        <div className="h-52 grid sm:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 gap-4">
           {ids.map((id, i) => (
             <RecentCard
               key={type + id}
               type={type}
               id={id}
               className={
-                i > 3 ? "hidden lg:flex" : i > 1 ? "hidden md:flex" : undefined
+                i > 4
+                  ? "hidden 2xl:flex"
+                  : i > 1
+                  ? "hidden sm:flex lg:hidden xl:flex"
+                  : undefined
               }
             />
           ))}

frontend/src/pages/resources.tsx

@@ -36,7 +36,6 @@ export const Resources = () => {
 
   return (
     <Page
-      wrapSize="lg"
       title={`${name}s`}
       subtitle={
         <div className="text-muted-foreground">