fix(models): align dashboard tabs and stabilize Combos layout

[blackjune67]

Summary

• Fix the dashboard Models category tab layout across Catalog, Routing, Compatibility, and Combos.
• Align the Combos tab underline with the Models tab buttons.
• Keep Models workspace panels at a consistent 1200px width.
• Prevent Combos loading, empty, and error states from incorrectly stretching full-bleed.
• Scope the change to the affected dashboard styles and add declaration-level regression coverage.

Verification

• bun x tsc --noEmit passed.
• cd gui && bun run lint passed.
• cd gui && bun test tests/models-tab-layout.test.ts passed.
• Manually verified the Models category tabs at http://localhost:5173.
• Full test suite was attempted locally; unrelated Windows ACL, file-lock, and timeout failures occurred.
• Screenshots of the UI change are attached below.

Before

After

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.

[coderabbitai]

Important

Draft PR not reviewed

Draft PRs are not automatically reviewed by default.

• Trigger a manual review

To automatically review draft PRs, update your CodeRabbit configuration:

reviews:
  auto_review:
    drafts: true

---

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]

✅ Deterministic PR hygiene checks passed.

[github-actions]

⏳ DRAFT

• review readiness checklist open (0/4 boxes ticked).

What to do

• Tick all four boxes in the PR description once you're done (currently 0/4).

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.

0/4 boxes ticked.

This PR stays in draft until every box above is ticked.

[lidge-jun]

리뷰 · 우선순위 59 / 80

이 PR은 대시보드 Models 카테고리 탭(카탈로그·라우팅·호환·콤보)에서 탭마다 가로폭이 들쭉날쭉하고, 콤보 탭만 로딩/에러일 때 full-bleed가 혼자 넓어지던 UI를 고친다. 지금 dev HEAD(ff1ac6b8c)를 보면 gui/src/styles.css의 .main-inner--combos가 패딩을 빼는 full-bleed를 쓰고, gui/src/pages/Combos.tsx는 스켈레톤·failed-cold일 때 .combos-workspace-shell 없이 Notice/재시도만 돌려준다. 그래서 main-inner--combos만 켜진 상태에서는 부제·에러·버튼이 화면 끝까지 늘어나고, 카탈로그·호환은 1200px 박스인데 라우팅은 980px 기본으로 떨어져 탭 전환마다 폭이 뛴다. 호환 쪽 .main-inner:has(.lab-page)는 로딩 중 .lab-page가 없어 폭이 흔들리고, 패널이 마운트된 채 남으면 다른 탭으로 폭이 새기도 한다.

고치는 곳은 GUI CSS 세 파일과 선언 단위 테스트뿐이다. styles.css에서 .main-inner--combos > .page-tabs에 margin-inline: 36px / padding-inline: 0으로 밑줄을 버튼에 맞춘다. 워크스페이스 셸이 없을 때는 full-bleed를 끄고 1200px 박스로 돌린다. 셀렉터를 콤마 리스트로 안 묶은 이유가 중요하다. Vite Rolldown CSS 미니파이어가 :not(:has(...)) 콤마 리스트를 깨서 규칙 전체가 버려진다는 주석이다. styles-models-workspace.css는 카탈로그뿐 아니라 보이는 라우팅 패널에도 1200px을 주고, 셸 유무와 상관없이 #models-panel-*:not([hidden])만으로 스코프한다. styles-compatibility-matrix.css도 #models-panel-compatibility:not([hidden])으로 같은 패턴이다.

gui/tests/models-tab-layout.test.ts는 픽셀이 아니라 스타일시트 선언을 effectiveDeclaration로 읽어 margin/padding/max-width를 고정한다. #3328과 CSS는 같고, 이 PR은 shell-free 컨테이너·패널(:not(:has(.combos-workspace-shell))) 선언까지 테스트로 잠근다. #3326은 제목만 Combos/Models이고 diff는 이미 dev에 있는 release.yml 권한 조각이라 이전에 close를 권했다. #3328은 같은 GUI 수정인데 테스트가 약하고 draft로 남아 있다. 실질 수정본은 #3331로 보고, #3326·#3328은 중복으로 정리하는 편이 맞다. 라우팅·인증·콤보 런타임과 무관한 display CSS라 위험은 작다.

우선순위 59는 (1) 매일 보는 Models 탭 UX라 가치는 있으나 (2) 런타임/프로토콜 버그는 아니고 (3) CSS :has·full-bleed는 브라우저·미니파이 조합에 민감해서 CI 초록·한 번 눈 확인 후 합치는 게 맞다는 점수다. 현재 dev가 Meta Model API(meta-model, #3321)·Cursor identity 쪽을 밀고 있어도 GUI 레이아웃 안정은 병렬로 넣어도 된다. draft이고 품질 체크리스트 네 칸이 비어 있으며 Cross-platform CI가 action_required인 점은 머지 전에 풀어야 한다.

경로 styles.css full-bleed 해제 - :not(:has(.combos-workspace-shell))에 의존한다. Combos.tsx 셸 클래스명이 바뀌면 규칙이 조용히 죽는다. 이번 테스트는 그 셀렉터 문자열을 직접 잠가 둔다.
경로 Rolldown 주석 - 콤마 리스트를 피한 판단은 타당하다. 같은 함정을 다시 밟지 않게 짧은 내부 메모나 이슈 링크가 있으면 더 좋다.
경로 모바일 @media - 좁은 창에서 .page-tabs는 padding-inline: 18px인데, 이 PR의 margin-inline: 36px는 그대로다. 좁은 화면에서 탭 밑줄이 과하게 안쪽으로 들어가진 않는지 한 번만 보면 된다.
경로 #3326 / #3328 - 제목·의도가 겹친다. #3326은 잘못된 diff, #3328은 같은 CSS·약한 테스트. #3331만 남기고 나머지는 close.

메인테이너의 판단이 필요한 지점

• draft 해제·체크리스트·CI(action_required / enforce-target) 통과를 머지 조건으로 둘지
• localhost에서 Models 네 탭 + 콤보 로딩/에러를 한 번씩만 눈으로 볼지(저자는 5173 확인했다고 함)
• fix(combos): align Models tab underline and stabilize layout #3326·#3328을 즉시 close하고 #3331만 남길지
• Rolldown :has 콤마 버그를 별도 메모로 남길지

너의 추천

• CI 통과·draft 해제되면 fix(models): align dashboard tabs and stabilize Combos layout #3331 merge. fix(combos): align Models tab underline and stabilize layout #3326·#3328은 close(superseded / wrong diff).
• types/config 대분할·콤보 쿨다운(feat(combos): per-combo cooldownMs and waitForCooldownMs for bursty upstream 429s #3329)과 무관. 충돌 시 CSS만 rebase하면 된다.

이 댓글은 grok-bot이 작성했습니다