1.0.80

packages/shared/src/components/settings/ServerSettingsModal.tsx

@@ -60,6 +60,17 @@ export function ServerSettingsModal({ isOpen, onClose, initialTab }: ServerSetti
 		return () => document.removeEventListener('keydown', onKey);
 	}, [isOpen, onClose]);
 
+	// Roles view takes over the whole settings surface — its own
+	// sidebar (back + create + role list) and its own main column
+	// (role editor). We still delegate the back button to flipping
+	// activeTab back to 'overview' so the outer modal stays open.
+	//
+	// IMPORTANT: this hook must run before any conditional early return
+	// (mobile shortcut below, `!isOpen` guard) so the hook count stays
+	// stable across renders when the viewport crosses the mobile
+	// breakpoint. React error #300 if this moves back under `isMobile`.
+	const rolesView = useRolesView({ onBack: () => setActiveTab('overview') });
+
 	// Mobile gets the full-screen overlay with a category list ↔ panel
 	// flow, desktop gets the two-column modal below. Pass the raw
 	// `initialTab` (NOT the resolved version) so mobile lands on the
@@ -74,12 +85,6 @@ export function ServerSettingsModal({ isOpen, onClose, initialTab }: ServerSetti
 		);
 	}
 
-	// Roles view takes over the whole settings surface — its own
-	// sidebar (back + create + role list) and its own main column
-	// (role editor). We still delegate the back button to flipping
-	// activeTab back to 'overview' so the outer modal stays open.
-	const rolesView = useRolesView({ onBack: () => setActiveTab('overview') });
-
 	if (!isOpen) return null;
 
 	const active = TABS.find((t) => t.id === activeTab) ?? TABS[0];