improvement(platform): retain latest integration spacing alignment

Author: emir-karabeg

apps/sim/platform/app/(shell)/_components/resource-directory/resource-directory.module.css

@@ -29,7 +29,7 @@
   flex: 1;
   display: grid;
   min-inline-size: 0;
-  gap: var(--ui-stack-gap);
+  gap: var(--ui-heading-gap);
   overflow-wrap: anywhere;
 }
 .copy p {

apps/sim/platform/app/(shell)/integrations/_components/integration-center/integration-center.module.css

@@ -4,14 +4,11 @@
   min-inline-size: 0;
   gap: var(--ui-product-section-gap);
 }
-.navigation {
-  margin-inline: calc(-1 * var(--ui-row-inset));
-}
 .toolbar,
 .empty {
   display: grid;
   min-inline-size: 0;
-  gap: var(--ui-section-gap);
+  gap: var(--ui-content-gap);
 }
 .empty {
   gap: var(--ui-stack-gap);

apps/sim/platform/app/(shell)/integrations/_components/integration-center/integration-center.tsx

@@ -133,13 +133,11 @@ export function IntegrationCenter({
   return (
     <div className={styles.center}>
       <div className={styles.toolbar}>
-        <div className={styles.navigation}>
-          <DestinationTabs
-            label='Integration categories'
-            destinations={destinations}
-            currentHref={currentHref}
-          />
-        </div>
+        <DestinationTabs
+          label='Integration categories'
+          destinations={destinations}
+          currentHref={currentHref}
+        />
         <IntegrationControls
           leading={
             <SearchField

apps/sim/platform/app/(shell)/integrations/_components/resource-list/resource-list.module.css

@@ -1,7 +1,7 @@
 .group {
   display: grid;
   min-inline-size: 0;
-  gap: var(--ui-section-gap);
+  gap: var(--ui-widget-content-gap);
 }
 .rows {
   display: grid;

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

@@ -50,7 +50,6 @@
   align-items: center;
   flex: none;
   gap: var(--ui-action-gap);
-  padding-inline-end: var(--ui-row-inset);
 }
 .body {
   display: flex;

apps/sim/platform/design-system/components/destination-tabs/destination-tabs.module.css

@@ -4,7 +4,6 @@
 .lane {
   display: flex;
   align-items: center;
-  gap: var(--spacing-8);
-  min-height: var(--spacing-app-touch-target);
+  gap: var(--ui-list-gap);
   inline-size: max-content;
 }

apps/sim/platform/docs/integration-center.md

@@ -11,7 +11,7 @@
 | MCPs | Shared and Personal sections for custom servers. Connection details belong to the server, not a fabricated provider catalog. |
 | Credentials | Shared and Personal sections for named credentials and secrets. Show access in the list and ownership in the detail or editor, without exposing a secret in a list. |
 
-Keep the heading, description, reading column and major gaps aligned with Home. DestinationTabs and the compact control bar follow the Platform Workspaces anatomy in Paper. Search sits at the start of the control bar; destination-specific sorting, filtering and create actions sit at the end. Category and access choices use ChoiceMenu, the exact Home period owner with a compact quiet trigger. Select/SelectField belong to the editor's form fields, not this toolbar. Tabs and the control bar use the same 12px section gap as Home’s wordmark and composer. Categories and ownership sections live in the content, not as another nested tab system. Empty results sit at the normal section-title edge immediately below the controls.
+Keep the heading, description, reading column and major gaps aligned with Home. DestinationTabs and the compact control bar follow the Platform Workspaces anatomy in Paper. Search sits at the start of the control bar; destination-specific sorting, filtering and create actions sit at the end. Category and access choices use ChoiceMenu, the exact Home period owner with a compact quiet trigger. Select/SelectField belong to the editor's form fields, not this toolbar. The title-to-description gap is 3px, matching Home. Measure 24px from the description to the tab surfaces, 12px from tabs to the control bar, and 24px from that bar to the first group heading. The tab lane has no extra vertical padding. Group headings sit 16px above their first row, matching Home Email and attention. Tabs and sibling rows use the sidebar’s 2px list gap; leading marks and copy use the shared 8px gap. Keep the tab surfaces inside the reading-column text edge, as Home does with Build/Search. The quiet search, trailing toolbar controls and list hover surfaces retain the shared 8px outer inset on both sides. Categories and ownership sections live in the content, not as another nested tab system. Empty results sit at the normal section-title edge immediately below the controls.
 
 The route entry stays thin. `integrations/_components/integration-center/` owns the frame and destination composition. `resource-list/` and `resource-editor/` own the feature's list content and editor fields. Reuse EMCN DestinationTabs, SearchField, ActivityRow, Avatar, Button, Menu, Modal and Field owners. Base UI supplies complex behavior inside EMCN; product code supplies data and callbacks. Leading marks align with the first line, trailing people and actions center against the whole row, and lists use the same shared rhythm as Home email and notification rows. App rows end with two profile photos and a passive +N count before their navigation chevron. Individual photos reveal names on hover; the count opens nothing. Details use a natural-language usage line below the description. Skills use the slash glyph; credential keys share the central key geometry. Reconnection stays an account action, without an extra list status.