fix(platform): keep usage Description at Settings width and follow the 700px column in checks

- Usage events: Description now shows from the compact breakpoint. At Settings'
  700px column the table sits under the 48rem wide breakpoint, so a wide-only
  Description never painted, breaking "Description shows at the Settings
  column width".
- Links (live): at Settings' width the table keeps Name and Destination and
  splits them evenly, with the wide-only columns' facts under each name. The
  check asserts that layout instead of Destination's wide-table share, and
  finds the link by the row's own button, whose name now carries that summary.
- Extension: the saved link opens from the row's target. The row center now
  lands on Destination text, whose tooltip host stacks above the row overlay.
- Integrations: the skill removal confirm names the skill, and Dataverse's
  Connect is a menu now that it offers a Microsoft app credential.
- Workspace pages: the record bar is the outermost block holding Back and not
  the heading. PageOverflow made the nav's parent a wrapper, so the Logs check
  passed without testing anything.

Author: waleedlatif1

apps/sim/app/(product)/o/[organizationId]/settings/_components/sections/usage/usage-events.tsx

@@ -10,7 +10,7 @@ import { useUsageEvents, useUsageView } from '@/platform/lib/data/usage'
 const COLUMNS = [
   { key: 'when', label: 'When', kind: 'text' },
   { key: 'label', label: 'Event', kind: 'text' },
-  { key: 'description', label: 'Description', kind: 'text', showFrom: 'wide' },
+  { key: 'description', label: 'Description', kind: 'text', showFrom: 'compact' },
   { key: 'credits', label: 'Credits', kind: 'text' },
 ] as const
 

apps/sim/platform/checks/integrations.spec.ts

