From c7b67a978e3b6ce8a45c6dadd84c37a982ddd644 Mon Sep 17 00:00:00 2001
From: Debanjum Singh Solanky <debanjum@gmail.com>
Date: Sun, 4 Aug 2024 18:15:58 +0530
Subject: [PATCH] Align agents and automation page structure, widths and
 spacings

- Remove invalid call to styles.main
- Remove unnecessary top padding above side pane to keep side pane at
  consistent position across web app
- Use same pageLayout styles and styling structure on agent like
  automation
- Vertically center automation section and page title on it's row
- Fix applying flex vs grid with tailwind
---
 .../web/app/agents/agents.module.css          | 15 +++++++----
 src/interface/web/app/agents/page.tsx         | 22 ++++++++--------
 src/interface/web/app/automations/page.tsx    | 26 +++++++++----------
 3 files changed, 33 insertions(+), 30 deletions(-)

diff --git a/src/interface/web/app/agents/agents.module.css b/src/interface/web/app/agents/agents.module.css
index 73cbd7a3..8cc0cda5 100644
--- a/src/interface/web/app/agents/agents.module.css
+++ b/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;
@@ -55,6 +56,10 @@ div.agentList {
         grid-template-columns: 1fr;
     }
 
+    div.pageLayout {
+        max-width: 90vw;
+    }
+
     div.sidePanel {
         position: relative;
         height: 100%;
diff --git a/src/interface/web/app/agents/page.tsx b/src/interface/web/app/agents/page.tsx
index f0fe38c3..f9c3a36b 100644
--- a/src/interface/web/app/agents/page.tsx
+++ b/src/interface/web/app/agents/page.tsx
@@ -262,14 +262,8 @@ export default function Agents() {
     }
 
     return (
-        <main className={`${styles.main} w-full mx-auto`}>
-            {
-                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}
@@ -277,9 +271,9 @@ export default function Agents() {
                         isMobileWidth={isMobileWidth}
                     />
                 </div>
-                <div className={`mx-auto ${isMobileWidth ? "w-11/12" : "w-1/2"} pt-4`}>
-                    <div className={`pt-6 md: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>
@@ -296,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' />
diff --git a/src/interface/web/app/automations/page.tsx b/src/interface/web/app/automations/page.tsx
index f1cb0f50..846d5843 100644
--- a/src/interface/web/app/automations/page.tsx
+++ b/src/interface/web/app/automations/page.tsx
@@ -342,7 +342,7 @@ function AutomationsCard(props: AutomationsCardProps) {
                     </Popover>
                 </CardTitle>
             </CardHeader>
-            <CardContent className='text-secondary-foreground'>
+            <CardContent className='text-secondary-foreground break-all'>
                 {updatedAutomationData?.query_to_run || automation.query_to_run}
             </CardContent>
             <CardFooter className="flex flex-col items-start md:flex-row md:justify-between md:items-center gap-2">
@@ -873,7 +873,7 @@ function AutomationComponentWrapper(props: AutomationComponentWrapperProps) {
                 }}>
                 <DrawerTrigger asChild>
                     <Button
-                        className='shadow-sm'
+                        className='shadow-sm justify-start'
                         variant="outline">
                         <Plus className='h-4 w-4 mr-2' />
                         {props.callToAction}
@@ -902,7 +902,7 @@ function AutomationComponentWrapper(props: AutomationComponentWrapperProps) {
                 >
                     <DialogTrigger asChild>
                         <Button
-                            className='shadow-sm'
+                            className='shadow-sm justify-start'
                             variant="outline">
                             <Plus className='h-4 w-4 mr-2' />
                             {props.callToAction}
@@ -972,8 +972,8 @@ export default function Automations() {
     if (error) return <InlineLoading message='Oops, something went wrong. Please refresh the page.' />;
 
     return (
-        <main className={`${styles.main} w-full ml-auto mr-auto pt-4`}>
-            <div className={`grid w-full ml-auto mr-auto`}>
+        <main className={`w-full mx-auto`}>
+            <div className={`grid w-full mx-auto`}>
                 <div className={`${styles.sidePanel} top-0`}>
                     <SidePanel
                         conversationId={null}
@@ -982,14 +982,13 @@ export default function Automations() {
                     />
                 </div>
                 <div className={`${styles.pageLayout} w-full`}>
-                    <div className='py-4 sm:flex sm:justify-between grid gap-1'>
-                        <h1 className="text-3xl pt-6">Automations</h1>
+                    <div className='pt-6 md:pt-8 grid gap-1 md:flex md:justify-between'>
+                        <h1 className="text-3xl flex items-center">Automations</h1>
                         <div className='flex flex-wrap gap-2 items-center justify-start'>
                             {
                                 authenticatedData ? (
                                     <span className='rounded-lg text-sm border-secondary border p-1 flex items-center shadow-sm' ><Envelope className='h-4 w-4 mr-2 inline text-orange-500 shadow-sm' />{authenticatedData.email}</span>
-                                )
-                                    : null
+                                ) : null
                             }
                             {
                                 ipLocationData && (
@@ -999,7 +998,6 @@ export default function Automations() {
                             {
                                 ipLocationData && (
                                     <span className='rounded-lg text-sm border-secondary border p-1 flex items-center shadow-sm' ><Clock className='h-4 w-4 mr-2 inline text-green-500' />{ipLocationData ? `${ipLocationData.timezone}` : 'Unknown'}</span>
-
                                 )
                             }
                         </div>
@@ -1007,17 +1005,17 @@ export default function Automations() {
                     {
                         showLoginPrompt && (
                             <LoginPrompt
-                                onOpenChange={setShowLoginPrompt}
-                                loginRedirectMessage={"Create an account to make your own automation"} />
+                                loginRedirectMessage={"Create an account to make your own automation"}
+                                onOpenChange={setShowLoginPrompt} />
                         )
                     }
-                    <Alert className='bg-secondary border-none'>
+                    <Alert className='bg-secondary border-none my-4'>
                         <AlertDescription>
                             <Lightning weight={'fill'} className='h-4 w-4 text-purple-400 inline' />
                             <span className='font-bold'>How it works</span> Automations help you structure your time by automating tasks you do regularly. Build your own, or try out our presets. Get results straight to your inbox.
                         </AlertDescription>
                     </Alert>
-                    <div className='flex justify-between py-4'>
+                    <div className='flex justify-between items-center py-4'>
                         <h3
                             className="text-xl">
                             Your Creations