improvement(knowledge): align connected-sources rows and move source chip left of filter/sort by waleedlatif1 · Pull Request #5117 · simstudioai/sim

waleedlatif1 · 2026-06-17T19:58:30Z

Summary

Drop the -mx-2 on the connectors list so rows respect the ChipModalBody gutter — the connected-source row hover no longer bleeds to the modal edges, and row content lines up with the px-4 header (matching the integrations row pattern).
Add a leading slot to ResourceOptions (rendered left of the filter/sort cluster) and render the knowledge connected-source chip there instead of the far-right aside, so it reads as part of the control row. aside stays right-aligned for the table editor's run/stop control (which intentionally sits opposite filter/sort).

Type of Change

Improvement

Testing

Tested manually. tsc + biome clean. Token-level alignment verified against the integrations row/icon-tile patterns.

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)

…chip left of filter/sort - Drop the -mx-2 on the connectors list so rows respect the ChipModalBody gutter: the row hover no longer bleeds to the modal edges and row content lines up with the px-4 header. - Add a 'leading' slot to ResourceOptions (left of the filter/sort cluster) and render the knowledge connected-source chip there instead of the far-right 'aside', so it reads as part of the control row. 'aside' stays right-aligned for the table editor's run/stop control.

vercel · 2026-06-17T19:58:33Z

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

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Skipped		Jun 17, 2026 8:10pm

cursor · 2026-06-17T19:58:39Z

PR Summary

Low Risk
Presentation-only flex and spacing changes in shared resource chrome and knowledge connectors; no logic or API changes.

Overview
Resource options bar layout — ResourceOptions no longer splits the toolbar with justify-between. Filter, sort, and filter tags sit in a single right-aligned group (ml-auto), with the existing aside slot rendered immediately to the left of that cluster (not on the far opposite edge). The aside JSDoc is updated to match (knowledge connected-source badge, embedded table run/stop).

Knowledge connectors list — Removes -mx-2 on the connected-sources list so rows stay inside the modal body gutter; hover/alignment should match the header and integrations-style rows.

Table embedded mode — Comment-only note that run/stop still uses aside, now beside filter/sort rather than opposite them.

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

