fix(settings): address review — remove aside footgun, sticky tabs, restore tooltips

- Remove the SettingsHeaderConfig 'aside' escape hatch (the last stale-prone,
  div-admitting path). Add SettingsAction.onPrefetch so the teammates Invite chip
  (hover-prefetch) is pure data — nothing renders header JSX now, so the
  signature-vs-ref staleness cursor flagged is gone.
- useIsomorphicLayoutEffect for header registration: section switches flush the
  new header before paint (no stale/blank header frame).
- group-detail: pin the config tabs (sticky top-0) so they stay visible while the
  detail body scrolls.
- Restore the team-management Invite disabled-reason tooltip via the new
  SettingsAction.tooltip field.

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/settings/components/settings-header/settings-header.tsx

@@ -8,12 +8,16 @@ import {
   useCallback,
   useContext,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
 } from 'react'
 import { Chip, ChipInput, ChipLink, Search, Tooltip } from '@sim/emcn'
 
+/** `useLayoutEffect` on the client (flush header changes before paint), `useEffect` during SSR. */
+const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect
+
 /** The strict contract for a settings header action — rendered as a {@link Chip}, data only. */
 export interface SettingsAction {
   text: string
@@ -24,6 +28,8 @@ export interface SettingsAction {
   disabled?: boolean
   /** Hover/focus tooltip (e.g. why the action is disabled) — the shell renders it; no per-page JSX. */
   tooltip?: string
+  /** Warm a lazy resource on hover/focus (e.g. prefetch the upgrade flow). */
+  onPrefetch?: () => void
 }
 
 export interface SettingsHeaderSearch {
@@ -49,8 +55,6 @@ export interface SettingsHeaderConfig {
   search?: SettingsHeaderSearch
   /** Forwarded to the scroll region (e.g. for programmatic scroll-to-bottom). */
   scrollContainerRef?: Ref<HTMLDivElement>
-  /** Escape hatch for a right-aligned widget that genuinely cannot be a chip. */
-  aside?: ReactNode
 }
 
 const EMPTY_CONFIG: SettingsHeaderConfig = {}
@@ -82,9 +86,9 @@ function computeSignature(c: SettingsHeaderConfig): string {
       x.disabled ?? false,
       x.icon ? 1 : 0,
       x.tooltip ?? '',
+      x.onPrefetch ? 1 : 0,
     ]),
     s: c.search ? [c.search.value, c.search.placeholder ?? '', c.search.disabled ?? false] : null,
-    aside: c.aside ? 1 : 0,
   })
 }
 
@@ -111,25 +115,25 @@ export function SettingsHeaderProvider({ children }: { children: ReactNode }) {
 export function useSettingsHeader(config: SettingsHeaderConfig) {
   const register = useContext(RegisterContext)
 
-  useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     register?.(config)
   })
 
