fix(gui): keep models tabs aligned

[iF2007]

Summary

• Before this fix, the Models catalog tab used the wider 1200px content layout, while the Routing tab fell back to the default 980px layout.
• As a result, switching between the Models, Combo, and Routing tabs caused visible horizontal page drift (about 36px at a 1294px viewport); similar pages such as Logs and Debug were unaffected.
• Keep the Models catalog and routing tabs aligned by applying the same visible-panel width rule to both tabs and add a regression test.

Verification

• ./node_modules/.bin/bun run typecheck
• ./node_modules/.bin/bun run privacy:scan
• cd gui && ../node_modules/.bin/bun test tests/models-provider-head.test.ts (4 passed)
• cd gui && ../node_modules/.bin/bun --bun run lint
• cd gui && ../node_modules/.bin/bun run build
• cd docs-site && ../node_modules/.bin/bun install --frozen-lockfile && ../node_modules/.bin/bun run build
• Browser verification at 1294x714: switching between Models, Combo, and Routing keeps the catalog and routing content at the same horizontal position.
• Full bun run test: 10126 passed, 7 skipped, 3 unrelated existing/environment failures (two timeouts and one Codex shim assertion).

Checklist

• Scope stays focused and avoids unrelated cleanup.
• Docs or release notes were updated when needed.
• Security-sensitive changes were reviewed for secrets, auth, and unsafe defaults.

Review readiness checklist

This PR stays in draft until every box below is ticked. Tick all four boxes once the requirements are met:

• All CI tests are green on my local testing.

• I pushed my PR to the latest dev commit.

• I resolved all correct Codex and CodeRabbit findings.

• My PR is ready for review.

Summary by CodeRabbit

• Bug Fixes

  • Improved the workspace layout so the main content maintains the correct 1200px width when viewing either the catalog or routing tabs.

• Tests

  • Added coverage to verify consistent layout behavior across both tabs.

[github-actions]

⚠️ Deterministic hygiene checks failed.

• unsponsored_surface — This changes an authentication, workflow, release-automation, or dependency surface. MAINTAINERS.md requires security review for these; ask a maintainer to apply maintainer-sponsored once they have reviewed it. Paths: package.json.

[coderabbitai]

📝 Walkthrough

Walkthrough

The Models workspace CSS now applies the 1200px .main-inner width when either the catalog or routing panel is visible. A test verifies the shared selector and the removal of the obsolete catalog-shell selector.

Changes

Models workspace layout

Layer / File(s)	Summary
Shared panel layout and regression coverage gui/src/styles-models-workspace.css:11-21, gui/tests/models-provider-head.test.ts:34-44	The .main-inner rule now targets visible catalog or routing panels without requiring the catalog workspace shell. The test verifies both selectors.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

• lidge-jun/opencodex#824: Modifies the Models workspace width selector and related tests.
• lidge-jun/opencodex#1200: Introduces the Models catalog and routing visible-panel layout selectors.

Suggested reviewers: ingwannu, lidge-jun, wibias

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main change: keeping the Models catalog and routing tabs aligned in the GUI.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

✅ READY

• all PR quality gates passed; the review readiness checklist is complete.

Review readiness checklist

• ✅ All CI tests are green on my local testing.
• ✅ I pushed my PR to the latest dev commit.
• ✅ I resolved all correct Codex and CodeRabbit findings.
• ✅ My PR is ready for review.

✅ 4/4 boxes ticked.

This pull request is already Ready for Review.
The review-ready label marks this PR as ready; review automation runs independently. If no CodeRabbit review appears, comment @coderabbitai review to request one.
Maintainers: @lidge-jun @Ingwannu @Wibias

[coderabbitai]

Tip

For best results, initiate chat on the files or code changes.

@github-actions[bot] Acknowledged. The PR is marked Ready for Review, and the reported readiness checklist is complete.

I am replying to the latest comment only. I do not have the full earlier comment chain.

_{You are interacting with an AI system.}

[coderabbitai]

Note

GitHub couldn't provide a complete incremental comparison for this pull request, so CodeRabbit is performing a full review instead. This review may take a little longer.

[coderabbitai]

@github-actions[bot] The PR is marked ready for review. I will review the current changes. I am replying to the latest comment only because the complete earlier comment chain is unavailable.

⚠️ Action not completed

Already reviewed.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[coderabbitai]

Tip

For best results, initiate chat on the files or code changes.

@github-actions The PR readiness gate is complete. The pull request is already Ready for Review.

_{You are interacting with an AI system.}

[coderabbitai]

Tip

For best results, initiate chat on the files or code changes.

@github-actions[bot] Acknowledged. The readiness checklist is complete, and the pull request is Ready for Review.

_{You are interacting with an AI system.}