The options-bar aside has a single other consumer (the table editor's embedded run/stop control), so instead of adding a separate slot, render aside itself to the left of the filter/sort cluster. Drops the extra slot and keeps one canonical control position; the run/stop control moves left too, which is fine for a status widget.

waleedlatif1 · 2026-06-17T20:03:29Z

@greptile review

waleedlatif1 · 2026-06-17T20:03:30Z

@cursor review

greptile-apps · 2026-06-17T20:07:13Z

Greptile Summary

This PR makes two independent UI alignment fixes in the knowledge and table views. It removes the -mx-2 negative margin from the connectors list so rows respect the modal gutter and hover highlights no longer bleed to the edges. It also restructures ResourceOptions to place the aside slot inside a single ml-auto right-aligned group alongside filter/sort, replacing the old justify-between layout that left the two elements on opposite ends of the bar.

connectors-section.tsx: Drop -mx-2 from the connector list wrapper so ConnectorCard rows align with the header and hover state is contained within the gutter.
resource-options.tsx: Move aside inside an ml-auto flex group with the filter/sort cluster; aside is always adjacent to (left of) the controls regardless of whether a search prop is present.
table.tsx: Comment-only correction reflecting the new slot position description.

Confidence Score: 5/5

Safe to merge — changes are layout-only with no logic, data, or API surface modifications.

All three files touch only CSS class names and JSDoc/comments. The resource-options.tsx restructuring is mechanically correct: removing justify-between and wrapping aside + filter/sort in a single ml-auto group ensures adjacency in both the search-present and search-absent cases. The gap-1.5 only creates visible space between rendered flex children, so an absent aside renders as nothing and introduces no phantom gap. No state, mutations, or data flows are touched.

No files require special attention.

Important Files Changed

Filename	Overview
apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-options/resource-options.tsx	Replaced `justify-between` layout with a single `ml-auto` right-aligned group containing both `aside` and filter/sort, so the chip renders immediately left of the controls with or without a search bar. JSDoc updated accordingly.
apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connectors-section/connectors-section.tsx	Removed `-mx-2` from the connectors list container; hover highlight on each ConnectorCard no longer bleeds past the ChipModalBody gutter and row content aligns with the px-4 header.
apps/sim/app/workspace/[workspaceId]/tables/[tableId]/table.tsx	Comment-only update: description of the aside slot corrected from 'opposite filter/sort' to 'just left of filter/sort', reflecting the layout change made in resource-options.tsx.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    RO["ResourceOptions container\n(flex items-center)"]
    RO --> S["SearchSection\n(flex-1, when search prop present)"]
    RO --> G["ml-auto group\n(shrink-0, flex, gap-1.5)"]
    G --> A["aside slot\n(e.g. connector badge or run/stop)"]
    G --> FC["filter/sort cluster\n(flex items-center)"]
    FC --> FT["filterTags chips"]
    FC --> F["Filter chip / popover"]
    FC --> SR["Sort dropdown"]

    style A fill:#e0f2fe,stroke:#0ea5e9
    style G fill:#f0fdf4,stroke:#22c55e

%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
flowchart TD
    RO["ResourceOptions container\n(flex items-center)"]
    RO --> S["SearchSection\n(flex-1, when search prop present)"]
    RO --> G["ml-auto group\n(shrink-0, flex, gap-1.5)"]
    G --> A["aside slot\n(e.g. connector badge or run/stop)"]
    G --> FC["filter/sort cluster\n(flex items-center)"]
    FC --> FT["filterTags chips"]
    FC --> F["Filter chip / popover"]
    FC --> SR["Sort dropdown"]

    style A fill:#e0f2fe,stroke:#0ea5e9
    style G fill:#f0fdf4,stroke:#22c55e

_{Reviews (5): Last reviewed commit: "docs(resource): clarify aside groups wit..." | Re-trigger Greptile}

…search bar Group aside + the filter/sort cluster in one ml-auto right-aligned container instead of relying on the search's flex-1 to anchor them. Without this, an options bar with no search (the embedded mothership table editor) split aside to the far left and filter/sort to the far right via justify-between.

waleedlatif1 · 2026-06-17T20:08:33Z

@greptile review

waleedlatif1 · 2026-06-17T20:08:34Z

@cursor review

greptile-apps · 2026-06-17T20:08:43Z

Greptile Summary

This PR makes two UI alignment improvements: removes the -mx-2 bleed on the connectors list so rows respect the modal gutter, and repositions the aside slot in ResourceOptions to sit before (left of) the filter/sort cluster instead of after it.

The -mx-2 removal in connectors-section.tsx is a clean, self-contained fix that correctly aligns connector rows with the header gutter.
Moving aside before the filter/sort <div> achieves the intended "left of filter/sort" adjacency only when a search prop is also present (the knowledge view case). Without search — as in the table's embedded mode — justify-between positions aside at the far left and filter/sort at the far right, reversing their previous left/right arrangement.
The JSDoc and table.tsx comment both describe aside as "left of filter/sort", but neither qualifies that this adjacency depends on search being present.

Confidence Score: 3/5

The knowledge view gutter fix is safe, but the aside-slot reposition has an unintended side effect in the table embedded mode that should be verified before merging.

The aside reposition works correctly for the knowledge view (which always has a search prop) but silently swaps the table embedded-mode toolbar layout — run/stop moved from the far right to the far left — because justify-between with only two flex children puts them at opposite ends. The table comment was updated to say "just left of filter/sort" which does not match this rendering.

Pay close attention to resource-options.tsx: the aside placement is only adjacent to filter/sort when search is present; the no-search (table embedded) path needs verification.

Important Files Changed

Filename	Overview
apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-options/resource-options.tsx	Moves `aside` slot from after the filter/sort cluster to before it; the intended "left of filter/sort" adjacency only holds when `search` is also present — without search (table embedded mode) `justify-between` puts `aside` at the far left and filter/sort at the far right, reversing their previous positions.
apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connectors-section/connectors-section.tsx	Removes `-mx-2` negative margin from the connector list so rows stay within the `ChipModalBody` gutter and no longer bleed to the modal edges — clean, isolated fix.
apps/sim/app/workspace/[workspaceId]/tables/[tableId]/table.tsx	Only updates the descriptive comment above `Resource.Options`; the updated wording ("just left of filter/sort") is inaccurate for the no-search case.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[ResourceOptions rendered] --> B{search prop present?}
    B -->|Yes| C["Layout: [Search flex-1] [aside] [Filter/Sort]"]
    C --> D["aside is adjacent LEFT of filter/sort ✓\n(knowledge view — works as intended)"]
    B -->|No| E["Layout: justify-between with 2 items\n[aside] ... [Filter/Sort]"]
    E --> F["aside at far LEFT, filter/sort at far RIGHT\n(table embedded mode — opposite ends, not adjacent)"]
    F --> G["Run/Stop control moved: was far RIGHT → now far LEFT"]

%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
flowchart TD
    A[ResourceOptions rendered] --> B{search prop present?}
    B -->|Yes| C["Layout: [Search flex-1] [aside] [Filter/Sort]"]
    C --> D["aside is adjacent LEFT of filter/sort ✓\n(knowledge view — works as intended)"]
    B -->|No| E["Layout: justify-between with 2 items\n[aside] ... [Filter/Sort]"]
    E --> F["aside at far LEFT, filter/sort at far RIGHT\n(table embedded mode — opposite ends, not adjacent)"]
    F --> G["Run/Stop control moved: was far RIGHT → now far LEFT"]

_{Reviews (2): Last reviewed commit: "fix(resource): keep options aside groupe..." | Re-trigger Greptile}

cursor

✅ Bugbot reviewed your changes and found no new issues!

Comment @cursor review or bugbot run to trigger another review on this PR

^{Reviewed by Cursor Bugbot for commit 4a9a229. Configure here.}

…earch

waleedlatif1 · 2026-06-17T20:11:14Z

@greptile review

waleedlatif1 · 2026-06-17T20:11:14Z

@cursor review

cursor

✅ Bugbot reviewed your changes and found no new issues!

Comment @cursor review or bugbot run to trigger another review on this PR

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

waleedlatif1 · 2026-06-17T20:22:45Z

@greptile review

…5128) The unconditional ml-auto from #5117 right-aligned the embedded table editor's filter/sort cluster, which has no search bar. Only push the aside + filter/sort group right when a search occupies the left; without a search it stays left-aligned as before.

