fix(tables): align sidebar dividers, disclosure spacing, and header height

[waleedlatif1]

Summary

• Fix the table workflow sidebar's "additional fields" disclosure spacing to match the workflow editor (pb-1 → pb-3 — it was hugging the Workflow version row)
• Consolidate the dashed hairline into a single DashedDividerLine primitive in field-divider.tsx (emcn) — removes 4 drifting inline copies of the same gradient in editor.tsx, workflow-sidebar.tsx, subflow-editor.tsx, and preview-editor.tsx, so dash pattern and thickness can no longer diverge from the editor
• Align the table sidebar headers ("Configure output column" / "Configure column" / "Enrichments") with the page breadcrumb header: the page header's tallest content is a 30px chip (48px total) while the sidebar headers topped out at a 28px button (46px), so their bottom borders never lined up. All these headers are now locked to min-h-[48px], including the shared ResourceHeader, so the height no longer floats with content

Type of Change

• Bug fix

Testing

Tested manually. Typecheck and lint clean (pre-existing unrelated tailwind.config.ts/codepipeline errors aside).

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Skipped		Jun 12, 2026 6:35pm

[cursor]

PR Summary

Low Risk
CSS/layout and shared UI primitives only; no API, auth, or data-path changes.

Overview
Aligns table/resource header chrome and dashed dividers so sidebars line up with the main page header and the workflow editor.

Headers: Shared ResourceHeader and table sidebars (column config, enrichments, workflow) now use min-h-[48px] with vertical centering so bottom borders match the ~48px breadcrumb header. ResourceHeader is also a single flex row (flex-1 on the inner toolbar).

Dividers: Introduces DashedDividerLine in emcn field-divider (used by FieldDivider internally) and replaces duplicated inline gradient hairlines in the workflow editor, table workflow sidebar, subflow editor, and preview editor. The table workflow sidebar “Show additional fields” row gets pb-3 (was pb-1) to match editor spacing above “Workflow version”.

^{Reviewed by Cursor Bugbot for commit 747a975. Configure here.}

[greptile-apps]

Greptile Summary

This PR fixes three visual alignment issues in the table workflow sidebar: disclosure spacing, header height, and dashed divider consistency. The approach is clean and well-scoped.

• Extracts the repeated repeating-linear-gradient dashed hairline into a new DashedDividerLine EMCN primitive, eliminating four independently-maintained inline copies across editor.tsx, workflow-sidebar.tsx, subflow-editor.tsx, and preview-editor.tsx.
• Locks all sidebar panel headers (ResourceHeader, column config, enrichments, workflow) to min-h-[48px] so their bottom borders align with the 48px page breadcrumb header regardless of button/chip content height.
• Fixes the "Show additional fields" disclosure bottom padding from pb-1 to pb-3 in workflow-sidebar.tsx to match the workflow editor's spacing.

Confidence Score: 5/5

Pure visual/layout fixes with no data, state, or API logic touched — safe to merge.

All changes are Tailwind class additions (min-h-[48px], flex, flex-1) and a straightforward extraction of a repeated inline style into a shared component. The FieldDivider className='pb-2.5' override correctly replaces the old pb-[13px] default via Tailwind Merge. The DashedDividerLine component is simple, well-documented, and follows the existing EMCN authoring patterns. No logic, state, or API paths are affected.

No files require special attention — the resource-header.tsx structural change (outer div now flex) is the most impactful, but adding flex-1 to the inner div ensures layout parity.

Important Files Changed

Filename	Overview
apps/sim/components/emcn/components/field-divider/field-divider.tsx	Introduces DashedDividerLine as a single source of truth for the dashed hairline pattern; FieldDivider now delegates to it internally. Both are exported cleanly.
apps/sim/components/emcn/components/index.ts	Adds DashedDividerLine to the barrel export alongside the existing FieldDivider. No issues.
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx	Removes the local DASHED_DIVIDER_STYLE constant and replaces 4 inline dashed divider <div> elements with <DashedDividerLine className='flex-1' />.
apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx	Removes local DASHED_DIVIDER_STYLE, replaces inline dividers with DashedDividerLine, and fixes disclosure spacing from pb-1 to pb-3. Also adds min-h-[48px] to the header row.
apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx	Outer wrapper gains flex items-center min-h-[48px]; inner content div gains flex-1 so it still stretches full width. Aligns the shared breadcrumb header to a stable 48px minimum height.
apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichments-sidebar.tsx	Applies min-h-[48px] to both Enrichment and Enrichments header rows in the two render paths of EnrichmentsSidebarBody.
apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichment-config.tsx	Adds min-h-[48px] to the EnrichmentConfig header row, consistent with the other sidebar header fixes.
apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-config-sidebar/column-config-sidebar.tsx	Adds min-h-[48px] to the Configure column header row to align with the page breadcrumb height.
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/subflow-editor/subflow-editor.tsx	Replaces the hand-rolled dashed divider block with <FieldDivider className='pb-2.5' />, preserving the original pb-2.5 bottom padding via Tailwind Merge.
apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx	Same FieldDivider className='pb-2.5' replacement as subflow-editor.tsx; the comment above is preserved. No issues.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    FDL["DashedDividerLine\n(field-divider.tsx)\nSingle source of truth for\ndash pattern + h-[1.25px]"]

    FD["FieldDivider\n(field-divider.tsx)\nrole=separator, spacing wrapper"]

    FDL --> FD

    subgraph Consumers using FieldDivider
        SE["subflow-editor.tsx\nFieldDivider className='pb-2.5'"]
        PE["preview-editor.tsx\nFieldDivider className='pb-2.5'"]
    end

    subgraph Consumers using DashedDividerLine directly
        ED["editor.tsx\n4 inline disclosure flanks"]
        WS["workflow-sidebar.tsx\n2 disclosure flanks + pb-1 to pb-3"]
    end

    FD --> SE
    FD --> PE
    FDL --> ED
    FDL --> WS

    subgraph Header alignment min-h-48px
        RH["resource-header.tsx\nflex + items-center + min-h-48px"]
        CC["column-config-sidebar.tsx\nmin-h-48px"]
        ES["enrichments-sidebar.tsx\nmin-h-48px x2 render paths"]
        EC["enrichment-config.tsx\nmin-h-48px"]
        WH["workflow-sidebar.tsx\nmin-h-48px"]
    end

Loading

_{Reviews (1): Last reviewed commit: "fix(tables): align sidebar dividers, dis..." | Re-trigger Greptile}