Skip to content

Commit a5b92b1

Browse files
waleedlatif1waleedlatif1
authored
fix(tables): align sidebar dividers, disclosure spacing, and header height with the editor and page header (#5003)
1 parent 636bd74 commit a5b92b1

10 files changed

Lines changed: 47 additions & 50 deletions

File tree

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -128,8 +128,11 @@ export const ResourceHeader = memo(function ResourceHeader({
128128
: -1
129129

130130
return (
131-
<div ref={headerRef} className='border-[var(--border)] border-b px-4 py-[8.5px]'>
132-
<div className='flex min-w-0 items-center justify-between gap-3'>
131+
<div
132+
ref={headerRef}
133+
className='flex min-h-[48px] items-center border-[var(--border)] border-b px-4 py-[8.5px]'
134+
>
135+
<div className='flex min-w-0 flex-1 items-center justify-between gap-3'>
133136
<div className='flex min-w-0 flex-1 items-center gap-2 overflow-hidden'>
134137
{hasBreadcrumbs ? (
135138
breadcrumbs.map((crumb, i) => {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,7 @@ function ColumnConfigBody({
164164

165165
return (
166166
<div className='flex h-full flex-col'>
167-
<div className='flex items-center justify-between border-[var(--border)] border-b px-3 py-[8.5px]'>
167+
<div className='flex min-h-[48px] items-center justify-between border-[var(--border)] border-b px-3 py-[8.5px]'>
168168
<h2 className='font-medium text-[var(--text-primary)] text-small'>Configure column</h2>
169169
<Button
170170
variant='ghost'

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -216,7 +216,7 @@ export function EnrichmentConfig({
216216

217217
return (
218218
<div className='flex h-full flex-col'>
219-
<div className='flex items-center justify-between border-[var(--border)] border-b px-3 py-[8.5px]'>
219+
<div className='flex min-h-[48px] items-center justify-between border-[var(--border)] border-b px-3 py-[8.5px]'>
220220
<div className='flex min-w-0 items-center gap-1.5'>
221221
<Button
222222
variant='ghost'

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ function EnrichmentsSidebarBody({
7272
if (editGroup && !editEnrichment) {
7373
return (
7474
<div className='flex h-full flex-col'>
75-
<div className='flex items-center justify-between border-[var(--border)] border-b px-3 py-[8.5px]'>
75+
<div className='flex min-h-[48px] items-center justify-between border-[var(--border)] border-b px-3 py-[8.5px]'>
7676
<h2 className='font-medium text-[var(--text-primary)] text-small'>Enrichment</h2>
7777
<Button
7878
variant='ghost'
@@ -118,7 +118,7 @@ function EnrichmentsSidebarBody({
118118

119119
return (
120120
<div className='flex h-full flex-col'>
121-
<div className='flex items-center justify-between border-[var(--border)] border-b px-3 py-[8.5px]'>
121+
<div className='flex min-h-[48px] items-center justify-between border-[var(--border)] border-b px-3 py-[8.5px]'>
122122
<h2 className='font-medium text-[var(--text-primary)] text-small'>Enrichments</h2>
123123
<Button
124124
variant='ghost'

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

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {
1313
ChipCombobox,
1414
ChipInput,
1515
type ComboboxOptionGroup,
16+
DashedDividerLine,
1617
FieldDivider,
1718
Label,
1819
Loader,
@@ -117,13 +118,6 @@ interface WorkflowSidebarProps {
117118
onBack?: () => void
118119
}
119120

120-
/** Dashed hairline flanking the "Show additional fields" disclosure — mirrors
121-
* the workflow editor's advanced-mode divider. */
122-
const DASHED_DIVIDER_STYLE = {
123-
backgroundImage:
124-
'repeating-linear-gradient(to right, var(--border) 0px, var(--border) 6px, transparent 6px, transparent 12px)',
125-
} as const
126-
127121
const OUTPUT_VALUE_SEPARATOR = '::'
128122

129123
const encodeOutputValue = (blockId: string, path: string) =>
@@ -794,7 +788,7 @@ export function WorkflowSidebarBody({
794788

795789
return (
796790
<div className='flex h-full flex-col'>
797-
<div className='flex items-center justify-between border-[var(--border)] border-b px-3 py-[8.5px]'>
791+
<div className='flex min-h-[48px] items-center justify-between border-[var(--border)] border-b px-3 py-[8.5px]'>
798792
<div className='flex min-w-0 items-center gap-1.5'>
799793
{showBackButton && (
800794
<Button
@@ -1015,8 +1009,8 @@ export function WorkflowSidebarBody({
10151009
)}
10161010
{selectedWorkflowId && (
10171011
<>
1018-
<div className='flex items-center gap-2.5 px-0.5 pt-3.5 pb-1'>
1019-
<div className='h-[1.25px] flex-1' style={DASHED_DIVIDER_STYLE} />
1012+
<div className='flex items-center gap-2.5 px-0.5 pt-3.5 pb-3'>
1013+
<DashedDividerLine className='flex-1' />
10201014
<button
10211015
type='button'
10221016
onClick={() => setShowAdvanced((v) => !v)}
@@ -1030,7 +1024,7 @@ export function WorkflowSidebarBody({
10301024
)}
10311025
/>
10321026
</button>
1033-
<div className='h-[1.25px] flex-1' style={DASHED_DIVIDER_STYLE} />
1027+
<DashedDividerLine className='flex-1' />
10341028
</div>
10351029
{showAdvanced && (
10361030
<>

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

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,14 @@
22

33
import { ChevronUp } from 'lucide-react'
44
import SimpleCodeEditor from 'react-simple-code-editor'
5-
import { Code as CodeEditor, Combobox, getCodeEditorProps, Input, Label } from '@/components/emcn'
5+
import {
6+
Code as CodeEditor,
7+
Combobox,
8+
FieldDivider,
9+
getCodeEditorProps,
10+
Input,
11+
Label,
12+
} from '@/components/emcn'
613
import { WORKFLOW_SEARCH_SUBFLOW_FIELD_IDS } from '@/lib/workflows/search-replace/subflow-fields'
714
import {
815
formatDisplayText,
@@ -136,15 +143,7 @@ export function SubflowEditor({
136143
/>
137144
</div>
138145

139-
<div className='px-0.5 pt-4 pb-2.5'>
140-
<div
141-
className='h-[1.25px]'
142-
style={{
143-
backgroundImage:
144-
'repeating-linear-gradient(to right, var(--border) 0px, var(--border) 6px, transparent 6px, transparent 12px)',
145-
}}
146-
/>
147-
</div>
146+
<FieldDivider className='pb-2.5' />
148147

149148
<div
150149
data-workflow-search-subblock-id={configSearchFieldId}

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

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import { useParams } from 'next/navigation'
1616
import { usePostHog } from 'posthog-js/react'
1717
import { useShallow } from 'zustand/react/shallow'
1818
import { useStoreWithEqualityFn } from 'zustand/traditional'
19-
import { Button, FieldDivider, Loader, Tooltip } from '@/components/emcn'
19+
import { Button, DashedDividerLine, FieldDivider, Loader, Tooltip } from '@/components/emcn'
2020
import { captureEvent } from '@/lib/posthog/client'
2121
import {
2222
buildCanonicalIndex,
@@ -62,12 +62,6 @@ import { useWorkflowStore } from '@/stores/workflows/workflow/store'
6262
/** Stable empty object to avoid creating new references */
6363
const EMPTY_SUBBLOCK_VALUES = {} as Record<string, any>
6464

65-
/** Shared style for dashed divider lines */
66-
const DASHED_DIVIDER_STYLE = {
67-
backgroundImage:
68-
'repeating-linear-gradient(to right, var(--border) 0px, var(--border) 6px, transparent 6px, transparent 12px)',
69-
} as const
70-
7165
/**
7266
* Icon component for rendering block icons.
7367
*
@@ -657,7 +651,7 @@ export function Editor() {
657651

658652
{hasAdvancedOnlyFields && canEditBlock && (
659653
<div className='flex items-center gap-2.5 px-0.5 pt-3.5 pb-3'>
660-
<div className='h-[1.25px] flex-1' style={DASHED_DIVIDER_STYLE} />
654+
<DashedDividerLine className='flex-1' />
661655
<button
662656
type='button'
663657
onClick={handleToggleAdvancedMode}
@@ -670,16 +664,16 @@ export function Editor() {
670664
className={`size-[14px] transition-transform duration-200 ${displayAdvancedOptions ? 'rotate-180' : ''}`}
671665
/>
672666
</button>
673-
<div className='h-[1.25px] flex-1' style={DASHED_DIVIDER_STYLE} />
667+
<DashedDividerLine className='flex-1' />
674668
</div>
675669
)}
676670
{hasAdvancedOnlyFields && !canEditBlock && displayAdvancedOptions && (
677671
<div className='flex items-center gap-2.5 px-0.5 pt-3.5 pb-3'>
678-
<div className='h-[1.25px] flex-1' style={DASHED_DIVIDER_STYLE} />
672+
<DashedDividerLine className='flex-1' />
679673
<span className='whitespace-nowrap font-medium text-[var(--text-secondary)] text-small'>
680674
Additional fields
681675
</span>
682-
<div className='h-[1.25px] flex-1' style={DASHED_DIVIDER_STYLE} />
676+
<DashedDividerLine className='flex-1' />
683677
</div>
684678
)}
685679

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

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -657,15 +657,7 @@ function SubflowConfigDisplay({ block, loop, parallel }: SubflowConfigDisplayPro
657657
</div>
658658

659659
{/* Dashed Line Separator - matches SubflowEditor */}
660-
<div className='px-0.5 pt-4 pb-2.5'>
661-
<div
662-
className='h-[1.25px]'
663-
style={{
664-
backgroundImage:
665-
'repeating-linear-gradient(to right, var(--border) 0px, var(--border) 6px, transparent 6px, transparent 12px)',
666-
}}
667-
/>
668-
</div>
660+
<FieldDivider className='pb-2.5' />
669661

670662
{/* Configuration - matches SubflowEditor */}
671663
<div>

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

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,21 @@ const DASHED_DIVIDER_STYLE = {
55
'repeating-linear-gradient(to right, var(--border) 0px, var(--border) 6px, transparent 6px, transparent 12px)',
66
} as const
77

8+
/**
9+
* The bare dashed hairline used by `FieldDivider` and by inline divider rows
10+
* (e.g. the "Show additional fields" disclosure flanks in the workflow editor
11+
* and table sidebars). Single source of truth for the dash pattern and line
12+
* thickness — consumers pass layout-only classes such as `flex-1`.
13+
*
14+
* @example
15+
* ```tsx
16+
* <DashedDividerLine className='flex-1' />
17+
* ```
18+
*/
19+
function DashedDividerLine({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
20+
return <div className={cn('h-[1.25px]', className)} style={DASHED_DIVIDER_STYLE} {...props} />
21+
}
22+
823
interface FieldDividerProps extends React.HTMLAttributes<HTMLDivElement> {
924
/**
1025
* Adds the `subblock-divider` marker class so the workflow editor's CSS
@@ -34,9 +49,9 @@ function FieldDivider({ className, subblockMarker = false, ...props }: FieldDivi
3449
className={cn('px-0.5 pt-4 pb-[13px]', subblockMarker && 'subblock-divider', className)}
3550
{...props}
3651
>
37-
<div className='h-[1.25px]' style={DASHED_DIVIDER_STYLE} />
52+
<DashedDividerLine />
3853
</div>
3954
)
4055
}
4156

42-
export { FieldDivider }
57+
export { DashedDividerLine, FieldDivider }

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ export {
9090
DropdownMenuTrigger,
9191
} from './dropdown-menu/dropdown-menu'
9292
export { Expandable, ExpandableContent } from './expandable/expandable'
93-
export { FieldDivider } from './field-divider/field-divider'
93+
export { DashedDividerLine, FieldDivider } from './field-divider/field-divider'
9494
export { Info } from './info/info'
9595
export {
9696
InfoCard,

0 commit comments

Comments
 (0)