@actuate-media/cms-admin 0.67.0 → 0.69.0

package/src/__tests__/views/security-settings.render.test.tsx

@@ -5,17 +5,23 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 // The Security tab reads `/security` (computed posture + summaries + editable
 // policy), saves via PUT `/security`, and revokes sessions via POST.
 let securityData: any
+/** When set, PUT /security returns this instead of echoing the body. */
+let putResponseOverride:
+  | ((body: any) => { data?: any; error?: string; code?: string; status: number })
+  | null = null
 
 const cmsApi = vi.fn(async (endpoint: string, options?: { method?: string; body?: unknown }) => {
   const method = options?.method ?? 'GET'
   if (endpoint === '/security' && method === 'GET') return { data: securityData, status: 200 }
   if (endpoint === '/security' && method === 'PUT') {
     const body = JSON.parse(String(options?.body ?? '{}'))
+    if (putResponseOverride) return putResponseOverride(body)
     securityData = {
       ...securityData,
       settings: {
         mfa: { required: body.mfa.required, gracePeriodDays: body.mfa.gracePeriodDays },
-        session: { maxConcurrentSessions: body.session.maxConcurrentSessions },
+        session: body.session,
+        access: body.access,
       },
     }
     return { data: securityData, status: 200 }
@@ -33,7 +39,8 @@ function baseData(overrides: Record<string, unknown> = {}) {
   return {
     settings: {
       mfa: { required: false, gracePeriodDays: 7 },
-      session: { maxConcurrentSessions: 5 },
+      session: { maxConcurrentSessions: 5, timeoutHours: 168, idleLogoutEnabled: false },
+      access: { ipAllowlist: [], auditLoggingEnabled: true },
     },
     status: {
       status: 'needs_attention',
@@ -75,6 +82,7 @@ function baseData(overrides: Record<string, unknown> = {}) {
       enabled: false,
       source: 'none',
       ranges: [],
+      configRanges: [],
       currentIp: '1.2.3.4',
       currentIpAllowed: null,
     },
@@ -102,6 +110,7 @@ function baseData(overrides: Record<string, unknown> = {}) {
 beforeEach(() => {
   cmsApi.mockClear()
   securityData = baseData()
+  putResponseOverride = null
 })
 
 describe('SecurityTab', () => {
@@ -110,9 +119,14 @@ describe('SecurityTab', () => {
 
     await screen.findByText('Security Status')
     expect(screen.getByText('Authentication & MFA')).toBeTruthy()
-    expect(screen.getByText('Session Policy')).toBeTruthy()
-    expect(screen.getByText('Access & Request Protection')).toBeTruthy()
+    expect(screen.getByText('Sessions')).toBeTruthy()
+    expect(screen.getByText('Access Control')).toBeTruthy()
     expect(screen.getByText('Secrets, Encryption & Audit')).toBeTruthy()
+    // New design controls are present.
+    expect(screen.getByLabelText(/Session timeout/)).toBeTruthy()
+    expect(screen.getByRole('switch', { name: 'Idle auto-logout' })).toBeTruthy()
+    expect(screen.getByLabelText(/Allowed IP addresses/)).toBeTruthy()
+    expect(screen.getByRole('switch', { name: 'Audit logging' })).toBeTruthy()
     // Status badge + warning surfaced.
     expect(screen.getByText('Needs attention')).toBeTruthy()
     expect(screen.getByText('MFA is not required in production')).toBeTruthy()
@@ -197,6 +211,97 @@ describe('SecurityTab', () => {
     await screen.findByText('Other sessions revoked.')
   })
 
+  it('persists the session timeout and idle auto-logout policy', async () => {
+    render(<SecurityTab role="ADMIN" />)
+    await screen.findByText('Security Status')
+
+    fireEvent.change(screen.getByLabelText(/Session timeout/), { target: { value: '8' } })
+    fireEvent.click(screen.getByRole('switch', { name: 'Idle auto-logout' }))
+
+    fireEvent.click(screen.getByRole('button', { name: 'Save Changes' }))
+    await waitFor(() =>
+      expect(cmsApi).toHaveBeenCalledWith(
+        '/security',
+        expect.objectContaining({
+          method: 'PUT',
+          body: expect.stringContaining('"timeoutHours":8'),
+        }),
+      ),
+    )
+    const putBody = JSON.parse(
+      String(cmsApi.mock.calls.find((c) => c[1]?.method === 'PUT')?.[1]?.body),
+    )
+    expect(putBody.session.idleLogoutEnabled).toBe(true)
+  })
+
+  it('persists the IP allowlist and audit toggle, flagging invalid entries client-side', async () => {
+    render(<SecurityTab role="ADMIN" />)
+    await screen.findByText('Security Status')
+
+    const textarea = screen.getByLabelText(/Allowed IP addresses/) as HTMLTextAreaElement
+    fireEvent.change(textarea, { target: { value: 'not-an-ip' } })
+    // Inline + summary validation blocks the save.
+    expect((await screen.findAllByText(/not-an-ip/)).length).toBeGreaterThan(0)
+    expect(
+      (screen.getByRole('button', { name: 'Save Changes' }) as HTMLButtonElement).disabled,
+    ).toBe(true)
+
+    fireEvent.change(textarea, { target: { value: '203.0.113.0/24\n1.2.3.4' } })
+    fireEvent.click(screen.getByRole('switch', { name: 'Audit logging' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Save Changes' }))
+
+    await waitFor(() => expect(cmsApi).toHaveBeenCalledWith('/security', expect.anything()))
+    const putBody = JSON.parse(
+      String(cmsApi.mock.calls.find((c) => c[1]?.method === 'PUT')?.[1]?.body),
+    )
+    expect(putBody.access.ipAllowlist).toEqual(['203.0.113.0/24', '1.2.3.4'])
+    expect(putBody.access.auditLoggingEnabled).toBe(false)
+  })
+
+  it('surfaces the IP lockout guard as a confirm dialog and retries with confirmLockout', async () => {
+    let rejected = false
+    putResponseOverride = (body) => {
+      if (body.confirmLockout === true) {
+        putResponseOverride = null
+        securityData = {
+          ...securityData,
+          settings: {
+            ...securityData.settings,
+            session: body.session,
+            access: body.access,
+          },
+        }
+        return { data: securityData, status: 200 }
+      }
+      rejected = true
+      return {
+        error: 'Your current IP (1.2.3.4) is not in the allowlist — saving would lock you out.',
+        code: 'IP_LOCKOUT_RISK',
+        status: 409,
+      }
+    }
+
+    render(<SecurityTab role="ADMIN" />)
+    await screen.findByText('Security Status')
+
+    fireEvent.change(screen.getByLabelText(/Allowed IP addresses/), {
+      target: { value: '10.0.0.0/8' },
+    })
+    fireEvent.click(screen.getByRole('button', { name: 'Save Changes' }))
+
+    // The 409 turns into a confirm dialog, not a generic error.
+    const confirm = await screen.findByRole('button', { name: 'Save anyway' })
+    expect(rejected).toBe(true)
+    fireEvent.click(confirm)
+
+    await waitFor(() => {
+      const confirmed = cmsApi.mock.calls.filter(
+        (c) => c[1]?.method === 'PUT' && String(c[1]?.body).includes('"confirmLockout":true'),
+      )
+      expect(confirmed).toHaveLength(1)
+    })
+  })
+
   it('is read-only for non-admin roles', async () => {
     render(<SecurityTab role="EDITOR" />)
     await screen.findByText('Security Status')
@@ -208,5 +313,7 @@ describe('SecurityTab', () => {
     expect(toggle.disabled).toBe(true)
     const select = screen.getByLabelText(/Maximum concurrent sessions/) as HTMLSelectElement
     expect(select.disabled).toBe(true)
+    const textarea = screen.getByLabelText(/Allowed IP addresses/) as HTMLTextAreaElement
+    expect(textarea.disabled).toBe(true)
   })
 })

package/src/__tests__/views/seo-content-pane.render.test.tsx

@@ -0,0 +1,142 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+
+/**
+ * Content SEO tab with the inline editor pane (design split-pane pattern —
+ * previously the `SeoEditorDrawer` overlay). Pins: row click toggles the
+ * 380px pane, the pane loads the record through `fetchSeoContentRecord`, and
+ * Save flows through the same `updateSeoFields` service call.
+ */
+
+function makeRecord(over: Record<string, unknown> = {}) {
+  return {
+    id: 'seo1',
+    entityType: 'page' as const,
+    entityId: 'p1',
+    title: 'Home',
+    url: 'https://example.com/',
+    canonicalUrl: null,
+    metaTitle: 'Home — Example',
+    metaDescription: 'Welcome to Example.',
+    focusKeyword: null,
+    keyTakeaway: null,
+    ogTitle: null,
+    ogDescription: null,
+    ogImageId: null,
+    ogImage: null,
+    twitterTitle: null,
+    twitterDescription: null,
+    twitterImageId: null,
+    noindex: false,
+    nofollow: false,
+    structuredDataType: 'WebPage',
+    structuredData: null,
+    llmsInclude: 'AUTO' as const,
+    llmsDescription: null,
+    llmsSection: null,
+    llmsOptional: false,
+    seoScore: 82,
+    seoGrade: 'good' as const,
+    updatedAt: '2026-06-01T00:00:00Z',
+    ...over,
+  }
+}
+
+const RECORDS = [
+  makeRecord(),
+  makeRecord({ id: 'seo2', entityType: 'post', entityId: 'p2', title: 'First Post' }),
+]
+
+const fetchSeoContentRecords = vi.fn(async () => RECORDS)
+const fetchSeoContentRecord = vi.fn(async (entityType: string, entityId: string) => {
+  return RECORDS.find((r) => r.entityType === entityType && r.entityId === entityId) ?? null
+})
+const updateSeoFields = vi.fn(async (_t: string, _i: string, _p: unknown) => ({}))
+
+vi.mock('../../lib/seo-service.js', () => ({
+  fetchSeoContentRecords: () => fetchSeoContentRecords(),
+  fetchSeoContentRecord: (t: string, i: string) => fetchSeoContentRecord(t, i),
+  updateSeoFields: (t: string, i: string, p: unknown) => updateSeoFields(t, i, p),
+  generateSeoField: vi.fn(async () => ({ unavailable: true })),
+  SEO_SCHEMA_TYPES: ['Article', 'WebPage'],
+  applyContentSeoQuery: (
+    records: Array<{ entityType: string; title: string }>,
+    query: { search?: string; filter?: string },
+  ) =>
+    records.filter((r) => {
+      if (query.filter === 'pages' && r.entityType !== 'page') return false
+      if (query.filter === 'posts' && r.entityType !== 'post') return false
+      if (query.search && !r.title.toLowerCase().includes(query.search.toLowerCase())) return false
+      return true
+    }),
+}))
+
+vi.mock('../../lib/brand-voice-client.js', () => ({
+  fixBrandVoiceContent: vi.fn(async () => ({ ok: false })),
+  brandAlignmentTone: () => 'text-success',
+  brandAlignmentLabel: () => 'On brand',
+}))
+
+vi.mock('sonner', () => ({ toast: { success: vi.fn(), error: vi.fn(), loading: vi.fn() } }))
+
+const { ContentTab } = await import('../../views/seo/ContentTab.js')
+
+beforeEach(() => {
+  fetchSeoContentRecords.mockClear()
+  fetchSeoContentRecord.mockClear()
+  updateSeoFields.mockClear()
+})
+
+describe('Content SEO inline editor pane', () => {
+  it('opens the pane on row click and loads the record', async () => {
+    render(<ContentTab />)
+    const rowButton = await screen.findByRole('button', { name: /Home/ })
+    expect(rowButton.getAttribute('aria-expanded')).toBe('false')
+
+    fireEvent.click(rowButton)
+
+    expect(screen.getByRole('region', { name: 'SEO editor' })).toBeTruthy()
+    expect(rowButton.getAttribute('aria-expanded')).toBe('true')
+    await waitFor(() => expect(fetchSeoContentRecord).toHaveBeenCalledWith('page', 'p1'))
+    // Loaded field values populate the form.
+    expect(await screen.findByDisplayValue('Home — Example')).toBeTruthy()
+  })
+
+  it('toggles the pane closed when the same row is clicked again', async () => {
+    render(<ContentTab />)
+    const rowButton = await screen.findByRole('button', { name: /Home/ })
+
+    fireEvent.click(rowButton)
+    expect(screen.getByRole('region', { name: 'SEO editor' })).toBeTruthy()
+
+    fireEvent.click(rowButton)
+    expect(screen.queryByRole('region', { name: 'SEO editor' })).toBeNull()
+  })
+
+  it('saves edited fields through updateSeoFields', async () => {
+    render(<ContentTab />)
+    fireEvent.click(await screen.findByRole('button', { name: /Home/ }))
+
+    const titleInput = await screen.findByDisplayValue('Home — Example')
+    fireEvent.change(titleInput, { target: { value: 'New Meta Title' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Save Changes' }))
+
+    await waitFor(() =>
+      expect(updateSeoFields).toHaveBeenCalledWith(
+        'page',
+        'p1',
+        expect.objectContaining({ metaTitle: 'New Meta Title' }),
+      ),
+    )
+    // The list refetches after a successful save.
+    await waitFor(() => expect(fetchSeoContentRecords.mock.calls.length).toBeGreaterThan(1))
+  })
+
+  it('opens the pane on mount for deep links', async () => {
+    render(<ContentTab initialEntityType="post" initialEntityId="p2" />)
+
+    await waitFor(() => expect(fetchSeoContentRecord).toHaveBeenCalledWith('post', 'p2'))
+    expect(screen.getByRole('region', { name: 'SEO editor' })).toBeTruthy()
+  })
+})

package/src/__tests__/views/users-selected-deeplink.render.test.tsx

@@ -0,0 +1,102 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+
+/**
+ * Render tests for the `?selected=<userId>` deep link written by the command
+ * palette (`/users?selected=<id>`): once the member list loads, the matching
+ * member's detail drawer opens. Unknown ids are tolerated — no drawer, no crash.
+ */
+
+const MEMBER = {
+  id: 'u1',
+  name: 'Priya Nair',
+  email: 'priya@actuatemedia.com',
+  initials: 'PN',
+  role: 'EDITOR',
+  roleName: 'Editor' as const,
+  status: 'active' as const,
+  mfaEnabled: true,
+  externalDomain: false,
+  lastLoginAt: null,
+  lastActiveAt: null,
+  acceptedInviteAt: new Date('2026-01-02').toISOString(),
+  createdAt: new Date('2026-01-01').toISOString(),
+  isCurrentUser: false,
+}
+
+const DETAIL = {
+  ...MEMBER,
+  avatarUrl: null,
+  mfaRequired: false,
+  passwordSet: true,
+  forcePasswordReset: false,
+  failedLoginCount: 0,
+  lockedAt: null,
+  suspendedAt: null,
+  authProvider: null,
+  oauthProviders: [],
+  ssoOnly: false,
+  emailVerified: true,
+  invitedBy: null,
+  contentOwnedCount: 4,
+}
+
+const STATS = {
+  members: 1,
+  pendingInvites: 0,
+  admins: 0,
+  seatsUsed: 1,
+  seatLimit: null,
+  seatsAvailable: null,
+  emailConfigured: true,
+}
+
+const { cmsApi } = vi.hoisted(() => ({ cmsApi: vi.fn() }))
+vi.mock('../../lib/api.js', () => ({ cmsApi }))
+
+cmsApi.mockImplementation(async (endpoint?: string) => {
+  if (!endpoint) return { data: null, status: 200 }
+  if (endpoint === '/invites') return { data: [], status: 200 }
+  if (endpoint === '/users/stats') return { data: STATS, status: 200 }
+  if (endpoint === '/access-review') return { data: [], status: 200 }
+  if (endpoint.startsWith('/users/u1')) return { data: DETAIL, status: 200 }
+  if (endpoint === '/users' || endpoint.startsWith('/users?'))
+    return { data: [MEMBER], status: 200 }
+  return { data: null, status: 200 }
+})
+
+const { Users } = await import('../../views/Users.js')
+
+describe('Users ?selected= deep link', () => {
+  beforeEach(() => cmsApi.mockClear())
+
+  it('opens the detail drawer for the selected member once the list loads', async () => {
+    render(<Users currentPath="/users?selected=u1" />)
+
+    // "Content owned" only renders inside the detail drawer's overview tab.
+    expect(await screen.findByText('Content owned')).toBeTruthy()
+    expect(cmsApi.mock.calls.some(([endpoint]) => String(endpoint).startsWith('/users/u1'))).toBe(
+      true,
+    )
+  })
+
+  it('ignores a selected id that matches no member', async () => {
+    render(<Users currentPath="/users?selected=does-not-exist" />)
+
+    // List renders normally…
+    expect(await screen.findByText('priya@actuatemedia.com')).toBeTruthy()
+    // …but no drawer opens and no detail fetch is issued.
+    expect(screen.queryByText('Content owned')).toBeNull()
+    expect(
+      cmsApi.mock.calls.some(([endpoint]) => String(endpoint).includes('/users/does-not-exist')),
+    ).toBe(false)
+  })
+
+  it('renders without a drawer when there is no query at all', async () => {
+    render(<Users currentPath="/users" />)
+
+    expect(await screen.findByText('priya@actuatemedia.com')).toBeTruthy()
+    expect(screen.queryByText('Content owned')).toBeNull()
+  })
+})

package/src/components/collections/EntryDetailPane.tsx

@@ -0,0 +1,182 @@
+'use client'
+
+/**
+ * Entry detail pane — lightweight read-only inspector shown beside the
+ * collection documents table (design's Entries split-pane, 400px). Surfaces
+ * the entry's key fields, status, and timestamps; the primary action opens
+ * the existing full editor route. Not an editor — editing stays in the
+ * dedicated editor views.
+ */
+import { ExternalLink } from 'lucide-react'
+import {
+  InspectorPaneBody,
+  InspectorPaneFooter,
+  InspectorPaneHeader,
+  InspectorPaneSection,
+} from '../ui/InspectorPane.js'
+import { StatusBadge, type StatusBadgeTone } from '../ui/StatusBadge.js'
+
+interface FieldDef {
+  type?: string
+  label?: string
+  hidden?: boolean
+  options?: Array<{ label: string; value: string }>
+}
+
+const SKIPPED_FIELD_TYPES = new Set(['richText', 'blocks', 'json', 'media', 'relationship'])
+const MAX_FIELDS = 8
+
+function statusTone(status: string | undefined): StatusBadgeTone {
+  switch (status?.toUpperCase()) {
+    case 'PUBLISHED':
+      return 'success'
+    case 'SCHEDULED':
+      return 'warning'
+    case 'ARCHIVED':
+      return 'muted'
+    default:
+      return 'neutral'
+  }
+}
+
+function formatDateTime(value: unknown): string {
+  if (typeof value !== 'string' || !value) return '—'
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return '—'
+  return date.toLocaleDateString(undefined, {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+  })
+}
+
+/** Human-readable display value for a scalar-ish field, or null to skip. */
+function displayValue(raw: unknown, field: FieldDef): string | null {
+  if (raw == null || raw === '') return ''
+  if (typeof raw === 'boolean') return raw ? 'Yes' : 'No'
+  if (typeof raw === 'number') return String(raw)
+  if (typeof raw === 'string') {
+    const opt = field.options?.find((o) => o.value === raw)
+    return opt?.label ?? raw
+  }
+  if (Array.isArray(raw)) {
+    const tags = raw
+      .map((item) =>
+        typeof item === 'string'
+          ? item
+          : item && typeof item === 'object'
+            ? Object.values(item).find((v): v is string => typeof v === 'string')
+            : undefined,
+      )
+      .filter((v): v is string => Boolean(v))
+    if (tags.length > 0) return tags.join(', ')
+    return `${raw.length} item${raw.length === 1 ? '' : 's'}`
+  }
+  return null
+}
+
+/** Key fields worth showing in the pane: labelled scalars from the config. */
+function keyFields(
+  fields: Record<string, FieldDef> | undefined,
+  data: Record<string, unknown>,
+): Array<{ name: string; label: string; value: string }> {
+  if (!fields || typeof fields !== 'object') return []
+  const out: Array<{ name: string; label: string; value: string }> = []
+  for (const [name, field] of Object.entries(fields)) {
+    if (!field || field.hidden) continue
+    if (field.type && SKIPPED_FIELD_TYPES.has(field.type)) continue
+    const value = displayValue(data[name], field)
+    if (value === null) continue
+    out.push({ name, label: field.label ?? name, value })
+    if (out.length >= MAX_FIELDS) break
+  }
+  return out
+}
+
+export interface EntryDetailPaneProps {
+  doc: Record<string, any>
+  /** Collection definition from the CMS config (untyped upstream). */
+  collection: any
+  singularLabel: string
+  onClose: () => void
+  onOpenEditor: () => void
+}
+
+export function EntryDetailPane({
+  doc,
+  collection,
+  singularLabel,
+  onClose,
+  onOpenEditor,
+}: EntryDetailPaneProps) {
+  const title = doc.title || doc.name || `#${doc.id}`
+  const data = (doc.data ?? {}) as Record<string, unknown>
+  const fields = keyFields(collection?.fields as Record<string, FieldDef> | undefined, data)
+
+  return (
+    <>
+      <InspectorPaneHeader onClose={onClose} closeLabel={`Close ${singularLabel} details`}>
+        <div className="truncate text-[13.5px] font-semibold text-[var(--txt)]">{title}</div>
+        <div className="mt-1 flex items-center gap-2">
+          <StatusBadge tone={statusTone(doc.status)}>{doc.status ?? 'DRAFT'}</StatusBadge>
+          <span className="text-[11px] text-[var(--muted)]">{singularLabel}</span>
+        </div>
+      </InspectorPaneHeader>
+
+      <InspectorPaneBody>
+        <InspectorPaneSection title="Fields">
+          {fields.length === 0 ? (
+            <p className="text-[12px] text-[var(--muted)]">No previewable fields.</p>
+          ) : (
+            <dl>
+              {fields.map((f) => (
+                <div key={f.name} className="mb-2.5 last:mb-0">
+                  <dt className="text-[10.5px] font-semibold tracking-[0.5px] text-[var(--muted)] uppercase">
+                    {f.label}
+                  </dt>
+                  {f.value ? (
+                    <dd className="mt-0.5 text-[12.5px] break-words text-[var(--txt)]">
+                      {f.value}
+                    </dd>
+                  ) : (
+                    <dd className="mt-0.5 text-[12.5px] text-[var(--muted)] italic">
+                      Not provided
+                    </dd>
+                  )}
+                </div>
+              ))}
+            </dl>
+          )}
+        </InspectorPaneSection>
+
+        <InspectorPaneSection title="Record">
+          <div className="flex items-center justify-between gap-3 py-1 text-[12px]">
+            <span className="text-[var(--muted)]">Created</span>
+            <span className="text-[var(--sub)]">{formatDateTime(doc.createdAt)}</span>
+          </div>
+          <div className="flex items-center justify-between gap-3 py-1 text-[12px]">
+            <span className="text-[var(--muted)]">Updated</span>
+            <span className="text-[var(--sub)]">{formatDateTime(doc.updatedAt)}</span>
+          </div>
+          <div className="flex items-center justify-between gap-3 py-1 text-[12px]">
+            <span className="text-[var(--muted)]">ID</span>
+            <span className="font-mono text-[11px] text-[var(--muted)]">{String(doc.id)}</span>
+          </div>
+        </InspectorPaneSection>
+      </InspectorPaneBody>
+
+      <InspectorPaneFooter>
+        <button
+          type="button"
+          onClick={onOpenEditor}
+          className="flex w-full items-center justify-center gap-1.5 rounded-[7px] bg-[var(--acc)] px-3 py-2 text-[13px] font-semibold text-white transition-colors duration-[var(--motion-fast)] hover:opacity-90 focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none"
+        >
+          <ExternalLink size={14} aria-hidden />
+          Open full editor
+        </button>
+      </InspectorPaneFooter>
+    </>
+  )
+}

package/src/components/forms/FieldsPanel.tsx

@@ -268,7 +268,9 @@ function FieldEditor({
 
   return (
     <div className="border-border space-y-3 border-t px-3 py-3">
-      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+      {/* Stacked (not sm:grid-cols-2): this editor now lives in the 390px
+          schema inspector pane, where viewport-based two-column grids cramp. */}
+      <div className="grid grid-cols-1 gap-3">
         <Labeled label="Label">
           <input
             type="text"