refactor(fe): remove "container" divs

web/src/app/admin/add-connector/page.tsx

@@ -267,7 +267,7 @@ export default function Page() {
   };
 
   return (
-    <div className="container">
+    <>
       <AdminPageTitle
         icon={SvgUploadCloud}
         title="Add Connector"
@@ -331,6 +331,6 @@ export default function Page() {
             </div>
           </div>
         ))}
-    </div>
+    </>
   );
 }

web/src/app/admin/api-key/page.tsx

@@ -221,10 +221,10 @@ function Main() {
 
 export default function Page() {
   return (
-    <div className="container">
+    <>
       <AdminPageTitle title="API Keys" icon={SvgKey} />
 
       <Main />
-    </div>
+    </>
   );
 }

web/src/app/admin/assistants/page.tsx

@@ -139,7 +139,7 @@ export default function Page() {
   });
 
   return (
-    <div className="container">
+    <>
       <AdminPageTitle icon={SvgOnyxOctagon} title="Assistants" />
 
       {isLoading && <ThreeDotsLoader />}
@@ -164,6 +164,6 @@ export default function Page() {
           refreshPersonas={refresh}
         />
       )}
-    </div>
+    </>
   );
 }

web/src/app/admin/bots/[bot-id]/channels/new/page.tsx

