fix(ui): simplify responsive layouts and compact workflow controls by waleedlatif1 · Pull Request #8960 · simstudioai/sim

waleedlatif1 · 2026-10-13T03:41:18Z

Summary

Use the phone layout below 768px and the regular layout at and above it for workflow panels and chat resources, with matching CSS and JavaScript boundaries.
Keep workflow action faces compact on phones while preserving 44px touch targets and full-width Chip behavior through the shared design-system helper.
Align canvas, floating-panel, and resource-resize bounds with the rendered layout, including fractional widths at 768px.

Type of Change

Bug fix

Testing

Cleanup review; lint; all 26 workspace type checks; all 59 audits, including docs and generated artifacts; block-registry check.
175 focused tests and root bun run test (script tests plus all 20 workspace test tasks).
191 real-browser checks passed across Chromium/WebKit at 320–1920px, with an additional 768px resize boundary exercised in both browsers. JSON reports, screenshots, and traces retained locally.
Regression checks fail when either fractional measurement or consistent accessibility rounding is removed; both pass with the fix.
Compact full-width Chip/ChipLink behavior failed before the fix in Chromium and WebKit; all 10 browser fixture cases pass afterward.
The Electron chat-panel scenario passes all 16 checks. Its mid-drag resize case now stays in the regular layout and still verifies clamping and preference restoration.
The updated boundary suite passes 29 checks across Chromium and WebKit.
Resize accessibility assertions use one browser snapshot and await the existing layout synchronization; both negative controls still fail when the underlying geometry fixes are removed.
Existing CI runs the mobile suite against the production build in separate Chromium and WebKit jobs, plus the Electron E2E suite.

Checklist

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

vercel · 2026-10-13T03:41:24Z

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

1 Skipped Deployment

Project	Deployment	Actions	Updated
docs	Skipped		Oct 13, 2026 4:25am UTC

cubic-dev-ai

All reported issues were addressed across 25 files

_{Heads up: you’ve reached your flex budget. Increase your flex budget or wait for usage to reset.

Turn on auto-fix | Re-trigger cubic}

greptile-apps · 2026-10-13T03:48:41Z

Confidence Score: 5/5

[Medium impact] The PR appears safe to merge; no blocking issue remains.

Summary

The PR aligns phone layouts below 768px, keeps workflow controls compact, and measures rendered panel widths.

Workflow panels and chat resources use phone layouts below 768px.
Workflow buttons keep small faces and roomy touch targets on phones.
Panel resizing and floating windows follow the panel's visible width.

_{Reviews (3) · Last reviewed commit: "fix(test): sample responsive resize geom..." · Reviewed by Greptile}

waleedlatif1 · 2026-10-13T04:05:14Z

@greptile

waleedlatif1 · 2026-10-13T04:05:15Z

@cubic-dev-ai review this PR

cubic-dev-ai · 2026-10-13T04:05:20Z

@cubic-dev-ai review this PR

@waleedlatif1 I have started the AI code review. It will take a few minutes to complete.

cubic-dev-ai

No issues found across 27 files

Confidence score: 5/5

Automated review surfaced no issues in the provided summaries.
No files require special attention.

_{Heads up: you’ve reached your flex budget. Increase your flex budget or wait for usage to reset.

Turn on auto-fix | Re-trigger cubic}

waleedlatif1 · 2026-10-13T04:25:30Z

@greptile

waleedlatif1 · 2026-10-13T04:25:31Z

@cubic-dev-ai review this PR

cubic-dev-ai · 2026-10-13T04:25:36Z

@cubic-dev-ai review this PR

@waleedlatif1 I have started the AI code review. It will take a few minutes to complete.

cubic-dev-ai

No issues found across 27 files

Confidence score: 5/5

Automated review surfaced no issues in the provided summaries.
No files require special attention.

_{Heads up: you’ve reached your flex budget. Increase your flex budget or wait for usage to reset.

Turn on auto-fix | Re-trigger cubic}

Staging #8960 replaced the chat panel's container queries with max-md breakpoints and useIsMobile. The panel overlay, both header controls and the sliding content keep working on that layout: the resize hook now always records --chat-panel-width (saved width, or half the layout) instead of relying on a 50cqw fallback. Recently Deleted takes staging's paginated query and keeps includeChats, onViewResource and the settings workspace id. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Lrd1NLD9qx2KBLVnw32c3E

fix(ui): simplify responsive layouts and compact workflow controls

9add177

cubic-dev-ai Bot reviewed Oct 13, 2026

View reviewed changes

Comment thread packages/emcn/src/components/chip/chip.tsx Outdated

Comment thread apps/sim/app/workspace/[workspaceId]/home/hooks/use-resource-panel.ts

vercel Bot deployed to Preview October 13, 2026 03:45 View deployment

greptile-apps Bot reviewed Oct 13, 2026

View reviewed changes

Comment thread apps/sim/app/workspace/[workspaceId]/home/hooks/use-resource-panel.ts

fix(ui): align mobile breakpoints and preserve compact widths

555e130

cubic-dev-ai Bot reviewed Oct 13, 2026

View reviewed changes

vercel Bot deployed to Preview October 13, 2026 04:11 View deployment

fix(test): sample responsive resize geometry atomically

da8263b

vercel Bot temporarily deployed to Preview October 13, 2026 04:25 Inactive

cubic-dev-ai Bot reviewed Oct 13, 2026

View reviewed changes

waleedlatif1 merged commit 824b5d3 into staging Oct 13, 2026
53 of 54 checks passed

TheodoreSpeaks mentioned this pull request Oct 13, 2026

v0.9.20: project membership enforcement, db and perf improvements, realtime and auth hardening, CI and test fixes #8963

Merged

waleedlatif1 deleted the codex/simplify-responsive-layouts branch October 13, 2026 05:50

Conversation

waleedlatif1 commented Oct 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Type of Change

Testing

Checklist

Uh oh!

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

Uh oh!

Uh oh!

cubic-dev-ai Bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

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

Uh oh!

Confidence Score: 5/5

Summary

Uh oh!

Uh oh!

waleedlatif1 commented Oct 13, 2026

Uh oh!

waleedlatif1 commented Oct 13, 2026

Uh oh!

cubic-dev-ai Bot commented Oct 13, 2026

Uh oh!

cubic-dev-ai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

waleedlatif1 commented Oct 13, 2026

Uh oh!

waleedlatif1 commented Oct 13, 2026

Uh oh!

cubic-dev-ai Bot commented Oct 13, 2026

Uh oh!

cubic-dev-ai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

This branch was previously deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

waleedlatif1 commented Oct 13, 2026 •

edited

Loading

vercel Bot commented Oct 13, 2026 •

edited

Loading

cubic-dev-ai Bot left a comment •

edited

Loading

greptile-apps Bot commented Oct 13, 2026 •

edited

Loading