improve log responsiveness

frontend/src/components/layouts.tsx

@@ -51,6 +51,7 @@ interface PageProps {
   children?: ReactNode;
   subtitle?: ReactNode;
   actions?: ReactNode;
+  wrapSize?: "md" | "lg" | "xl" | "2xl";
 }
 
 export const Page = ({
@@ -61,10 +62,13 @@ export const Page = ({
   subtitle,
   actions,
   children,
+  wrapSize = "lg",
 }: PageProps) => (
   <div className="flex flex-col gap-10 container py-8 pr-12">
     {(title || icon || subtitle || actions) && (
-      <div className="flex flex-col gap-6 xl:flex-row xl:gap-0 xl:items-start xl:justify-between">
+      <div
+        className={`flex flex-col gap-6 ${wrapSize}:flex-row ${wrapSize}:gap-0 ${wrapSize}:items-start ${wrapSize}:justify-between`}
+      >
         <div className="flex flex-col gap-4">
           <div className="flex flex-wrap gap-4 items-center">
             {icon}
@@ -97,7 +101,7 @@ export const Section = ({
   children,
 }: SectionProps) => (
   <div className="flex flex-col gap-4">
-    <div className="flex items-start justify-between">
+    <div className="flex flex-wrap gap-2 items-start justify-between">
       {title || icon ? (
         <div className="flex items-center gap-2 text-muted-foreground">
           {icon}

frontend/src/components/resources/deployment/log.tsx

@@ -77,7 +77,9 @@ const DeploymentLogsInner = ({
       actions={
         <div className="flex items-center gap-4">
           <div className="flex items-center gap-2">
-            <div className="text-muted-foreground">Invert Search </div>
+            <div className="text-muted-foreground">
+              Invert <div className="hidden xl:block">Search</div>
+            </div>
             <Switch checked={invert} onCheckedChange={setInvert} />
           </div>
           {terms.map((term, index) => (
@@ -100,7 +102,7 @@ const DeploymentLogsInner = ({
               onKeyDown={(e) => {
                 if (e.key === "Enter") addTerm();
               }}
-              className="w-[240px]"
+              className="w-[180px] xl:w-[240px]"
             />
             <Button
               variant="ghost"

frontend/src/components/updates/resource.tsx

@@ -83,9 +83,9 @@ export const AllUpdates = () => {
         </Link>
       }
     >
-      <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
-        {updates?.updates.slice(0, 3).map((update) => (
-          <UpdateCard update={update} key={update.id} />
+      <div className="grid md:grid-cols-2 xl:grid-cols-3 gap-4">
+        {updates?.updates.slice(0, 3).map((update, i) => (
+          <UpdateCard update={update} key={update.id} smallHidden={i > 1} />
         ))}
       </div>
     </Section>

frontend/src/pages/resource.tsx

@@ -43,6 +43,7 @@ export const Resource = () => {
 
   return (
     <Page
+      wrapSize="xl"
       title={name}
       icon={<Components.BigIcon id={id} />}
       titleRight={