fix(ui): align appearance settings across locales

[eachann1024]

What changed

• Replace independent Appearance preference rows with a shared logical grid so labels, hints, and controls stay aligned across translations.
• Let long labels and segmented controls wrap without overflowing, and stack controls below their copy in narrow containers.
• Use logical spacing and separators so Arabic and Hebrew mirror correctly in RTL layouts.
• Add DOM plus real-stylesheet contract tests and document the layout behavior in lat.md.

Why

Translated settings copy varies substantially in length. The previous rows laid themselves out independently, so control positions and row alignment could drift between languages, while longer text could compete with non-shrinking segmented controls.

Root cause

Each row used its own flex layout and the segmented controls opted out of shrinking. There was no shared control column, no narrow-container fallback, and physical spacing did not fully express the intended logical direction behavior.

User impact

Appearance settings now keep a consistent text/control column in English, CJK, expanded translations, Arabic, and Hebrew. Long content wraps cleanly, RTL layouts mirror logically, and narrow panes stack controls without horizontal overflow.

Validation

• Focused Appearance layout contract tests: 2 passed.
• Full test suite: 1,852 passed, 3 skipped.
• npm run typecheck: passed.
• npm run lint: 0 errors; 21 baseline warnings remain in unrelated files.
• npx -y lat.md check: passed.
• Diff check and targeted Prettier check: passed.
• Chromium measurements using the real layout CSS at 800 px and 500 px in LTR and RTL showed no horizontal overflow in the settings rows.

The automated tests validate the rendered DOM structure together with declarations loaded from the real stylesheet. They do not launch the complete Electron application or assert browser pixel geometry.

[greptile-apps]

Greptile Summary

Updates the Appearance settings layout for translated and RTL content.

• Replaces independent flex rows with a shared responsive subgrid.
• Allows translated labels and segmented controls to wrap and stack in narrow containers.
• Uses logical spacing and separators for RTL layouts.
• Adds DOM and stylesheet contract tests and documents the layout invariants.

Confidence Score: 5/5

The pull request appears safe to merge with no actionable defects identified.

The markup and stylesheet changes consistently establish a shared responsive grid, supported wrapping behavior, logical RTL spacing, and a reachable narrow-container fallback without altering preference state or event handling.

Important Files Changed

Filename	Overview
src/renderer/src/assets/main.css	Introduces the shared grid, wrapping controls, logical properties, and narrow-container fallback without an identified defect.
src/renderer/src/components/settings/AppearancePane.tsx	Adds consistent control wrappers to each preference row while preserving existing interaction behavior.
src/renderer/src/components/settings/AppearancePane.test.tsx	Adds focused markup and real-stylesheet contract coverage for translated, RTL, and narrow layouts.
lat.md/sidebar-navigation.md	Documents the new Appearance layout contract and its translation and RTL requirements.

_{Reviews (1): Last reviewed commit: "fix: align settings preferences across l..." | Re-trigger Greptile}