fix(tables): align sidebar dividers, disclosure spacing, and header height with the editor and page header (#5003)

apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx

@@ -128,8 +128,11 @@ export const ResourceHeader = memo(function ResourceHeader({
         : -1
 
   return (
-    <div ref={headerRef} className='border-[var(--border)] border-b px-4 py-[8.5px]'>
-      <div className='flex min-w-0 items-center justify-between gap-3'>
+    <div
+      ref={headerRef}
+      className='flex min-h-[48px] items-center border-[var(--border)] border-b px-4 py-[8.5px]'
+    >
+      <div className='flex min-w-0 flex-1 items-center justify-between gap-3'>
         <div className='flex min-w-0 flex-1 items-center gap-2 overflow-hidden'>
           {hasBreadcrumbs ? (
             breadcrumbs.map((crumb, i) => {

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-config-sidebar/column-config-sidebar.tsx

@@ -164,7 +164,7 @@ function ColumnConfigBody({
 
   return (
     <div className='flex h-full flex-col'>
-      <div className='flex items-center justify-between border-[var(--border)] border-b px-3 py-[8.5px]'>
+      <div className='flex min-h-[48px] items-center justify-between border-[var(--border)] border-b px-3 py-[8.5px]'>
         <h2 className='font-medium text-[var(--text-primary)] text-small'>Configure column</h2>
         <Button
           variant='ghost'

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichment-config.tsx

@@ -216,7 +216,7 @@ export function EnrichmentConfig({
 
   return (
     <div className='flex h-full flex-col'>
-      <div className='flex items-center justify-between border-[var(--border)] border-b px-3 py-[8.5px]'>
+      <div className='flex min-h-[48px] items-center justify-between border-[var(--border)] border-b px-3 py-[8.5px]'>
         <div className='flex min-w-0 items-center gap-1.5'>
           <Button
             variant='ghost'

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichments-sidebar.tsx

@@ -72,7 +72,7 @@ function EnrichmentsSidebarBody({
   if (editGroup && !editEnrichment) {
     return (
       <div className='flex h-full flex-col'>
-        <div className='flex items-center justify-between border-[var(--border)] border-b px-3 py-[8.5px]'>
+        <div className='flex min-h-[48px] items-center justify-between border-[var(--border)] border-b px-3 py-[8.5px]'>
           <h2 className='font-medium text-[var(--text-primary)] text-small'>Enrichment</h2>
           <Button
             variant='ghost'
@@ -118,7 +118,7 @@ function EnrichmentsSidebarBody({
 
   return (
     <div className='flex h-full flex-col'>
-      <div className='flex items-center justify-between border-[var(--border)] border-b px-3 py-[8.5px]'>
+      <div className='flex min-h-[48px] items-center justify-between border-[var(--border)] border-b px-3 py-[8.5px]'>
         <h2 className='font-medium text-[var(--text-primary)] text-small'>Enrichments</h2>
         <Button
           variant='ghost'

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx

@@ -13,6 +13,7 @@ import {
   ChipCombobox,
   ChipInput,
   type ComboboxOptionGroup,
+  DashedDividerLine,
   FieldDivider,
   Label,
   Loader,
@@ -117,13 +118,6 @@ interface WorkflowSidebarProps {
   onBack?: () => void
 }
 
-/** Dashed hairline flanking the "Show additional fields" disclosure — mirrors
- *  the workflow editor's advanced-mode divider. */
-const DASHED_DIVIDER_STYLE = {
-  backgroundImage:
-    'repeating-linear-gradient(to right, var(--border) 0px, var(--border) 6px, transparent 6px, transparent 12px)',
-} as const
-
 const OUTPUT_VALUE_SEPARATOR = '::'
 
 const encodeOutputValue = (blockId: string, path: string) =>
@@ -794,7 +788,7 @@ export function WorkflowSidebarBody({
 
   return (
     <div className='flex h-full flex-col'>
-      <div className='flex items-center justify-between border-[var(--border)] border-b px-3 py-[8.5px]'>
+      <div className='flex min-h-[48px] items-center justify-between border-[var(--border)] border-b px-3 py-[8.5px]'>
         <div className='flex min-w-0 items-center gap-1.5'>
           {showBackButton && (
             <Button
@@ -1015,8 +1009,8 @@ export function WorkflowSidebarBody({
             )}
             {selectedWorkflowId && (
               <>
-                <div className='flex items-center gap-2.5 px-0.5 pt-3.5 pb-1'>
-                  <div className='h-[1.25px] flex-1' style={DASHED_DIVIDER_STYLE} />
+                <div className='flex items-center gap-2.5 px-0.5 pt-3.5 pb-3'>
+                  <DashedDividerLine className='flex-1' />
                   <button
                     type='button'
                     onClick={() => setShowAdvanced((v) => !v)}
@@ -1030,7 +1024,7 @@ export function WorkflowSidebarBody({
                       )}
                     />
                   </button>
-                  <div className='h-[1.25px] flex-1' style={DASHED_DIVIDER_STYLE} />
+                  <DashedDividerLine className='flex-1' />
                 </div>
                 {showAdvanced && (
                   <>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/subflow-editor/subflow-editor.tsx

@@ -2,7 +2,14 @@
 
 import { ChevronUp } from 'lucide-react'
 import SimpleCodeEditor from 'react-simple-code-editor'
-import { Code as CodeEditor, Combobox, getCodeEditorProps, Input, Label } from '@/components/emcn'
+import {
+  Code as CodeEditor,
+  Combobox,
+  FieldDivider,
+  getCodeEditorProps,
+  Input,
+  Label,
+} from '@/components/emcn'
 import { WORKFLOW_SEARCH_SUBFLOW_FIELD_IDS } from '@/lib/workflows/search-replace/subflow-fields'
 import {
   formatDisplayText,
@@ -136,15 +143,7 @@ export function SubflowEditor({
             />
           </div>
 
-          <div className='px-0.5 pt-4 pb-2.5'>
-            <div
-              className='h-[1.25px]'
-              style={{
-                backgroundImage:
-                  'repeating-linear-gradient(to right, var(--border) 0px, var(--border) 6px, transparent 6px, transparent 12px)',
-              }}
-            />
-          </div>
+          <FieldDivider className='pb-2.5' />
 
           <div
             data-workflow-search-subblock-id={configSearchFieldId}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx

@@ -16,7 +16,7 @@ import { useParams } from 'next/navigation'
 import { usePostHog } from 'posthog-js/react'
 import { useShallow } from 'zustand/react/shallow'
 import { useStoreWithEqualityFn } from 'zustand/traditional'
-import { Button, FieldDivider, Loader, Tooltip } from '@/components/emcn'
+import { Button, DashedDividerLine, FieldDivider, Loader, Tooltip } from '@/components/emcn'
 import { captureEvent } from '@/lib/posthog/client'
 import {
   buildCanonicalIndex,
@@ -62,12 +62,6 @@ import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 /** Stable empty object to avoid creating new references */
 const EMPTY_SUBBLOCK_VALUES = {} as Record<string, any>
 
-/** Shared style for dashed divider lines */
-const DASHED_DIVIDER_STYLE = {
-  backgroundImage:
-    'repeating-linear-gradient(to right, var(--border) 0px, var(--border) 6px, transparent 6px, transparent 12px)',
-} as const
-
 /**
  * Icon component for rendering block icons.
  *
@@ -657,7 +651,7 @@ export function Editor() {
 
                     {hasAdvancedOnlyFields && canEditBlock && (
                       <div className='flex items-center gap-2.5 px-0.5 pt-3.5 pb-3'>
-                        <div className='h-[1.25px] flex-1' style={DASHED_DIVIDER_STYLE} />
+                        <DashedDividerLine className='flex-1' />
                         <button
                           type='button'
                           onClick={handleToggleAdvancedMode}
@@ -670,16 +664,16 @@ export function Editor() {
                             className={`size-[14px] transition-transform duration-200 ${displayAdvancedOptions ? 'rotate-180' : ''}`}
                           />
                         </button>
-                        <div className='h-[1.25px] flex-1' style={DASHED_DIVIDER_STYLE} />
+                        <DashedDividerLine className='flex-1' />
                       </div>
                     )}
                     {hasAdvancedOnlyFields && !canEditBlock && displayAdvancedOptions && (
                       <div className='flex items-center gap-2.5 px-0.5 pt-3.5 pb-3'>
-                        <div className='h-[1.25px] flex-1' style={DASHED_DIVIDER_STYLE} />
+                        <DashedDividerLine className='flex-1' />
                         <span className='whitespace-nowrap font-medium text-[var(--text-secondary)] text-small'>
                           Additional fields
                         </span>
-                        <div className='h-[1.25px] flex-1' style={DASHED_DIVIDER_STYLE} />
+                        <DashedDividerLine className='flex-1' />
                       </div>
                     )}
 

apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx

@@ -657,15 +657,7 @@ function SubflowConfigDisplay({ block, loop, parallel }: SubflowConfigDisplayPro
       </div>
 
       {/* Dashed Line Separator - matches SubflowEditor */}
-      <div className='px-0.5 pt-4 pb-2.5'>
-        <div
-          className='h-[1.25px]'
-          style={{
-            backgroundImage:
-              'repeating-linear-gradient(to right, var(--border) 0px, var(--border) 6px, transparent 6px, transparent 12px)',
-          }}
-        />
-      </div>
+      <FieldDivider className='pb-2.5' />
 
       {/* Configuration - matches SubflowEditor */}
       <div>

apps/sim/components/emcn/components/field-divider/field-divider.tsx

@@ -5,6 +5,21 @@ const DASHED_DIVIDER_STYLE = {
     'repeating-linear-gradient(to right, var(--border) 0px, var(--border) 6px, transparent 6px, transparent 12px)',
 } as const
 
+/**
+ * The bare dashed hairline used by `FieldDivider` and by inline divider rows
+ * (e.g. the "Show additional fields" disclosure flanks in the workflow editor
+ * and table sidebars). Single source of truth for the dash pattern and line
+ * thickness — consumers pass layout-only classes such as `flex-1`.
+ *
+ * @example
+ * ```tsx
+ * <DashedDividerLine className='flex-1' />
+ * ```
+ */
+function DashedDividerLine({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('h-[1.25px]', className)} style={DASHED_DIVIDER_STYLE} {...props} />
+}
+
 interface FieldDividerProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Adds the `subblock-divider` marker class so the workflow editor's CSS
@@ -34,9 +49,9 @@ function FieldDivider({ className, subblockMarker = false, ...props }: FieldDivi
       className={cn('px-0.5 pt-4 pb-[13px]', subblockMarker && 'subblock-divider', className)}
       {...props}
     >
-      <div className='h-[1.25px]' style={DASHED_DIVIDER_STYLE} />
+      <DashedDividerLine />
     </div>
   )
 }
 
-export { FieldDivider }
+export { DashedDividerLine, FieldDivider }

apps/sim/components/emcn/components/index.ts

@@ -90,7 +90,7 @@ export {
   DropdownMenuTrigger,
 } from './dropdown-menu/dropdown-menu'
 export { Expandable, ExpandableContent } from './expandable/expandable'
-export { FieldDivider } from './field-divider/field-divider'
+export { DashedDividerLine, FieldDivider } from './field-divider/field-divider'
 export { Info } from './info/info'
 export {
   InfoCard,