fix: ensure consistent UI layout across languages

[cyyeh]

Summary

• Fix header buttons (Export/New Chat) text wrapping in Chinese by removing fixed width, adding white-space: nowrap, and using CSS grid for equal button sizing
• Fix sidebar tabs having different width/height across languages by switching to CSS grid with minmax(0, 1fr) and explicit height: 28px
• Widen sidebar from 280px to 300px

Test plan

• Switch between English and Chinese and verify sidebar tabs are the same size
• Verify Export/New Chat buttons display correctly in both languages
• Verify sidebar width is 300px

🤖 Generated with Claude Code

[claude]

Claude finished @cyyeh's task in 2m 50s —— View job

---

Code Review: fix: ensure consistent UI layout across languages

Tasks

• Gather context and read changed files
• Review CSS changes
• Provide comprehensive feedback

---

Summary

This PR fixes i18n layout inconsistencies in the sidebar tabs and header action buttons when switching between English and Chinese. The approach is sound—CSS Grid is the right tool for equal-width layout regardless of text length.

---

What's Good

• CSS Grid for tabs is the correct fix. Using grid-template-columns: repeat(3, minmax(0, 1fr)) guarantees all tabs are equal-width no matter how long the translated text is. The previous flex-based approach would let tabs resize based on content.
• minmax(0, 1fr) prevents grid blowout. Using 0 as the min prevents long content from overflowing the grid column—good defensive CSS.
• Explicit height: 28px on .sidebar__tab ensures consistent height across locales, removing reliance on padding/line-height calculations that can behave differently across scripts.
• white-space: nowrap on .agent-panel__clear correctly prevents the Export/New Chat labels from wrapping in Chinese.
• The changes are focused and minimal—no unrelated modifications.

---

Issues Found

Minor: display: inline-flex on grid items is semantically off

frontend/src/components/Sidebar.css, line 337

.sidebar__tab {
  display: inline-flex; /* ← this */
  width: 100%;
  ...
}

Grid items are always block-level regardless of display: inline-*, so the browser treats this as display: flex. It works correctly, but display: flex would be more accurate and avoid potential confusion. Combined with width: 100%, inline-flex is contradictory in intent.

Fix this →

---

Minor: Magic number width: 210px on .agent-panel__actions

frontend/src/components/AgentPanel.css, lines 43–48

.agent-panel__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 210px; /* ← magic number */
}

The 1fr 1fr grid makes the two buttons equal-width within the 210px container, but this hardcoded width may still cause overflow if button labels grow in future locales. A more resilient pattern would be to remove the fixed width and let the grid size to content:

.agent-panel__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

The buttons would still be equal-width (both 1fr) and the container would size naturally around them. The white-space: nowrap already prevents wrapping.

---

Minor: Potentially dead CSS — .agent-panel__langfuse

frontend/src/components/AgentPanel.css, lines 50–65

.agent-panel__langfuse {
  width: 80px;
  ...
}

AgentPanel.tsx does not use agent-panel__langfuse—both Export and New Chat buttons use agent-panel__clear. If this class was removed from the component in a previous PR, this CSS is dead code. Worth cleaning up to avoid confusion with the new grid layout (the fixed width: 80px would also conflict with 1fr column sizing if ever placed inside the grid).

---

Nit: .gitignore missing trailing newline

The .gitignore ends without a newline character (visible in the git diff as \ No newline at end of file). POSIX text files should end with a newline.

---

Observation: Empty .agent-panel__actions container when no messages

When messages.length === 0, both conditional buttons are hidden but .agent-panel__actions still renders as an empty 210px-wide div. This is harmless but technically leaves phantom layout space in the header. Since the width is on the container rather than the buttons, this may be intentional to prevent the header from reflowing as messages appear.

---

No Frontend Tests

There are no frontend component tests (frontend/src/**/*.test.* returns empty). Layout regressions like this one are hard to catch without visual regression tests (e.g., Playwright screenshots or Storybook). The existing e2e Playwright tests (e2e/) cover scenario flows but not visual layout. Consider adding a basic visual check to the e2e/scenarios/ui-interactions.yaml that switches languages and verifies tab consistency.

---

Overall

Clean, well-scoped fix. The grid-based approach for sidebar tabs is the right solution and the white-space: nowrap addition is correct. The issues above are all minor or cosmetic—nothing that blocks correctness. The main suggestion worth acting on is removing the width: 210px magic number in favor of letting the grid size naturally.