fix: ensure consistent button sizing across i18n languages

[cyyeh]

Summary

• Use min-width instead of fixed width on text buttons so they maintain minimum size but expand for longer i18n translations
• Add white-space: nowrap to prevent text wrapping across all text buttons
• Affects 7 CSS files: AgentPanel, ChatInput, CreateSkillDialog, FileUpload, QueryEditor, SkillsPanel, UserQuestion

Test plan

• Switch language to zh-TW and verify buttons don't clip or wrap text
• Switch language to en and verify buttons maintain their original sizing
• Check all affected buttons: Run Query, Send, Use, Cancel, Create Skill, Submit, Load Sample, Langfuse, skill detail tabs

🤖 Generated with Claude Code

[claude]

Claude finished @cyyeh's task in 1m 27s —— View job

---

Code Review: fix: ensure consistent button sizing across i18n languages

• Gathering context and reading changed files
• Analyzing CSS changes
• Providing review feedback

---

Summary

This PR makes a focused CSS fix to improve button behavior across i18n languages by switching from fixed width to min-width and adding white-space: nowrap. The approach is sound and addresses a real UX issue.

---

What's Done Well

• Correct approach: Using min-width instead of fixed width is the right pattern — it sets a baseline size while allowing expansion for longer translated strings.
• white-space: nowrap: Adding this across all affected buttons prevents mid-word or awkward line breaks.
• Consistent box-sizing: border-box: Already present on most buttons, which ensures min-width and padding don't produce unexpected sizes.
• Touch targets maintained (SkillsPanel.css:387–400): The existing @media (pointer: coarse) block that increases mobile touch target sizes is preserved and works correctly with the new min-width approach.

---

Issues Found

1. QueryEditor Run Query Button Still Uses Fixed width (Bug)

frontend/src/components/QueryEditor.css:31–43

.query-editor__run-btn {
  width: 100px;   /* ← still fixed, not min-width */
  height: 38px;
  padding: 8px 20px;
  ...
  white-space: nowrap;  /* ← added, but clips with fixed width */
}

The PR description states the fix is to use min-width instead of width, but QueryEditor.css only had white-space: nowrap added — width: 100px was not converted to min-width: 100px. This means the Run Query button will still clip translated text that exceeds 100px wide. The diff shows +1/-0 (one line added) for this file, confirming the width property was untouched.

Fix this →

---

2. AgentPanel Fixed Grid Container May Constrain Expanded Buttons

frontend/src/components/AgentPanel.css:43–48

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

The .agent-panel__clear button now uses white-space: nowrap, but it lives inside a grid container with a fixed width: 210px. For very long translations (e.g., German or Arabic), the buttons are constrained to half of 210px per column (~101px). If translated text is wider, white-space: nowrap will cause text to overflow the button boundary rather than forcing the container to expand. Consider changing this container to use min-width or max-content sizing.

---

3. AgentPanel Langfuse Button Missing white-space: nowrap

frontend/src/components/AgentPanel.css:50–65

.agent-panel__langfuse {
  ...
  min-width: 80px;
  padding: 0 10px;
  /* missing: white-space: nowrap */
}

The Langfuse button has min-width (correctly set), but lacks white-space: nowrap unlike the other buttons in this PR. If the translated label for "Langfuse" or similar icon+text buttons wraps, it could result in an inconsistent height or visual glitch.

---

Observations

• No tests: CSS-only changes are hard to unit test, but the test plan in the PR description covers the key manual scenarios. This is acceptable for a UI-only fix.
• FileUpload large min-width: .file-upload-sample-btn uses min-width: 240px — this is a large baseline but seems intentional for the "Load Sample Data" type label width, and being flexible with min-width is correct here.
• CreateSkillDialog asymmetric button sizes: Cancel (min-width: 80px) vs Save (min-width: 100px) — this intentional difference keeps the primary action visually dominant.

---

Verdict

The fix is well-targeted and uses the right CSS pattern. The main oversight is QueryEditor.css not converting width to min-width, which leaves the Run Query button still susceptible to the i18n clipping bug this PR intends to fix.