fix: ensure switch scaling overrides apply

[zerob13]

Summary

• add a global font scale variable that maps to the existing font size classes on the root element
• override the shadcn switch track and thumb dimensions so they stay visually consistent regardless of font scaling by defining the rules in the utilities layer so they win over Tailwind dimension classes

Testing

• pnpm run typecheck

---

https://chatgpt.com/codex/tasks/task_e_68edbae39db4832cacbe0cde43c970e6

Summary by CodeRabbit

• New Features
  • Introduced a global typography scale with size presets (sm, base, lg, xl, 2xl) to adjust overall font sizing.
  • Added utility styles so switch controls (including the thumb) scale proportionally with the selected typography size.
• Style
  • Centralized switch sizing under a utilities layer for more consistent layout across themes without changing colors or behavior.

[coderabbitai]

Walkthrough

Adds a root CSS variable (--dc-font-scale) and html font-size classes that set it. Introduces utility-layer sizing rules for switch components ([data-slot='switch'] and [data-slot='switch-thumb']) that scale with --dc-font-scale. Dark theme selectors remain, with font-scale available for downstream use.

Changes

Cohort / File(s)	Summary
Renderer CSS: font scale and switch utilities src/renderer/src/assets/style.css	Defines --dc-font-scale in :root. Adds html.text-* classes to adjust the scale. Extends @layer utilities with responsive sizing for [data-slot='switch'] and [data-slot='switch-thumb'] based on the scale. Preserves existing theme selectors (.dark, [data-theme='dark']).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• fix: sync font size changes across all tabs in real-time #786 — Implements runtime font-size events and fontSizeClass updates that would toggle the new html.text-* classes and leverage --dc-font-scale.

Poem

I tweaked the knobs of type, so neat,
A scale for fonts—now small to fleet.
The switches grew to match the tune,
Their thumbs in step, like crescent moon.
In dark or light, I hop with pride—
CSS in stride, I bound, I glide. 🐇✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title clearly describes the primary change—addressing the application of switch scaling overrides—which aligns with the PR’s addition of CSS utility rules for switch dimensions and font scaling. It is concise, accurate, and directly highlights the main fix without extraneous detail.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch codex/fix-toggle-switch-visual-distortion

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2e974c4 and 5580987.

📒 Files selected for processing (1)

• src/renderer/src/assets/style.css (3 hunks)

🧰 Additional context used

📓 Path-based instructions (2)

src/renderer/src/**/*

📄 CodeRabbit inference engine (.cursor/rules/i18n.mdc)

src/renderer/src/**/*: All user-facing strings must use i18n keys (avoid hardcoded user-visible text in code)
Use the 'vue-i18n' framework for all internationalization in the renderer
Ensure all user-visible text in the renderer uses the translation system

Files:

• src/renderer/src/assets/style.css

src/renderer/src/**

📄 CodeRabbit inference engine (AGENTS.md)

Put application code for the Vue app under src/renderer/src (components, stores, views, i18n, lib)

Files:

• src/renderer/src/assets/style.css

🧠 Learnings (1)

📚 Learning: 2025-08-28T08:07:05.182Z

Learnt from: neoragex2002
PR: ThinkInAIXYZ/deepchat#807
File: src/renderer/src/components/markdown/MarkdownRenderer.vue:58-58
Timestamp: 2025-08-28T08:07:05.182Z
Learning: In src/renderer/src/components/markdown/MarkdownRenderer.vue, the unscoped <style> tag is intentionally used for global prose styles and the anchor .markdown-renderer fix, as confirmed by user neoragex2002.

Applied to files:

• src/renderer/src/assets/style.css

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: build-check (x64)

🔇 Additional comments (1)

src/renderer/src/assets/style.css (1)

151-173: Confirm font-scale coverage for all root text classes

We only assign --dc-font-scale for text-sm through text-2xl. If the root ever uses text-xs, text-3xl, or any arbitrary size (common for accessibility toggles), the variable stays at 1, so the switch dimensions will drift again under those modes. Please confirm those other sizes can’t occur, or extend this mapping (or provide a fallback) so every supported scale keeps the switches stable.

---

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 and usage tips.}

[zerob13]

fix #994