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 regression coverage.

Verification

Tested at head \2f6c19d0\ on top of current \dev\ (\�dd89e66).

• \�un run typecheck\
• \�un run privacy:scan\
• \cd gui && bun test tests/models-provider-head.test.ts tests/models-workspace-panels.test.tsx\ (16 passed, including mounted Catalog -> Routing -> Catalog width regression)
• \�un run lint:gui\
• \�un run build:gui\
• Browser verification at \1294x714: switching between Models, Combo, and Routing keeps the catalog and routing content at the same horizontal position.
• PR screenshot reviewed: no tokens, account information, local paths, usernames, or private hostnames.

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.
  • Fixed layout consistency when navigating directly to the routing tab or switching between tabs.

• Tests

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

[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]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 7d2f11f2-5cca-4cc3-9af2-fa163eec3d4f

📥 Commits

Reviewing files that changed from the base of the PR and between b28410b and 2f6c19d.

📒 Files selected for processing (1)

• gui/tests/models-workspace-panels.test.tsx

---

📝 Walkthrough

Walkthrough

The Models workspace CSS applies the 1200px .main-inner width when the catalog or routing panel is visible. Tests cover the shared selector, tab switching, and direct routing visits.

Changes

Models workspace layout

Layer / File(s)	Summary
Shared panel layout and selector coverage gui/src/styles-models-workspace.css:11-21, gui/tests/models-provider-head.test.ts:34-44	The .main-inner rule targets visible catalog or routing panels without requiring the catalog workspace shell. The CSS test verifies both selectors.
Tab layout regression coverage gui/tests/models-workspace-panels.test.tsx:94-188	Test helpers mount Models, inject the page-width CSS, read computed width, and switch tabs. Tests cover tab changes and direct routing visits while inactive panels remain mounted and hidden.

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

Possibly related PRs

• lidge-jun/opencodex#389: Changes Models panel visibility behavior related to the shared layout selector.
• lidge-jun/opencodex#824: Modifies Models workspace layout behavior and related tests.
• lidge-jun/opencodex#1200: Introduces the Models tab-panel layout selectors refined here.

Suggested labels: review-ready

Suggested reviewers: ingwannu, lidge-jun

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main change: keeping the Models catalog and Routing tabs aligned through a shared layout rule.
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.

✨ 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.}

[coderabbitai]

Tip

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

@github-actions The PR readiness checklist and deterministic hygiene checks are complete. The pull request remains 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 PR is Ready for Review. The readiness checklist is complete, and all reported quality gates passed.

_{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 quality gates passed, the readiness checklist is complete, and PR #1423 is Ready for Review.

_{You are interacting with an AI system.}

[Wibias]

Thanks for your contribution. Since I am already working on the ui, i will be closing this.