fix(org): hide secondary admin and request columns on a phone, and fail a heading that breaks mid-word

Author: waleedlatif1

apps/sim/platform/embedded/app/(shell)/settings/_components/sections/admin/admin-section.tsx

@@ -37,9 +37,9 @@ import { AddUserModal } from '@/platform/embedded/app/(shell)/settings/_componen
 import { toast } from '@/platform/shared/toast'
 
 const USER_COLUMNS = [
-  { key: 'name', label: 'Name', kind: 'text' },
+  { key: 'name', label: 'Name', kind: 'text', showFrom: 'compact' },
   { key: 'email', label: 'Email', kind: 'text' },
-  { key: 'role', label: 'Role', kind: 'status' },
+  { key: 'role', label: 'Role', kind: 'status', showFrom: 'compact' },
   { key: 'status', label: 'Status', kind: 'status' },
 ] as const
 

apps/sim/platform/embedded/app/(shell)/settings/_components/sections/mothership/mothership-section.tsx

@@ -150,10 +150,10 @@ const USER_COLUMNS = [
 
 const REQUEST_COLUMNS = [
   { key: 'id', label: 'Request ID', kind: 'text' },
-  { key: 'model', label: 'Model', kind: 'text' },
-  { key: 'duration', label: 'Duration', kind: 'text' },
-  { key: 'cost', label: 'Cost', kind: 'text' },
-  { key: 'tools', label: 'Tools', kind: 'number' },
+  { key: 'model', label: 'Model', kind: 'text', showFrom: 'compact' },
+  { key: 'duration', label: 'Duration', kind: 'text', showFrom: 'compact' },
+  { key: 'cost', label: 'Cost', kind: 'text', showFrom: 'wide' },
+  { key: 'tools', label: 'Tools', kind: 'number', showFrom: 'wide' },
   { key: 'status', label: 'Status', kind: 'status' },
   { key: 'time', label: 'Time', kind: 'text' },
 ] as const

apps/sim/scripts/org-redesign-e2e/checks/screenshots.ts

@@ -151,6 +151,27 @@ export async function stateScreenshots() {
                   )
                 const open = viewport === PHONE ? (shot.openOnPhone ?? shot.open) : shot.open
                 await open?.(session.page)
+                // A heading too narrow for its word breaks mid-word, the failure a role check misses.
+                const broken = await session.page.getByRole('columnheader').evaluateAll((cells) =>
+                  cells.flatMap((cell) => {
+                    const walker = document.createTreeWalker(cell, NodeFilter.SHOW_TEXT)
+                    const words: string[] = []
+                    for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+                      const text = node.textContent ?? ''
+                      for (const match of text.matchAll(/\S+/g)) {
+                        const range = document.createRange()
+                        range.setStart(node, match.index ?? 0)
+                        range.setEnd(node, (match.index ?? 0) + match[0].length)
+                        const lines = new Set(
+                          [...range.getClientRects()].map((rect) => Math.round(rect.top))
+                        )
+                        if (lines.size > 1) words.push(match[0])
+                      }
+                    }
+                    return words
+                  })
+                )
+                assert.deepEqual(broken, [], `${shot.name}: column headings break mid-word`)
                 await sleep(200)
                 await session.page.screenshot({
                   path: resolve(artifactDirectory, `state__${shot.name}__${viewport.name}.png`),