fix(emcn): space several controls in a settings row's control slot, and drop the five local wrappers that did it

Author: waleedlatif1

apps/sim/app/(product)/_components/access-requests/access-requests.module.css

@@ -1,9 +1,3 @@
-.controls {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--ui-row-gap);
-}
-
 .changes {
   display: grid;
   gap: var(--ui-list-gap);

apps/sim/app/(product)/_components/access-requests/my-requests.tsx

@@ -7,7 +7,6 @@ import { Pagination } from '@sim/emcn/pagination'
 import { SearchField } from '@sim/emcn/search-field'
 import { SettingsRow, SettingsSurface } from '@sim/emcn/settings-section'
 import { FailureNotice, InlineNotice, StatusTag } from '@sim/emcn/status'
-import styles from '@/app/(product)/_components/access-requests/access-requests.module.css'
 import { MyRequestModal } from '@/app/(product)/_components/access-requests/my-request-modal'
 import { RequestAccessModal } from '@/app/(product)/_components/request-access-modal/request-access-modal'
 import type { RequestScope, RequestTarget, useMyRequests } from '@/platform/lib/data/requests'
@@ -57,12 +56,12 @@ export function MyRequests({ scope, view, mine }: MyRequestsProps) {
           <SettingsSurface>
             {mine.rows.map((row) => (
               <SettingsRow key={row.id} label={row.title} description={row.date}>
-                <span className={styles.controls}>
+                <>
                   <StatusTag label={row.status.label} intent={row.status.intent} />
                   <Button size='compact' variant='quiet' onClick={() => viewRequest(row.id)}>
                     View
                   </Button>
-                </span>
+                </>
               </SettingsRow>
             ))}
           </SettingsSurface>
@@ -88,7 +87,7 @@ export function MyRequests({ scope, view, mine }: MyRequestsProps) {
         <SettingsSurface>
           {mine.entries.map((entry) => (
             <SettingsRow key={entry.key} label={entry.label}>
-              <span className={styles.controls}>
+              <>
                 {entry.state === 'allowed' && <StatusTag label='Available' />}
                 {entry.state === 'requestable' && entry.pendingRequestId ? (
                   <Button size='compact' onClick={() => viewRequest(entry.pendingRequestId ?? '')}>
@@ -105,7 +104,7 @@ export function MyRequests({ scope, view, mine }: MyRequestsProps) {
                     </Button>
                   )
                 )}
-              </span>
+              </>
             </SettingsRow>
           ))}
         </SettingsSurface>

apps/sim/app/(product)/_components/access-requests/review-requests.tsx

@@ -1,14 +1,12 @@
 'use client'
 
 import { Button } from '@sim/emcn/button'
-import { EmptyState } from '@sim/emcn/empty-state'
 import { ChoiceMenu } from '@sim/emcn/menu/choice-menu'
 import { Pagination } from '@sim/emcn/pagination'
 import { SearchField } from '@sim/emcn/search-field'
 import { SettingsRow, SettingsSection, SettingsSurface } from '@sim/emcn/settings-section'
 import { FailureNotice, StatusTag } from '@sim/emcn/status'
 import { toast } from '@/lib/toast/sink'
-import styles from '@/app/(product)/_components/access-requests/access-requests.module.css'
 import { ReviewModal } from '@/app/(product)/_components/access-requests/review-modal'
 import { SettingsList } from '@/app/(product)/_components/settings-parts/settings-list'
 import { SectionToolbar } from '@/app/(product)/_components/settings-parts/settings-parts'
@@ -114,7 +112,7 @@ export function ReviewRequests({ organizationId }: ReviewRequestsProps) {
         >
           {list.rows.map((row) => (
             <SettingsRow key={row.id} label={row.title} description={row.detail}>
-              <span className={styles.controls}>
+              <>
                 <StatusTag label={row.status.label} intent={row.status.intent} />
                 <Button
                   size='compact'
@@ -123,7 +121,7 @@ export function ReviewRequests({ organizationId }: ReviewRequestsProps) {
                 >
                   Review
                 </Button>
-              </span>
+              </>
             </SettingsRow>
           ))}
         </SettingsList>

apps/sim/app/(product)/_components/credential-members/credential-members.module.css

@@ -12,7 +12,6 @@ import { FailureNotice } from '@sim/emcn/status'
 import { RecipientField } from '@sim/emcn-platform/workspace-fields'
 import { getErrorMessage } from '@sim/utils/errors'
 import { toast } from '@/lib/toast/sink'
-import styles from '@/app/(product)/_components/credential-members/credential-members.module.css'
 import {
   resolveAddEmail,
   useAddWorkspaceCredentialMembers,
@@ -117,7 +116,7 @@ export function CredentialMembers({
               description={member.userEmail || member.userId}
               leading={<Avatar name={name} src={member.userImage ?? undefined} />}
             >
-              <span className={styles.controls}>
+              <>
                 <ChoiceMenu
                   label={`Role for ${name}`}
                   options={MEMBER_ROLE_OPTIONS}
@@ -153,7 +152,7 @@ export function CredentialMembers({
                     </Button>
                   )
                 )}
-              </span>
+              </>
             </SettingsRow>
           )
         })

apps/sim/app/(product)/_components/credential-members/credential-members.tsx

@@ -8,7 +8,6 @@ import { ActionMenu } from '@sim/emcn/menu/action-menu'
 import { ChoiceMenu } from '@sim/emcn/menu/choice-menu'
 import { SettingsRow } from '@sim/emcn/settings-section'
 import { StatusTag } from '@sim/emcn/status'
-import styles from '@/app/(product)/o/[organizationId]/settings/_components/sections/members/members.module.css'
 import type { MembersActions } from '@/platform/lib/data/members'
 import type {
   InvitationRowModel,
@@ -48,10 +47,10 @@ function RowFrame({ name, email, image, status, control, menuLabel, actions }: R
       description={`${email} · ${status}`}
       leading={<Avatar name={name} src={image} />}
     >
-      <span className={styles.controls}>
+      <>
         {control}
         <ActionMenu label={menuLabel} icon='I108' align='end' actions={actions} />
-      </span>
+      </>
     </SettingsRow>
   )
 }

apps/sim/app/(product)/o/[organizationId]/settings/_components/sections/members/member-rows.tsx

@@ -1,9 +1,3 @@
-.controls {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--ui-action-gap);
-}
-
 .status {
   color: var(--ui-secondary);
   padding-block: var(--spacing-12);

apps/sim/app/(product)/o/[organizationId]/settings/_components/sections/members/members.module.css

@@ -45,12 +45,12 @@ export function SeatsOverview({ seats }: SeatsOverviewProps) {
       </SettingsSection>
     )
   const tags = (
-    <span className={styles.controls}>
+    <>
       {model.pending > 0 && <StatusTag label={`${model.pending} pending`} />}
       {model.overLimit && model.kind === 'enterprise' && (
         <StatusTag label='Over limit' intent='warning' />
       )}
-    </span>
+    </>
   )
   if (model.kind === 'team')
     return (

apps/sim/app/(product)/o/[organizationId]/settings/_components/sections/members/seats-overview.tsx

@@ -19,7 +19,6 @@ import { SettingsRead } from '@/app/(product)/_components/settings-parts/setting
 import { SwitchRow } from '@/app/(product)/_components/settings-parts/switch-row'
 import { CreateApiKeyModal } from '@/app/(product)/workspace/[workspaceId]/_components/create-api-key-modal/create-api-key-modal'
 import type { WorkspaceSettingsSectionProps } from '@/app/(product)/workspace/[workspaceId]/settings/_components/section-registry'
-import styles from '@/app/(product)/workspace/[workspaceId]/settings/_components/sections/api-keys/api-keys.module.css'
 import {
   type ApiKey,
   createLogger,
@@ -66,7 +65,7 @@ function ApiKeyRow({ apiKey, overridden = false, canDelete, onDelete }: ApiKeyRo
         overridden ? ' · a workspace key has this name' : ''
       }`}
     >
-      <span className={styles.controls}>
+      <>
         {apiKey.access === 'read' && <StatusTag label='Read only' />}
         {overridden && <StatusTag label='Overridden' intent='danger' />}
         <ActionMenu
@@ -83,7 +82,7 @@ function ApiKeyRow({ apiKey, overridden = false, canDelete, onDelete }: ApiKeyRo
             },
           ]}
         />
-      </span>
+      </>
     </SettingsRow>
   )
 }