Files
windmill/frontend/src/lib/editorFontSize.svelte.ts
T
GuilhemandClaude Opus 4.7 de76668c10 fix(frontend): align Monaco editor font size with text-xs (#9161)
* fix(frontend): align Monaco editor font size with text-xs across viewports

* fix(frontend): make placeholder lineHeight reactive to fontSize

* fix(frontend): align GraphQL schema viewer font size with text-xs

The read-only GraphQL schema viewer was the lone Monaco instance still
inheriting Monaco's 14px default. Wire it through editorFontSize like
the other editors so it stays in sync with text-xs across viewports.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
2026-06-01 23:29:19 +00:00

26 lines
715 B
TypeScript

// Reactive Monaco font sizes that follow the global `:root` font-size
// breakpoint set in `frontend/src/lib/assets/app.css` (18px at ≥1760px).
// The values mirror Tailwind's `text-xs` (0.75rem) computed pixel size so
// editors visually match the surrounding UI.
const LARGE_VIEWPORT_QUERY = '(min-width: 1760px)'
let isLargeViewport = $state(false)
if (typeof window !== 'undefined') {
const mq = window.matchMedia(LARGE_VIEWPORT_QUERY)
isLargeViewport = mq.matches
mq.addEventListener('change', (e) => {
isLargeViewport = e.matches
})
}
export const editorFontSize = {
get regular(): number {
return isLargeViewport ? 13.5 : 12
},
get small(): number {
return isLargeViewport ? 12 : 11
}
}