@@ -53,7 +53,7 @@ async function NewChannelConfigPage(props: {
   }
 
   return (
-    <div className="container max-w-4xl">
+    <>
       <BackButton />
       <AdminPageTitle
         icon={<SourceIcon iconSize={32} sourceType={ValidSources.Slack} />}
@@ -66,7 +66,7 @@ async function NewChannelConfigPage(props: {
         personas={assistantsResponse[0]}
         standardAnswerCategoryResponse={standardAnswerCategoryResponse}
       />
-    </div>
+    </>
   );
 }
 

web/src/app/admin/bots/[bot-id]/page.tsx

@@ -98,8 +98,8 @@ export default function Page({
   params: Promise<{ "bot-id": string }>;
 }) {
   return (
-    <div className="container">
+    <>
       <SlackBotEditPage params={params} />
-    </div>
+    </>
   );
 }

web/src/app/admin/bots/new/page.tsx

@@ -3,10 +3,10 @@ import { NewSlackBotForm } from "../SlackBotCreationForm";
 
 export default async function NewSlackBotPage() {
   return (
-    <div className="container">
+    <>
       <BackButton routerOverride="/admin/bots" />
 
       <NewSlackBotForm />
-    </div>
+    </>
   );
 }

web/src/app/admin/bots/page.tsx

@@ -79,7 +79,7 @@ const Main = () => {
 
 const Page = () => {
   return (
-    <div className="container">
+    <>
       <AdminPageTitle
         icon={<SourceIcon iconSize={36} sourceType={ValidSources.Slack} />}
         title="Slack Bots"
@@ -87,7 +87,7 @@ const Page = () => {
       <InstantSSRAutoRefresh />
 
       <Main />
-    </div>
+    </>
   );
 };
 

web/src/app/admin/configuration/document-processing/page.tsx

@@ -149,12 +149,12 @@ function Main() {
 
 export default function Page() {
   return (
-    <div className="container">
+    <>
       <AdminPageTitle
         title="Document Processing"
         icon={<DocumentIcon2 size={32} className="my-auto" />}
       />
       <Main />
-    </div>
+    </>
   );
 }

web/src/app/admin/configuration/llm/page.tsx

@@ -5,10 +5,10 @@ import { LLMConfiguration } from "./LLMConfiguration";
 import { SvgCpu } from "@opal/icons";
 export default function Page() {
   return (
-    <div className="container">
+    <>
       <AdminPageTitle title="LLM Setup" icon={SvgCpu} />
 
       <LLMConfiguration />
-    </div>
+    </>
   );
 }

web/src/app/admin/configuration/search/page.tsx

@@ -178,9 +178,9 @@ function Main() {
 
 export default function Page() {
   return (
-    <div className="container">
+    <>
       <AdminPageTitle title="Search Settings" icon={SvgSearch} />
       <Main />
-    </div>
+    </>
   );
 }

web/src/app/admin/configuration/web-search/page.tsx

@@ -369,7 +369,7 @@ export default function Page() {
         : undefined);
 
     return (
-      <div className="container">
+      <>
         <AdminPageTitle
           title="Web Search"
           icon={SvgGlobe}
@@ -383,13 +383,13 @@ export default function Page() {
             </Text>
           )}
         </Callout>
-      </div>
+      </>
     );
   }
 
   if (isLoading) {
     return (
-      <div className="container">
+      <>
         <AdminPageTitle
           title="Web Search"
           icon={SvgGlobe}
@@ -398,7 +398,7 @@ export default function Page() {
         <div className="mt-8">
           <ThreeDotsLoader />
         </div>
-      </div>
+      </>
     );
   }
 
@@ -765,7 +765,7 @@ export default function Page() {
 
   return (
     <>
-      <div className="container">
+      <>
         <AdminPageTitle icon={SvgGlobe} title="Web Search" />
         <div className="pt-4 pb-4">
           <Text as="p" className="text-text-dark">
@@ -1184,7 +1184,7 @@ export default function Page() {
             </div>
           </div>
         </div>
-      </div>
+      </>
 
       <WebProviderSetupModal
         isOpen={selectedProviderType !== null}

web/src/app/admin/debug/page.tsx

@@ -116,10 +116,10 @@ function Main() {
 
 const Page = () => {
   return (
-    <div className="container">
+    <>
       <AdminPageTitle icon={<FiDownload size={32} />} title="Debug Logs" />
       <Main />
-    </div>
+    </>
   );
 };
 

web/src/app/admin/documents/explorer/page.tsx

@@ -9,7 +9,7 @@ export default async function Page(props: {
   const { connectors, documentSets } = await fetchValidFilterInfo();
 
   return (
-    <div className="container">
+    <>
       <AdminPageTitle
         icon={<SvgZoomIn className="stroke-text-04 h-8 w-8" />}
         title="Document Explorer"
@@ -20,6 +20,6 @@ export default async function Page(props: {
         connectors={connectors}
         documentSets={documentSets}
       />
-    </div>
+    </>
   );
 }

web/src/app/admin/documents/feedback/page.tsx

@@ -61,11 +61,11 @@ const Main = () => {
 
 const Page = () => {
   return (
-    <div className="container">
+    <>
       <AdminPageTitle icon={SvgThumbsUp} title="Document Feedback" />
 
       <Main />
-    </div>
+    </>
   );
 };
 

web/src/app/admin/documents/sets/[documentSetId]/page.tsx

@@ -102,10 +102,10 @@ export default function Page(props: {
   const documentSetId = parseInt(params.documentSetId);
 
   return (
-    <div className="container">
+    <>
       <BackButton />
 
       <Main documentSetId={documentSetId} />
-    </div>
+    </>
   );
 }

web/src/app/admin/documents/sets/new/page.tsx

@@ -63,7 +63,7 @@ function Main() {
 
 const Page = () => {
   return (
-    <div className="container">
+    <>
       <BackButton />
 
       <AdminPageTitle
@@ -72,7 +72,7 @@ const Page = () => {
       />
 
       <Main />
-    </div>
+    </>
   );
 };
 

web/src/app/admin/documents/sets/page.tsx

@@ -429,11 +429,11 @@ const Main = () => {
 
 const Page = () => {
   return (
-    <div className="container">
+    <>
       <AdminPageTitle icon={<BookmarkIcon size={32} />} title="Document Sets" />
 
       <Main />
-    </div>
+    </>
   );
 };
 

web/src/app/admin/indexing/status/page.tsx

@@ -213,7 +213,7 @@ export default function Status() {
   });
 
   return (
-    <div className="container">
+    <>
       {popup}
       <AdminPageTitle
         icon={<NotebookIcon size={32} />}
@@ -224,6 +224,6 @@ export default function Status() {
       />
 
       <Main />
-    </div>
+    </>
   );
 }

web/src/app/admin/kg/page.tsx

@@ -335,12 +335,12 @@ export default function Page() {
   }
 
   return (
-    <div className="container">
+    <>
       <AdminPageTitle
         title="Knowledge Graph"
         icon={<BrainIcon size={32} className="my-auto" />}
       />
       <Main />
-    </div>
+    </>
   );
 }

web/src/app/admin/settings/SettingsForm.tsx

@@ -220,7 +220,7 @@ export function SettingsForm() {
   }
 
   return (
-    <div className="flex flex-col pb-8">
+    <>
       {popup}
       <Title className="mb-4">Workspace Settings</Title>
       <label className="flex flex-col text-sm mb-4">
@@ -441,6 +441,6 @@ export function SettingsForm() {
           </div>
         </div>
       </div>
-    </div>
+    </>
   );
 }

web/src/app/admin/settings/page.tsx

@@ -6,7 +6,7 @@ import Text from "@/components/ui/text";
 import { SvgSettings } from "@opal/icons";
 export default function Page() {
   return (
-    <div className="container">
+    <>
       <AdminPageTitle title="Workspace Settings" icon={SvgSettings} />
 
       <Text className="mb-8">
@@ -14,6 +14,6 @@ export default function Page() {
       </Text>
 
       <SettingsForm />
-    </div>
+    </>
   );
 }

web/src/app/admin/token-rate-limits/page.tsx

@@ -225,9 +225,9 @@ function Main() {
 
 export default function Page() {
   return (
-    <div className="container">
+    <>
       <AdminPageTitle title="Token Rate Limits" icon={SvgShield} />
       <Main />
-    </div>
+    </>
   );
 }

web/src/app/admin/users/page.tsx

@@ -375,10 +375,10 @@ const AddUserButton = ({
 
 const Page = () => {
   return (
-    <div className="container">
+    <>
       <AdminPageTitle title="Manage Users" icon={SvgUser} />
       <SearchableTables />
-    </div>
+    </>
   );
 };
 

web/src/app/ee/admin/billing/page.tsx

@@ -18,12 +18,12 @@ export interface BillingInformation {
 
 export default function page() {
   return (
-    <div className="container max-w-4xl">
+    <>
       <AdminPageTitle
         title="Billing Information"
         icon={<MdOutlineCreditCard size={32} className="my-auto" />}
       />
       <BillingInformationPage />
-    </div>
+    </>
   );
 }

web/src/app/ee/admin/groups/[groupId]/page.tsx

@@ -51,7 +51,7 @@ const Page = (props: { params: Promise<{ groupId: string }> }) => {
   }
 
   return (
-    <div className="container">
+    <>
       <BackButton />
 
       <AdminPageTitle title={userGroup.name || "Unknown"} icon={SvgUsers} />
@@ -66,7 +66,7 @@ const Page = (props: { params: Promise<{ groupId: string }> }) => {
       ) : (
         <div>Unable to fetch User Group :(</div>
       )}
-    </div>
+    </>
   );
 };
 

web/src/app/ee/admin/groups/page.tsx

@@ -81,11 +81,11 @@ const Main = () => {
 
 const Page = () => {
   return (
-    <div className="container">
+    <>
       <AdminPageTitle title="Manage User Groups" icon={SvgUsers} />
 
       <Main />
-    </div>
+    </>
   );
 };
 

web/src/app/ee/admin/performance/query-history/page.tsx

@@ -5,10 +5,10 @@ import { QueryHistoryTable } from "@/app/ee/admin/performance/query-history/Quer
 import { SvgServer } from "@opal/icons";
 export default function QueryHistoryPage() {
   return (
-    <div className="container">
+    <>
       <AdminPageTitle title="Query History" icon={SvgServer} />
 
       <QueryHistoryTable />
-    </div>
+    </>
   );
 }

web/src/app/ee/admin/performance/usage/UsageReports.tsx

@@ -406,7 +406,7 @@ export default function UsageReports() {
   return (
     <>
       {isWaitingForReport && <Spinner />}
-      <div className="container">
+      <>
         <GenerateReportInput
           onReportGenerated={handleReportGenerated}
           isWaitingForReport={isWaitingForReport}
@@ -446,7 +446,7 @@ export default function UsageReports() {
           isWaitingForReport={isWaitingForReport}
           onNewReportDetected={handleNewReportDetected}
         />
-      </div>
+      </>
     </>
   );
 }

web/src/app/ee/admin/performance/usage/page.tsx

@@ -17,7 +17,7 @@ export default function AnalyticsPage() {
   const { personas } = useAdminPersonas();
 
   return (
-    <div className="container">
+    <>
       <AdminPageTitle title="Usage Statistics" icon={SvgActivity} />
       <AdminDateRangeSelector
         value={timeRange}
@@ -32,6 +32,6 @@ export default function AnalyticsPage() {
       />
       <Separator />
       <UsageReports />
-    </div>
+    </>
   );
 }

web/src/app/ee/admin/standard-answer/[id]/page.tsx

@@ -68,7 +68,7 @@ async function Page(props: { params: Promise<{ id: string }> }) {
   const standardAnswerCategories =
     (await standardAnswerCategoriesResponse.json()) as StandardAnswerCategory[];
   return (
-    <div className="container">
+    <>
       <BackButton />
       <AdminPageTitle
         title="Edit Standard Answer"
@@ -79,7 +79,7 @@ async function Page(props: { params: Promise<{ id: string }> }) {
         standardAnswerCategories={standardAnswerCategories}
         existingStandardAnswer={standardAnswer}
       />
-    </div>
+    </>
   );
 }
 

web/src/app/ee/admin/standard-answer/new/page.tsx

@@ -23,7 +23,7 @@ async function Page() {
     (await standardAnswerCategoriesResponse.json()) as StandardAnswerCategory[];
 
   return (
-    <div className="container">
+    <>
       <BackButton />
       <AdminPageTitle
         title="New Standard Answer"
@@ -33,7 +33,7 @@ async function Page() {
       <StandardAnswerCreationForm
         standardAnswerCategories={standardAnswerCategories}
       />
-    </div>
+    </>
   );
 }
 

web/src/app/ee/admin/standard-answer/page.tsx

@@ -429,13 +429,13 @@ const Main = () => {
 
 const Page = () => {
   return (
-    <div className="container">
+    <>
       <AdminPageTitle
         icon={<ClipboardIcon size={32} />}
         title="Standard Answers"
       />
       <Main />
-    </div>
+    </>
   );
 };
 

web/src/components/admin/ClientLayout.tsx

@@ -49,7 +49,7 @@ export function ClientLayout({
             enableCloudSS={enableCloud}
             enableEnterpriseSS={enableEnterprise}
           />
-          <div className="flex flex-1 flex-col min-w-0 min-h-0 overflow-y-auto pt-10 pb-4 px-4 md:px-12">
+          <div className="flex flex-1 flex-col min-w-0 min-h-0 overflow-y-auto py-10 px-4 md:px-12">
             {children}
           </div>
         </>