@@ -38,7 +38,10 @@ test('app discovery preserves editable installed skills and sends templates to t
   if (!removeBox || !saveBox) throw new Error('Skill footer controls are not visible')
   expect(removeBox.x + removeBox.width).toBeLessThan(saveBox.x)
   await remove.click()
-  const confirmation = page.getByRole('dialog', { name: 'Remove skill', exact: true })
+  const confirmation = page.getByRole('dialog', {
+    name: 'Remove fetch-secret-for-runtime',
+    exact: true,
+  })
   await confirmation.getByRole('button', { name: 'Cancel', exact: true }).click()
   await expect(remove).toBeFocused()
   await expect(field).toHaveValue(updated)
@@ -519,6 +522,7 @@ test('Dataverse retains an immutable environment binding when reconnecting a nam
   await page.goto(fixtureUrl('/integrations/microsoft_dataverse?state=full'))
   const main = page.getByRole('main')
   await main.getByRole('button', { name: 'Connect integration', exact: true }).click()
+  await page.getByRole('menuitem', { name: 'Connect with OAuth', exact: true }).click()
   const connect = page.getByRole('dialog', { name: 'Connect Microsoft Dataverse', exact: true })
   await connect
     .getByRole('textbox', { name: 'Display name', exact: true })

apps/sim/platform/checks/live/links.spec.ts

@@ -49,19 +49,23 @@ test('Links: header, Chrome install, columns, and a list that reads on as it scr
     )
     await signIn(page, memberEmail(), liveRoute('/settings/links'))
     await expect(page.getByRole('heading', { level: 1, name: 'Links' })).toBeVisible()
-    const columnWidth = async (name: string) =>
-      (await page.getByRole('columnheader', { name, exact: true }).boundingBox())?.width ?? 0
-    const destination = await columnWidth('Destination')
-    for (const other of ['Name', 'Description', 'Created by', 'Access', 'Updated'])
-      expect(destination, `Destination is wider than ${other}`).toBeGreaterThan(
-        await columnWidth(other)
-      )
+    // Settings' column is narrower than the table's wide layout: Name and Destination stay, and
+    // what the wide-only columns hold reads under each name instead.
+    await expect(page.getByRole('columnheader', { name: 'Name', exact: true })).toBeVisible()
+    await expect(page.getByRole('columnheader', { name: 'Destination', exact: true })).toBeVisible()
+    for (const wideOnly of ['Description', 'Created by', 'Access', 'Updated'])
+      await expect(page.getByRole('columnheader', { name: wideOnly, exact: true })).toBeHidden()
 
     const store = context.waitForEvent('page')
     await page.getByRole('button', { name: 'Install Sim for Chrome' }).click()
     await expect(await store).toHaveURL(/chromewebstore\.google\.com/)
 
     await expect(rowFor(page, 'handbook')).toBeVisible()
+    await expect(
+      rowFor(page, 'handbook')
+        .getByText('The company handbook', { exact: true })
+        .filter({ visible: true })
+    ).toHaveCount(1)
     const pages: string[] = []
     page.on('request', (request) => {
       if (request.url().includes('/sim-links') && request.url().includes('cursor='))

apps/sim/platform/checks/live/settings-a.spec.ts

@@ -170,7 +170,9 @@ test('links: create, find, open, edit and delete on the Platform', async ({ page
   await expect(dialog).toHaveCount(0)
   await page.getByLabel('Search links').fill(name)
   await expect(page).toHaveURL(new RegExp(`search=${name}`))
-  await expect(page.getByRole('button', { name, exact: true })).toBeVisible()
+  // At Settings' width the row's button also reads the facts its hidden columns would hold.
+  const row = page.getByRole('button').filter({ has: page.getByText(name, { exact: true }) })
+  await expect(row).toBeVisible()
 
   await context.route('https://example.com/**', (route) =>
     route.fulfill({ status: 200, contentType: 'text/html', body: 'Destination stand-in' })
@@ -180,7 +182,7 @@ test('links: create, find, open, edit and delete on the Platform', async ({ page
     (request) => new URL(request.url()).pathname === `/sim/${name}`
   )
   const opened = context.waitForEvent('page')
-  await page.getByRole('button', { name, exact: true }).click()
+  await row.click()
   await resolved
   await expect(await opened).toHaveURL('https://example.com/')
   await (await opened).close()

apps/sim/platform/checks/workspace-pages.spec.ts

@@ -9,6 +9,18 @@ function main(page: Page) {
   return page.locator('main:visible')
 }
 
+/**
+ * A record's bar: the outermost block holding its Back navigation and not its heading, so a wrapper
+ * around Back cannot stand in for the bar.
+ */
+function recordBar(page: Page, back: string) {
+  return main(page)
+    .locator('div')
+    .filter({ has: page.getByRole('navigation', { name: `${back} navigation` }) })
+    .filter({ hasNot: page.getByRole('heading', { level: 1 }) })
+    .first()
+}
+
 /** Record every DOM state of the content region while `action` runs. */
 async function watchFrames(page: Page, action: () => Promise<void>) {
   await page.evaluate(() => {
@@ -208,7 +220,7 @@ test('a record keeps its identifiers in its facts, and the rail line spans only
   await page.goto(fixtureUrl('/workspace/it/issues/IT-136?state=full'))
   const facts = page.getByRole('complementary', { name: 'Facts' })
   await expect(facts.locator('dd', { hasText: /^IT-136$/ })).toBeVisible()
-  const bar = main(page).getByRole('navigation', { name: 'Issues navigation' }).locator('xpath=..')
+  const bar = recordBar(page, 'Issues')
   await expect(bar).toContainText('Approve')
   await expect(bar).not.toContainText('IT-136')
   const rail = await facts.evaluate((aside) => {
@@ -246,9 +258,7 @@ test('a run opens its trace and selected step, with its execution ID among its f
   const executionId = new URL(page.url()).pathname.split('/').at(-1) ?? ''
   const runFacts = main(page).getByLabel('Run facts')
   await expect(runFacts.locator('dd', { hasText: new RegExp(`^${executionId}$`) })).toBeVisible()
-  await expect(
-    main(page).getByRole('navigation', { name: 'Logs navigation' }).locator('xpath=..')
-  ).not.toContainText(executionId)
+  await expect(recordBar(page, 'Logs')).not.toContainText(executionId)
   const trace = main(page).getByRole('list', { name: /steps$/ })
   await trace.getByRole('button', { name: /search_knowledge/ }).click()
   await expect(main(page).getByRole('region', { name: 'search_knowledge step' })).toContainText(

apps/sim/scripts/test-browser-extension-e2e.ts

@@ -1541,7 +1541,11 @@ try {
           await sql`select name, url from sim_link where organization_id=${organizationId}`
         assert.equal(row?.name, 'qa-draft')
         assert.equal(row?.url, destination)
-        const link = draft.getByRole('row').filter({ hasText: 'qa-draft' })
+        // The row opens from its own target: a text cell's tooltip host stacks above it.
+        const link = draft
+          .getByRole('row')
+          .getByRole('button')
+          .filter({ has: draft.getByText('qa-draft', { exact: true }) })
         await expect(link).toBeVisible()
         await screenshot('create-link-saved', draft)
         const opened = browserContext.waitForEvent('page')