From 52eed40fc891c2892f34e70cfc369a7acab8768b Mon Sep 17 00:00:00 2001
From: Vadim Lazuk <vadim.lazuk@mail.ru>
Date: Fri, 6 Nov 2026 18:14:06 +0300
Subject: [PATCH] fix(settings): align fallback font and size fields on the
 Appearance page (#1782)

The custom font block laid its three fields out as inline flex options that
wrapped freely, so the UI font picker, the fallback font picker and the Size
input started at different x positions depending on what preceded them on
their wrapped line. The block is now a two-column grid: the Use custom font
checkbox, the Fallback font label and the Size label share one label column,
and all three controls start at the same x, matching the Editor > Font page
and IntelliJ's Settings > Appearance layout.

The change is scoped to the Appearance page's own CSS module; no shared form
styles are touched.

Signed-off-by: Inf1mum <vadim.lazuk@mail.ru>
---
 .../settings/pages/Behavior.module.css        | 29 ++++++++++++++-----
 src/features/settings/pages/behavior.tsx      | 24 ++++++++-------
 2 files changed, 35 insertions(+), 18 deletions(-)

diff --git a/src/features/settings/pages/Behavior.module.css b/src/features/settings/pages/Behavior.module.css
index 616b9beb9..c9d19f0f5 100644
--- a/src/features/settings/pages/Behavior.module.css
+++ b/src/features/settings/pages/Behavior.module.css
@@ -37,17 +37,30 @@
 .fontInput {
   width: 220px;
 }
+/* Custom font block (IDEA Appearance): labels share one column, so the UI font,
+   fallback and Size controls all start at the same x. */
 .customFontRow {
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  align-items: start;
+  column-gap: 8px;
+  row-gap: 4px;
+  min-height: 28px;
+  padding: 2px 6px;
+  margin: 0 -6px;
+  border-radius: var(--radius-row);
 }
-.fontOption {
-  display: inline-flex;
+.customFontRow > .fontLabel {
+  padding-top: 3px;
+  white-space: nowrap;
+}
+.customFontRow > .fontCheck {
+  white-space: nowrap;
+}
+.fontControl {
+  display: flex;
   align-items: center;
-  gap: 8px;
-  max-width: 100%;
-}
-.fontOption > label {
-  flex-shrink: 0;
+  min-width: 0;
 }
 .sizeInput {
   width: 64px;
diff --git a/src/features/settings/pages/behavior.tsx b/src/features/settings/pages/behavior.tsx
index 09dddb15f..92d6b7400 100644
--- a/src/features/settings/pages/behavior.tsx
+++ b/src/features/settings/pages/behavior.tsx
@@ -237,16 +237,20 @@ function CustomFontRow() {
   const [size, setSize] = useSetting<number>("appearance.uiFontSize");
   const id = useId();
   const matched = useLabelMatch("Use custom font");
+  // Labels share one column (IDEA Appearance): the UI font, fallback and Size
+  // controls all start at the same x instead of drifting with flex wrapping.
   return (
-    <div className={clsx(styles.fontRow, styles.customFontRow, matched && styles.matched)}>
-      <span className={styles.fontOption}>
+    <div className={clsx(styles.customFontRow, matched && styles.matched)}>
+      <span className={styles.fontCheck}>
         <Checkbox checked={on} onChange={setOn} label={<SearchLabel text="Use custom font:" />} />
+      </span>
+      <span className={styles.fontControl}>
         <FontPicker label="UI font" disabled={!on} value={family} onChange={setFamily} />
       </span>
-      <span className={styles.fontOption}>
-        <label className={clsx(!on && styles.disabled)} htmlFor={`${id}-fallback`}>
-          <SearchLabel text="Fallback font:" />
-        </label>
+      <label className={clsx(styles.fontLabel, !on && styles.disabled)} htmlFor={`${id}-fallback`}>
+        <SearchLabel text="Fallback font:" />
+      </label>
+      <span className={styles.fontControl}>
         <FontPicker
           id={`${id}-fallback`}
           label="UI fallback font"
@@ -256,10 +260,10 @@ function CustomFontRow() {
           allowEmpty
         />
       </span>
-      <span className={styles.fontOption}>
-        <label className={clsx(!on && styles.disabled)} htmlFor={`${id}-size`}>
-          <SearchLabel text="Size:" />
-        </label>
+      <label className={clsx(styles.fontLabel, !on && styles.disabled)} htmlFor={`${id}-size`}>
+        <SearchLabel text="Size:" />
+      </label>
+      <span className={styles.fontControl}>
         {on ? (
           <NumberInput
             id={`${id}-size`}