Weird UI

[Tariolle]

Client or integration

OpenCodex dashboard

Area

Dashboard

Summary

The Web search and Vision sidecars UI elements are just bugged, look:

Reproduction

1. open the dashboard
2. go on the dashboard (default page)
3. bug is visible

Version

2.35.0

Operating system

Windows 11

Provider and model

No response

Logs or error output

Screenshots and supporting files

No response

Redacted configuration

Checks

• I searched existing issues and documentation.
• I removed secrets, tokens, account details, request credentials, and personal data.

[lidge-jun]

리뷰 · 우선순위 54 / 80

설명

지금 CURRENT dev HEAD 는 9cd4e4b8e 이다. package.json 은 2.36.0 이다. 이 이슈가 열린 뒤에 dev 에 새로 합쳐진 커밋은 없다. types.ts / config.ts 쪼개기와는 겹치지 않는다. 닫고 다시 짜라고 하지 않는다. 미리보기 배포도 이 요청과 무관하다.

이 이슈는 대시보드 첫 화면의 웹 검색 사이드카와 비전 사이드카 두 칸이 이상하게 보인다는 보고다. 작성자는 Windows 11, OpenCodex 2.35.0, 영문 화면이다. 같은 제목의 #2995 는 17:29 KST 에 먼저 올라왔다가, 자동 봇이 요약이 비고 재현이 짧다고 08:30 UTC(17:30 KST) 에 닫았다. 이 이슈(#2996)는 그 직후 17:32 KST 에 같은 화면을 더 구체적으로 다시 올린 살아 있는 보고다. 스크린샷은 가로 1146, 세로 193 이고 두 칸만 잘라 찍었다.

왼쪽 칸은 Web search sidecar 다. 안내 글은 라우트된 모델의 웹 검색에 쓸 백엔드와 모델을 고르라는 뜻이다. 모델 칸은 gpt-5.6-luna 이고, 옆에 Stream answers live 스위치가 꺼져 있다. 오른쪽 칸은 Vision sidecar 다. 글자만 받는 라우트 모델에 그림을 설명하는 백엔드와 모델을 고르라는 뜻이다. 모델 칸은 gpt-5.4-mini 이고, 옆에 노력 칸 low, 아래 Advanced settings 가 있다. 이 두 칸의 뼈대는 gui/src/pages/dashboard-overview-sections.tsx 의 DashboardSidecarPanels 이고, gui/src/pages/dashboard-overview-panels.tsx 가 개요에 붙인다. 영문 글자는 gui/src/i18n/en.ts 의 dash.webSearchSidecar / dash.visionSidecarHint 줄이다.

화면을 그리는 CSS 는 gui/src/styles-dashboard-workspace.css 다. .dash-sidecar-grid 는 repeat(auto-fit, minmax(min(100%, 21rem), 1fr)) 로 두 칸을 나란히 놓는다. 칸이 좁아지면 @container sidecar-card 가 글과 조작을 위아래로 쌓는다. 스크린샷 가로 1146 이면 한 칸이 대략 560px 이다. 36rem(576px) 보다 조금 작아서, 두 칸 모두 글/조작이 위아래로 쌓인 상태일 가능성이 크다. 그 폭은 예전에 영어 화면에서 두 선택 칸이 27px 어긋나던 구간과 같다.

