fix(ui): tighten resource header action spacing (#7172)

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tab-controls.test.ts

@@ -0,0 +1,12 @@
+import { describe, expect, it } from 'vitest'
+import { RESOURCE_HEADER_CLASSES } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tab-controls'
+
+describe('resource header geometry', () => {
+  it('moves the action cluster beside the collapse target without moving the toggle', () => {
+    expect(RESOURCE_HEADER_CLASSES.layout).toContain('[--resource-header-end-inset:16px]')
+    expect(RESOURCE_HEADER_CLASSES.layout).toContain('[--resource-header-fixed-reserve:52px]')
+    expect(RESOURCE_HEADER_CLASSES.layout).toContain('[--resource-header-toggle-hit-size:40px]')
+    expect(RESOURCE_HEADER_CLASSES.layout).toContain('[--resource-header-toggle-size:30px]')
+    expect(RESOURCE_HEADER_CLASSES.endPosition).toBe('right-[var(--resource-header-end-inset)]')
+  })
+})

apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tab-controls.ts

@@ -10,7 +10,7 @@ export const RESOURCE_TAB_ICON_CLASS = 'size-[16px] text-[var(--text-icon)]'
 /** Shared geometry for the resource header and controls positioned over it. */
 export const RESOURCE_HEADER_CLASSES = {
   layout:
-    '[--resource-header-controls-height:40px] [--resource-header-end-inset:16px] [--resource-header-fixed-reserve:64px] [--resource-header-toggle-hit-size:40px] [--resource-header-toggle-size:30px]',
+    '[--resource-header-controls-height:40px] [--resource-header-end-inset:16px] [--resource-header-fixed-reserve:52px] [--resource-header-toggle-hit-size:40px] [--resource-header-toggle-size:30px]',
   /**
    * Drives the tab strip from this header's own tokens rather than restating the
    * strip's defaults, so the height the overlaid controls below are positioned