vercel Bot temporarily deployed to Preview June 17, 2026 19:58 Inactive

vercel Bot temporarily deployed to Preview June 17, 2026 20:03 Inactive

cursor Bot reviewed Jun 17, 2026

View reviewed changes

Comment thread ...workspace/[workspaceId]/components/resource/components/resource-options/resource-options.tsx

vercel Bot temporarily deployed to Preview June 17, 2026 20:07 Inactive

greptile-apps Bot reviewed Jun 17, 2026

View reviewed changes

Comment thread ...workspace/[workspaceId]/components/resource/components/resource-options/resource-options.tsx

Comment thread apps/sim/app/workspace/[workspaceId]/tables/[tableId]/table.tsx

cursor Bot reviewed Jun 17, 2026

View reviewed changes

docs(resource): clarify aside groups with filter/sort regardless of s…

d92947e

…earch

vercel Bot temporarily deployed to Preview June 17, 2026 20:10 Inactive

cursor Bot reviewed Jun 17, 2026

View reviewed changes

waleedlatif1 merged commit cae1769 into staging Jun 17, 2026
16 checks passed

waleedlatif1 deleted the kb-connected-sources-styling branch June 17, 2026 20:28

waleedlatif1 mentioned this pull request Jun 17, 2026

v0.7.10: models sorting, compress/decompress file block tools, new enrichment providers, deepseek models, db performance #5106

Merged

TheodoreSpeaks mentioned this pull request Jun 18, 2026

fix(resource): left-align table filter/sort when there's no search bar #5128

Merged

6 tasks

Conversation

waleedlatif1 commented Jun 17, 2026

Summary

Type of Change

Testing

Checklist

Uh oh!

vercel Bot commented Jun 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cursor Bot commented Jun 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Summary

Uh oh!

waleedlatif1 commented Jun 17, 2026

Uh oh!

waleedlatif1 commented Jun 17, 2026

Uh oh!

Uh oh!

greptile-apps Bot commented Jun 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Greptile Summary

Confidence Score: 5/5

Important Files Changed

Flowchart

Uh oh!

waleedlatif1 commented Jun 17, 2026

Uh oh!

waleedlatif1 commented Jun 17, 2026

Uh oh!

greptile-apps Bot commented Jun 17, 2026

Greptile Summary

Confidence Score: 3/5

Important Files Changed

Flowchart

Uh oh!

Uh oh!

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

waleedlatif1 commented Jun 17, 2026

Uh oh!

waleedlatif1 commented Jun 17, 2026

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

waleedlatif1 commented Jun 17, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

vercel Bot commented Jun 17, 2026 •

edited

Loading

cursor Bot commented Jun 17, 2026 •

edited

Loading

greptile-apps Bot commented Jun 17, 2026 •

edited

Loading