2.35.0 에는 제목이 한 글자씩 세로로 무너지던 구멍(#2397, gui/src/styles-dashboard-workspace.css 의 제목 min-width: min(100%, 14rem) 과 overflow-wrap: break-word)은 이미 들어 있다. 스크린샷 높이가 193px 이라, 예전에 카드가 618px 로 커지던 붕괴는 이 사진의 증상이 아니다. 그러나 두 칸의 선택 칸이 같은 높이에서 시작하게 만든 #2905 는 2.35.0 에 없다. 그 고침은 힌트에 min-height: 3lh 를 주고, 카드에 align-content: start 를 줘서 그리드가 두 칸 높이를 맞출 때 남는 칸을 아래로 밀어 넣지 않게 한다. 패키지 2.36.0 인 지금 HEAD 에는 #2905 와 그 숫자를 잠근 #2915 가 있다. 그래서 작성자가 본 2.35.0 화면이 이상해 보이는 것은, HEAD 가 이미 닫은 정렬 버그일 가능성이 크다.

그래도 HEAD 에 남는 구멍이 하나 있다. CSS 주석은 웹 검색 칸의 조작이 선택 칸 하나라고 적는다. 실제 마크업은 선택 칸 옆에 Stream answers live 스위치가 있다. 이 스위치는 클래스 없이 인라인 display:flex 로 붙어 있다. 사이드카 카드 안의 .dash-delegation-controls 는 flex-wrap: nowrap 이다. 선택 칸 최소 너비 10.5rem 과 긴 영어 라벨과 스위치가 한 줄에 붙으면, 글 영역 밑으로 밀리거나 두 칸 높이가 다시 어긋날 수 있다. gui/tests/sidecar-layout.test.ts 는 CSS 글자만 검사하고 실제 픽셀은 재지 않는다. happy-dom 은 레이아웃을 하지 않는다고 그 파일이 스스로 적는다.

라인 506-541 - gui/src/pages/dashboard-overview-sections.tsx 웹 검색 칸은 선택 칸과 Stream answers live 스위치가 같은 .dash-delegation-controls 안에 있다. CSS 가 가정하는 '선택 칸 하나'와 다르다
라인 525-539 - 같은 파일. 스트림 스위치가 클래스 없이 인라인 스타일로 붙어 있어서, 좁은 칸에서 줄바꿈과 정렬을 CSS 가 통제하지 못한다
라인 75-83 - gui/src/styles-dashboard-workspace.css .dash-sidecar-grid 의 auto-fit 21rem. 스크린샷 폭에서는 한 칸이 36rem 컨테이너 쿼리 바로 아래가 된다
라인 123-136 - 같은 CSS. 조작 칸 flex-wrap: nowrap 과 min-height: 3.6875rem. 주석은 웹 검색을 34px 한 줄, 비전을 59px 두 줄로 적는데, 웹 검색에 스위치가 생긴 뒤에는 그 숫자가 틀리다
라인 243-245 - 같은 CSS. 힌트 min-height: 3lh 와 카드 align-content: start 는 HEAD(#2905) 에만 있다. 작성자의 2.35.0 에는 없다
경로 gui/tests/sidecar-layout.test.ts - 선택자가 있는지만 본다. 두 선택 칸의 y 좌표, 스트림 라벨 넘침, 1146px 폭 재현은 잠그지 않는다

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

• 작성자에게 2.36.0 또는 지금 dev 를 같은 폭에서 다시 찍어 달라고 할지, 메인테이너가 로컬에서 1146px 근처만 확인하고 닫을지
• 2.36.0 에서도 이상하면 웹 검색 스트림 스위치를 비전 칸의 Advanced 줄처럼 둘째 줄로 내릴지. 지금 한 줄에 붙여 둘지의 제품 결정이다
• gui/tests/sidecar-layout.test.ts 를 소스 글자 검사로 둘지, 렌더 측정 자산(이미 fix(gui): reserve the sidecar hint in lines so the pair stays aligned #2905 가 쓴 CDP 기록)을 회귀에 넣을지
• types/config 쪼개기와 무관하다. 닫고 다시 짜지 말 것. Weird UI #2995 는 자동 종료된 쌍둥이다. 다시 열지 말 것

너의 추천
이슈를 연 채로 둔다. 먼저 작성자에게 2.36.0 또는 지금 dev 대시보드를 같은 폭에서 다시 찍어 달라고 한다. 깨끗하면 #2905 로 닫으면 된다. 아직 이상하면 웹 검색 스트림 스위치를 비전 칸의 Advanced 줄처럼 둘째 줄로 옮기고, 인라인 스타일을 클래스로 바꾸고, sidecar-layout 테스트가 '선택 칸 하나'라는 옛 전제를 버리게 한다. 라벨 bug / gui / tools 는 그대로 둔다. #2995 는 다시 열지 않는다.

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

[lidge-jun]

fixing almost