-  useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     return () => register?.(EMPTY_CONFIG)
   }, [register])
 }
 
 /**
  * The single owner of settings page chrome: the header bar (back chip, Docs link,
- * action chips, `aside`), the scroll region, and the centered column led by the
- * title + description, then search and `{children}`.
+ * action chips), the scroll region, and the centered column led by the title +
+ * description, then search and `{children}`.
  */
 export function SettingsHeaderShell({ children }: { children: ReactNode }) {
   const read = useContext(ReadContext)
   const configRef = read?.configRef
   const config = configRef?.current ?? EMPTY_CONFIG
-  const { title, description, docsLink, back, actions, search, aside, scrollContainerRef } = config
+  const { title, description, docsLink, back, actions, search, scrollContainerRef } = config
 
   return (
     <div className='flex h-full flex-col bg-[var(--bg)]'>
@@ -147,7 +151,6 @@ export function SettingsHeaderShell({ children }: { children: ReactNode }) {
               Docs
             </ChipLink>
           )}
-          {aside}
           {actions?.map((action, index) => {
             const chip = (
               <Chip
@@ -156,6 +159,16 @@ export function SettingsHeaderShell({ children }: { children: ReactNode }) {
                 active={action.active}
                 leftIcon={action.icon}
                 onClick={() => configRef?.current.actions?.[index]?.onSelect()}
+                onMouseEnter={
+                  action.onPrefetch
+                    ? () => configRef?.current.actions?.[index]?.onPrefetch?.()
+                    : undefined
+                }
+                onFocus={
+                  action.onPrefetch
+                    ? () => configRef?.current.actions?.[index]?.onPrefetch?.()
+                    : undefined
+                }
                 disabled={action.disabled}
               >
                 {action.text}

apps/sim/app/workspace/[workspaceId]/settings/components/settings-panel/settings-panel.tsx

@@ -54,8 +54,6 @@ interface SettingsPanelProps {
   description?: string
   /** Overrides the nav-driven docs link (the "Docs" link rendered in the header bar). */
   docsLink?: string
-  /** Escape hatch for a right-aligned widget that genuinely cannot be a chip. Rare. */
-  aside?: ReactNode
   /** Forwarded to the scroll region (e.g. for programmatic scroll-to-bottom). */
   scrollContainerRef?: Ref<HTMLDivElement>
 }
@@ -76,7 +74,6 @@ export function SettingsPanel({
   title,
   description,
   docsLink,
-  aside,
   scrollContainerRef,
 }: SettingsPanelProps) {
   const section = useSettingsSection()
@@ -89,7 +86,6 @@ export function SettingsPanel({
     back,
     actions,
     search,
-    aside,
     scrollContainerRef,
   })
 

apps/sim/app/workspace/[workspaceId]/settings/components/team-management/team-management.tsx

@@ -320,6 +320,7 @@ export function TeamManagement() {
             variant: 'primary',
             onSelect: () => setInviteModalOpen(true),
             disabled: isInvitationsDisabled,
+            tooltip: isInvitationsDisabled ? 'Invitations are disabled' : undefined,
           },
         ]}
       >

apps/sim/app/workspace/[workspaceId]/settings/components/teammates/teammates.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useCallback, useMemo, useState } from 'react'
-import { Chip, ChipDropdown, Plus, toast } from '@sim/emcn'
+import { ChipDropdown, Plus, toast } from '@sim/emcn'
 import { getErrorMessage } from '@sim/utils/errors'
 import { useQueryClient } from '@tanstack/react-query'
 import { useParams, useRouter } from 'next/navigation'
@@ -170,18 +170,16 @@ export function Teammates() {
           onChange: setSearchTerm,
           placeholder: 'Search teammates...',
         }}
-        aside={
-          <Chip
-            leftIcon={Plus}
-            variant='primary'
-            onClick={handleInvite}
-            onMouseEnter={isInvitationsDisabled ? prefetchUpgrade : undefined}
-            onFocus={isInvitationsDisabled ? prefetchUpgrade : undefined}
-            title={inviteDisabledReason ?? undefined}
-          >
-            Invite
-          </Chip>
-        }
+        actions={[
+          {
+            text: 'Invite',
+            icon: Plus,
+            variant: 'primary',
+            onSelect: handleInvite,
+            tooltip: inviteDisabledReason ?? undefined,
+            onPrefetch: isInvitationsDisabled ? prefetchUpgrade : undefined,
+          },
+        ]}
       >
         <MemberSection
           label={`Teammates (${teammates.length})`}

apps/sim/ee/access-control/components/group-detail.tsx

@@ -1274,11 +1274,13 @@ export function GroupDetail({
           },
         ]}
       >
-        <ChipModalTabs
-          tabs={tabs}
-          value={configTab}
-          onChange={(value) => setConfigTab(value as ConfigTab)}
-        />
+        <div className='sticky top-0 z-10 bg-[var(--bg)]'>
+          <ChipModalTabs
+            tabs={tabs}
+            value={configTab}
+            onChange={(value) => setConfigTab(value as ConfigTab)}
+          />
+        </div>
 
         {configTab === 'general' && (
           <>