Preserve integration navigation with desktop search and larger text

Author: emir-karabeg

apps/sim/platform/checks/desktop/renderer.spec.ts

@@ -30,6 +30,7 @@ test('the actual desktop renderer shares product routes, reserves native chrome
     await catalog.getByRole('searchbox').fill('Databricks')
     await expect(catalog.getByRole('button', { name: /^Databricks / })).toBeInViewport()
     await page.keyboard.press('Escape')
+    await expect(catalog).toBeHidden()
     await expect(
       page.getByRole('main').getByRole('button', { name: 'Add integration' })
     ).toBeFocused()

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

@@ -3,6 +3,20 @@ import { expect, test } from '@playwright/test'
 const origin = process.env.PLATFORM_E2E_ORIGIN ?? 'http://127.0.0.1:3181'
 const withoutFixtures = 'http://127.0.0.1:3180'
 
+test('a single click opens an integration from a long list with enlarged text', async ({
+  page,
+}) => {
+  await page.setViewportSize({ width: 360, height: 820 })
+  await page.goto(`${origin}/integrations?state=stress`)
+  await page.evaluate(() => {
+    document.documentElement.style.fontSize = '200%'
+  })
+  const gmail = page.getByRole('link', { name: /^Gmail / })
+  await gmail.scrollIntoViewIfNeeded()
+  await gmail.click()
+  await expect(page.getByRole('heading', { name: 'Gmail', exact: true })).toBeVisible()
+})
+
 test('adding member Search provisions sign-in, preserves decisions on navigation and lets an admin remove the app', async ({
   page,
 }) => {

apps/sim/platform/design-system/components/activity-row/activity-row.module.css

@@ -1,3 +1,7 @@
+.entry {
+  min-inline-size: 0;
+  container: activity-row / inline-size;
+}
 .row {
   display: flex;
   align-items: center;
@@ -8,6 +12,28 @@
   text-align: start;
   cursor: pointer;
 }
+
+@container activity-row (max-width: 19rem) {
+  .row:has(.metaLabel) {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: var(--ui-stack-gap) var(--ui-row-gap);
+  }
+  .row:has(.metaLabel) .meta {
+    display: contents;
+  }
+  .metaLabel {
+    grid-column: 1;
+    grid-row: 2;
+  }
+  .row:has(.leading) .metaLabel {
+    margin-inline-start: calc(var(--ui-icon-size) + var(--ui-row-gap));
+  }
+  .row:has(.metaLabel) .meta > svg {
+    grid-column: 2;
+    grid-row: 1 / span 2;
+  }
+}
 .row:hover {
   background: var(--ui-hover);
 }

apps/sim/platform/design-system/components/activity-row/activity-row.tsx

@@ -48,14 +48,14 @@ export function ActivityRow({
       </ActivityBody>
       {(metadata || showChevron) && (
         <span className={styles.meta} data-type='T052'>
-          {metadata}
+          {metadata && <span className={styles.metaLabel}>{metadata}</span>}
           {showChevron && <Icon name='I032' />}
         </span>
       )}
     </>
   )
   return (
-    <li>
+    <li className={styles.entry}>
       {href !== undefined ? (
         <Link href={href} className={styles.row}>
           {content}

apps/sim/platform/design-system/components/modal/overlay-dialog.tsx

@@ -76,6 +76,20 @@ export function OverlayDialog({
       aria-label={label}
       aria-labelledby={title ? `${id}-title` : undefined}
       aria-describedby={description ? `${id}-description` : undefined}
+      onKeyDown={(event) => {
+        if (
+          event.key === 'Escape' &&
+          !event.defaultPrevented &&
+          !event.nativeEvent.isComposing &&
+          event.target instanceof HTMLInputElement &&
+          event.target.type === 'search' &&
+          event.target.closest('dialog') === event.currentTarget
+        ) {
+          event.preventDefault()
+          event.stopPropagation()
+          onClose()
+        }
+      }}
       onCancel={(event) => {
         event.preventDefault()
         event.stopPropagation()

apps/sim/platform/design-system/components/tooltip/tooltip.module.css

@@ -19,6 +19,10 @@
   visibility: visible;
 }
 
+.tooltip[aria-hidden="true"] {
+  pointer-events: none;
+}
+
 .tooltip {
   width: max-content;
   max-width: min(var(--container-app-sidebar), 90vw);