Adopt shared WebUI structural primitives

webui/src/features/organizations/OrganizationsPage.tsx

@@ -8,14 +8,13 @@ import { FormLayout, ActionToolbar,
   Card,
   DataGrid,
   Dialog,
-  DismissibleAlert,
   DocumentationHelpLink,
   ExplorerTree,
   FormField,
   IconButton,
   LoadingFrame,
   ModuleSubnav,
-  PageTitle,
+  PageLayout,
   StatusBadge,
   TableActionGroup,
   ToggleSwitch,
@@ -26,6 +25,7 @@ import { FormLayout, ActionToolbar,
   useUnsavedDraftGuard,
   usePlatformUiCapabilities,
   useViewSurfaces,
+  WorkspaceLayout,
   type ApiSettings,
   type AuthInfo,
   type DataGridColumn,
@@ -998,13 +998,12 @@ export default function OrganizationsPage({
       : undefined;
 
   const content = (
-        <div className={`${mode === "workspace" ? "content-pad " : ""}organizations-page ${mode === "admin" ? "organizations-admin-page" : ""}`.trim()}>
-          <div className="page-heading split organizations-heading">
-            <div>
-              <PageTitle loading={loading}>{title}</PageTitle>
-              <p>{description}</p>
-            </div>
-            <ActionToolbar className="organizations-toolbar">
+        <>
+          <PageLayout
+            title={title}
+            description={description}
+            actions={(
+              <>
               <DocumentationHelpLink reference={ORGANIZATIONS_DOCUMENTATION} />
               <Button
                 type="button"
@@ -1015,11 +1014,15 @@ export default function OrganizationsPage({
               >
                 <RefreshCw size={16} aria-hidden="true" /> i18n:govoplan-organizations.reload.cce71553
               </Button>
-            </ActionToolbar>
-          </div>
-
-          {error && <DismissibleAlert tone="danger" resetKey={error} floating>{error}</DismissibleAlert>}
-          {success && !error && <DismissibleAlert tone="success" resetKey={success} floating>{success}</DismissibleAlert>}
+              </>
+            )}
+            mode={mode === "workspace" ? "workspace" : "embedded"}
+            headerLoading={loading}
+            error={error}
+            success={error ? "" : success}
+            className={`organizations-page ${mode === "admin" ? "organizations-admin-page" : ""}`.trim()}
+            headerClassName="organizations-heading"
+          >
           {!canWriteActive && (
             <ActionBlockerHint
               reason={{
@@ -1044,23 +1047,30 @@ export default function OrganizationsPage({
             {active === "relations" && renderRelationsSection()}
             {active === "functions" && renderFunctionsSection()}
           </LoadingFrame>
+          </PageLayout>
           {renderEditorDialog()}
-        </div>
+        </>
   );
 
   if (mode === "admin") return content;
 
   return (
-    <div className="workspace organizations-workspace">
-      <ModuleSubnav
-        active={active}
-        groups={visibleSectionGroups}
-        onSelect={(section) => requestDiscard(() => setActive(section))}
-      />
-      <main className="workspace-content">
-        {content}
-      </main>
-    </div>
+    <WorkspaceLayout
+      className="organizations-workspace"
+      primarySize="wide"
+      primary={(
+        <ModuleSubnav
+          active={active}
+          groups={visibleSectionGroups}
+          onSelect={(section) => requestDiscard(() => setActive(section))}
+        />
+      )}
+      primaryLabel="i18n:govoplan-organizations.organization_model.5945c48a"
+      contentLabel={title}
+      documentationType={mode === "admin" ? "admin" : "user"}
+    >
+      {content}
+    </WorkspaceLayout>
   );
 
   function renderModelSection() {

webui/src/styles/organizations.css

@@ -1,30 +1,3 @@
-.organizations-workspace {
-  grid-template-columns: 230px minmax(0, 1fr);
-  background: var(--bg);
-}
-
-.organizations-page {
-  display: grid;
-  gap: 18px;
-  width: 100%;
-}
-
-.organizations-admin-page {
-  max-width: 100%;
-}
-
-.organizations-heading {
-  margin-bottom: 4px;
-}
-
-.organizations-toolbar {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 12px;
-  flex-wrap: wrap;
-}
-
 .organizations-check-list {
   display: grid;
   gap: 10px;
@@ -67,11 +40,6 @@
   color: var(--muted);
 }
 
-@media (max-width: 900px) {
-  .organizations-workspace {
-    grid-template-columns: 1fr;
-  }
-}
 .organization-upgrade-toolbar {
   display: grid;
   grid-template-columns: minmax(16rem, 1fr) auto;