Merge pull request #4681 from Infisical/nav-restructure

improvement(frontend): Implement new navigation structure

frontend/src/pages/organization/SettingsPage/SettingsPage.tsx

@@ -14,8 +14,12 @@ export const SettingsPage = () => {
         <title>{t("common.head-title", { title: t("settings.org.title") })}</title>
       </Helmet>
       <div className="flex w-full justify-center bg-bunker-800 text-white">
-        <div className="w-full max-w-7xl">
-          <PageHeader scope="org" title={t("settings.org.title")} />
+        <div className="w-full max-w-8xl">
+          <PageHeader
+            scope="org"
+            description="Configure organization-wide settings"
+            title={t("settings.org.title")}
+          />
           <OrgTabGroup />
         </div>
       </div>

frontend/src/pages/organization/SettingsPage/components/OrgTabGroup/OrgTabGroup.tsx

@@ -55,7 +55,7 @@ export const OrgTabGroup = () => {
   const [selectedTab, setSelectedTab] = useState(search.selectedTab || tabs[0].key);
 
   return (
-    <Tabs value={selectedTab} onValueChange={setSelectedTab}>
+    <Tabs orientation="vertical" value={selectedTab} onValueChange={setSelectedTab}>
       <TabList>
         {tabs.map((tab) => (
           <Tab variant="org" value={tab.key} key={tab.key}>