refactor(fe): remove "container" divs

jmelahman · jmelahman · commit 865eb6273345 · 2026-01-07T12:48:19.000-08:00
diff --git a/web/src/app/admin/add-connector/page.tsx b/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>
+    </>
   );
 }
diff --git a/web/src/app/admin/api-key/page.tsx b/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>
+    </>
   );
 }
diff --git a/web/src/app/admin/assistants/page.tsx b/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>
+    </>
   );
 }
diff --git a/web/src/app/admin/bots/[bot-id]/channels/new/page.tsx b/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>
+    </>
   );
 }
 
diff --git a/web/src/app/admin/bots/[bot-id]/page.tsx b/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>
+    </>
   );
 }
diff --git a/web/src/app/admin/bots/new/page.tsx b/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>
+    </>
   );
 }
diff --git a/web/src/app/admin/bots/page.tsx b/web/src/app/admin/bots/page.tsx
@@ -79,15 +79,15 @@ const Main = () => {
 
 const Page = () => {
   return (
-    <div className="container">
+    <>
       <AdminPageTitle
         icon={<SourceIcon iconSize={36} sourceType={ValidSources.Slack} />}
         title="Slack Bots"
       />
       <InstantSSRAutoRefresh />
 
       <Main />
-    </div>
+    </>
   );
 };
 
diff --git a/web/src/app/admin/configuration/document-processing/page.tsx b/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>
+    </>
   );
 }
diff --git a/web/src/app/admin/configuration/llm/page.tsx b/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>
+    </>
   );
 }
diff --git a/web/src/app/admin/configuration/search/page.tsx b/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>
+    </>
   );
 }
diff --git a/web/src/app/admin/configuration/web-search/page.tsx b/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}
diff --git a/web/src/app/admin/debug/page.tsx b/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>
+    </>
   );
 };
 
diff --git a/web/src/app/admin/documents/explorer/page.tsx b/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>
+    </>
   );
 }
diff --git a/web/src/app/admin/documents/feedback/page.tsx b/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>
+    </>
   );
 };
 
diff --git a/web/src/app/admin/documents/sets/[documentSetId]/page.tsx b/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>
+    </>
   );
 }
diff --git a/web/src/app/admin/documents/sets/new/page.tsx b/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>
+    </>
   );
 };
 
diff --git a/web/src/app/admin/documents/sets/page.tsx b/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>
+    </>
   );
 };
 
diff --git a/web/src/app/admin/indexing/status/page.tsx b/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>
+    </>
   );
 }
diff --git a/web/src/app/admin/kg/page.tsx b/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>
+    </>
   );
 }
diff --git a/web/src/app/admin/settings/SettingsForm.tsx b/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>
+    </>
   );
 }
diff --git a/web/src/app/admin/settings/page.tsx b/web/src/app/admin/settings/page.tsx
@@ -6,14 +6,14 @@ 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">
         Manage general Onyx settings applicable to all users in the workspace.
       </Text>
 
       <SettingsForm />
-    </div>
+    </>
   );
 }
diff --git a/web/src/app/admin/token-rate-limits/page.tsx b/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>
+    </>
   );
 }
diff --git a/web/src/app/admin/users/page.tsx b/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>
+    </>
   );
 };
 
diff --git a/web/src/app/ee/admin/billing/page.tsx b/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>
+    </>
   );
 }
diff --git a/web/src/app/ee/admin/groups/[groupId]/page.tsx b/web/src/app/ee/admin/groups/[groupId]/page.tsx
diff --git a/web/src/app/ee/admin/groups/page.tsx b/web/src/app/ee/admin/groups/page.tsx
diff --git a/web/src/app/ee/admin/performance/query-history/page.tsx b/web/src/app/ee/admin/performance/query-history/page.tsx
diff --git a/web/src/app/ee/admin/performance/usage/UsageReports.tsx b/web/src/app/ee/admin/performance/usage/UsageReports.tsx
diff --git a/web/src/app/ee/admin/performance/usage/page.tsx b/web/src/app/ee/admin/performance/usage/page.tsx
diff --git a/web/src/app/ee/admin/standard-answer/[id]/page.tsx b/web/src/app/ee/admin/standard-answer/[id]/page.tsx
diff --git a/web/src/app/ee/admin/standard-answer/new/page.tsx b/web/src/app/ee/admin/standard-answer/new/page.tsx
diff --git a/web/src/app/ee/admin/standard-answer/page.tsx b/web/src/app/ee/admin/standard-answer/page.tsx
diff --git a/web/src/components/admin/ClientLayout.tsx b/web/src/components/admin/ClientLayout.tsx
