fix(frontend): Fix page layouts (sizing + padding) (#9311)

- Resolves #9310

### Changes 🏗️

- Make base layout full width and fix its sizing behavior
  - Fix navbar overflowing on the right
- Set padding on `/monitoring`
- Make `/login` and `/signup` layouts self-center

### Checklist 📋

- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  - Check layouts of all pages
    - `/signup`
    - `/login`
    - `/build`
    - `/monitoring`
    - `/store`
    - `/store/profile`
    - `/store/dashboard`
    - `/store/settings`

---------

Co-authored-by: Zamil Majdy <zamil.majdy@agpt.co>

autogpt_platform/frontend/src/app/layout.tsx

@@ -44,7 +44,7 @@ export default async function RootLayout({
           // enableSystem
           disableTransitionOnChange
         >
-          <div className="flex min-h-screen flex-col items-center justify-center">
+          <div className="flex min-h-screen flex-col items-stretch justify-items-stretch">
             <Navbar
               links={[
                 {
@@ -102,7 +102,7 @@ export default async function RootLayout({
                 },
               ]}
             />
-            <main className="flex-1">{children}</main>
+            <main className="w-full flex-grow">{children}</main>
             <TallyPopupSimple />
           </div>
           <Toaster />

autogpt_platform/frontend/src/app/login/page.tsx

@@ -93,7 +93,7 @@ export default function LoginPage() {
   }
 
   return (
-    <AuthCard>
+    <AuthCard className="mx-auto">
       <AuthHeader>Login to your account</AuthHeader>
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onLogin)}>

autogpt_platform/frontend/src/app/monitoring/page.tsx

@@ -73,7 +73,7 @@ const Monitor = () => {
 
   return (
     <div
-      className="grid grid-cols-1 gap-4 md:grid-cols-5 lg:grid-cols-4 xl:grid-cols-10"
+      className="grid grid-cols-1 gap-4 p-4 md:grid-cols-5 lg:grid-cols-4 xl:grid-cols-10"
       data-testid="monitor-page"
     >
       <AgentFlowList

autogpt_platform/frontend/src/app/signup/page.tsx

@@ -84,7 +84,7 @@ export default function SignupPage() {
   }
 
   return (
-    <AuthCard>
+    <AuthCard className="mx-auto">
       <AuthHeader>Create a new account</AuthHeader>
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSignup)}>

autogpt_platform/frontend/src/components/agptui/Navbar.tsx

@@ -57,7 +57,7 @@ export const Navbar = async ({ links, menuItemGroups }: NavbarProps) => {
 
   return (
     <>
-      <nav className="sticky top-0 z-50 mx-[16px] hidden h-16 w-full max-w-[1600px] items-center justify-between rounded-bl-2xl rounded-br-2xl border border-white/50 bg-white/5 py-3 pl-6 pr-3 backdrop-blur-[26px] dark:border-gray-700 dark:bg-gray-900 md:inline-flex">
+      <nav className="sticky top-0 z-50 mx-[16px] hidden h-16 max-w-[1600px] items-center justify-between rounded-bl-2xl rounded-br-2xl border border-white/50 bg-white/5 py-3 pl-6 pr-3 backdrop-blur-[26px] dark:border-gray-700 dark:bg-gray-900 md:inline-flex">
         <div className="flex items-center gap-11">
           <div className="relative h-10 w-[88.87px]">
             <IconAutoGPTLogo className="h-full w-full" />

autogpt_platform/frontend/src/components/auth/AuthCard.tsx

@@ -1,12 +1,19 @@
 import { ReactNode } from "react";
+import { cn } from "@/lib/utils";
 
 interface Props {
   children: ReactNode;
+  className?: string;
 }
 
-export default function AuthCard({ children }: Props) {
+export default function AuthCard({ children, className }: Props) {
   return (
-    <div className="flex h-[80vh] w-[32rem] items-center justify-center">
+    <div
+      className={cn(
+        "flex h-[80vh] w-[32rem] items-center justify-center",
+        className,
+      )}
+    >
       <div className="w-full max-w-md rounded-lg bg-white p-6 shadow-md">
         {children}
       </div>