improvement(access-control): align permission rows and contextual help

Author: waleedlatif1

apps/docs/content/docs/platform/enterprise/access-control.mdx

@@ -34,6 +34,8 @@ Search and the state filter narrow each list. **Set shown to…** changes only t
 
 A restricted parent also restricts its children. Expand a provider, integration, or platform feature to inspect its models, tools, connectors, or authentication modes. Allow the parent before editing its children. Child choices are preserved when a parent changes. An unavailable child stays unavailable even if its parent allows requests. Requests cannot bypass an unavailable parent.
 
+The info icon beside an item explains its restriction and, for inherited choices, names the parent to change. Hover or focus the icon to read the help, or click or tap to keep it open. Press Escape or click outside to dismiss it.
+
 These choices configure the group's policy, independently of the deployment's current availability. **Allowed** and **Can request** cannot enable a deployment-disabled feature or bypass a workspace role. Members only discover and request items available to their deployment and role. Custom blocks, private dynamically discovered models, and other items outside the public request catalog do not offer **Can request**.
 
 ### General

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

@@ -90,6 +90,8 @@ interface SettingsResourceRowProps {
    * the bleed would force a horizontal scrollbar.
    */
   flush?: boolean
+  /** Compact single-line controls retain a 40px row without changing the default resource layout. */
+  density?: 'default' | 'compact'
   /** Renders the row as unavailable without an activation target. */
   disabled?: boolean
 }
@@ -133,6 +135,7 @@ export function SettingsResourceRow({
   clickLabel,
   navigable = false,
   flush = false,
+  density = 'default',
   disabled = false,
 }: SettingsResourceRowProps) {
   const describedById = useId()
@@ -202,7 +205,9 @@ export function SettingsResourceRow({
   // mixing clickable and static rows keeps one height and one inset.
   const rowClass = cn(
     'flex items-center justify-between gap-2.5',
-    !flush && '-mx-2 rounded-lg p-2',
+    !flush && '-mx-2 rounded-lg',
+    !flush && (density === 'compact' ? 'px-2' : 'p-2'),
+    density === 'compact' && 'min-h-10 max-md:pointer-coarse:min-h-11',
     disabled && 'opacity-50'
   )
 

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

@@ -80,6 +80,7 @@ import { withPermissionGroupAccessState } from '@/ee/access-control/utils/access
 import {
   type AccessRequestTarget,
   createAccessRequestCatalog,
+  describeAccessRequestTarget,
   getAccessRequestTargetParents,
   getPermissionGroupAccessState,
   type PermissionGroupAccessState,
@@ -523,10 +524,19 @@ export function GroupDetail({
     [editingConfig, editorCatalog, canRequest]
   )
 
-  const isInherited = (target: AccessRequestTarget) =>
-    getAccessRequestTargetParents(target, editorCatalog).some(
+  const getInheritedFrom = (target: AccessRequestTarget): string | null => {
+    const parent = getAccessRequestTargetParents(target, editorCatalog).find(
       (parent) => getState(parent) !== 'allowed'
     )
+    if (!parent) return null
+    return (
+      getInheritedFrom(parent) ??
+      describeAccessRequestTarget(parent, editorCatalog)?.label ??
+      'a restricted parent'
+    )
+  }
+
+  const isInherited = (target: AccessRequestTarget) => getInheritedFrom(target) !== null
 
   const setAccess = (targets: AccessRequestTarget[], state: PermissionGroupAccessState) => {
     setEditingConfig((previous) => {
@@ -544,7 +554,7 @@ export function GroupDetail({
     })
   }
 
-  const controls = { getState, isInherited, canRequest, onSet: setAccess }
+  const controls = { getState, isInherited, getInheritedFrom, canRequest, onSet: setAccess }
 
   const searchedPlatformFeatures = useMemo(() => {
     const search = searchTerm.trim().toLowerCase()
@@ -1152,7 +1162,7 @@ export function GroupDetail({
               <SettingsSection
                 label='Integrations and Triggers'
                 headerAccessory={
-                  <Info side='top'>
+                  <Info side='top' label='About integration and trigger permissions'>
                     Choose access for an integration, then expand it to set individual tools. Parent
                     restrictions apply to every tool.
                   </Info>
@@ -1205,7 +1215,10 @@ export function GroupDetail({
               </SettingsEmptyState>
             )}
             {platformCategorySections.map(({ category, features }) => (
-              <SettingsSection key={category} label={category}>
+              <SettingsSection
+                key={category}
+                label={<span className='flex h-[30px] items-center'>{category}</span>}
+              >
                 <div className='flex flex-col gap-0.5'>
                   {features.map((feature) => (
                     <PlatformPermissionRow