Fit and finish updates for the new UX

src/interface/web/app/agents/agents.module.css

@@ -16,16 +16,17 @@ div.agentPersonality {
     overflow: hidden;
 }
 
+div.pageLayout {
+    max-width: 60vw;
+    margin: auto;
+    margin-bottom: 2rem;
+}
+
 div.sidePanel {
     position: fixed;
     height: 100%;
 }
 
-div.pageLayout {
-    gap: 1rem;
-}
-
-
 button.infoButton {
     border: none;
     background-color: transparent !important;
@@ -46,12 +47,21 @@ div.agentList {
 }
 
 
-@media only screen and (max-width: 700px) {
+@media only screen and (max-width: 768px) {
     div.agentList {
         width: 100%;
         padding: 0;
         margin-right: auto;
         margin-left: auto;
         grid-template-columns: 1fr;
     }
+
+    div.pageLayout {
+        max-width: 90vw;
+    }
+
+    div.sidePanel {
+        position: relative;
+        height: 100%;
+    }
 }

src/interface/web/app/agents/page.tsx

@@ -254,9 +254,6 @@ export default function Agents() {
     if (!data) {
         return (
             <main className={styles.main}>
-                <div className={`${styles.titleBar} text-5xl`}>
-                    Agents
-                </div>
                 <div className={styles.agentList}>
                     <InlineLoading /> booting up your agents
                 </div>
@@ -265,27 +262,18 @@ export default function Agents() {
     }
 
     return (
-        <main className={`${styles.main} w-full mx-auto`}>
-            <div className="float-right w-fit h-fit">
-                <NavMenu selected="Agents" />
-            </div>
-            {
-                showLoginPrompt &&
-                <LoginPrompt
-                    loginRedirectMessage="Sign in to start chatting with a specialized agent"
-                    onOpenChange={setShowLoginPrompt} />
-            }
-            <div className={`${styles.pageLayout} w-full mx-auto`}>
+        <main className={`w-full mx-auto`}>
+            <div className={`grid w-full mx-auto`}>
                 <div className={`${styles.sidePanel} top-0`}>
                     <SidePanel
                         conversationId={null}
                         uploadedFiles={[]}
                         isMobileWidth={isMobileWidth}
                     />
                 </div>
-                <div className={`mx-auto ${isMobileWidth ? "w-11/12" : "w-1/2"} pt-4`}>
-                    <div className="pt-8 flex justify-between align-middle w-full">
-                        <h1 className="text-3xl">Agents</h1>
+                <div className={`${styles.pageLayout} w-full`}>
+                    <div className={`pt-6 md:pt-8 flex justify-between`}>
+                        <h1 className="text-3xl flex items-center">Agents</h1>
                         <div className="ml-auto float-right border p-2 pt-3 rounded-xl font-bold hover:bg-stone-100 dark:hover:bg-neutral-900">
                             <TooltipProvider>
                                 <Tooltip>
@@ -302,6 +290,12 @@ export default function Agents() {
                             </TooltipProvider>
                         </div>
                     </div>
+                    {
+                        showLoginPrompt &&
+                        <LoginPrompt
+                            loginRedirectMessage="Sign in to start chatting with a specialized agent"
+                            onOpenChange={setShowLoginPrompt} />
+                    }
                     <Alert className='bg-secondary border-none my-4'>
                         <AlertDescription>
                             <Lightning weight={'fill'} className='h-4 w-4 text-purple-400 inline' />

src/interface/web/app/automations/automations.module.css

@@ -28,4 +28,9 @@ div.sidePanel {
     div.pageLayout {
         max-width: 90vw;
     }
+
+    div.sidePanel {
+        position: relative;
+        height: 100%;
+    }
 }