From 9cb55970d3ab2a35b0cd8f377f53ede134fe2111 Mon Sep 17 00:00:00 2001
From: Half-Shot <will@half-shot.uk>
Date: Fri, 14 Feb 2025 17:26:11 +0000
Subject: [PATCH] Refactor Apperance advanced features to not rely on tooltips.

---
 .../settings/tabs/user/_AppearanceUserSettingsTab.pcss    | 4 ++--
 .../settings/tabs/user/AppearanceUserSettingsTab.tsx      | 8 +-------
 src/settings/Settings.tsx                                 | 4 ++++
 3 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.pcss b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.pcss
index dd899389ef..adc55b58f6 100644
--- a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.pcss
+++ b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.pcss
@@ -8,6 +8,6 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_Field.mx_AppearanceUserSettingsTab_checkboxControlledField {
     width: 256px;
-    /* matches checkbox box + padding to align with checkbox label */
-    margin-inline-start: calc($font-16px + 10px);
+    /* Line up with Settings field toggle button */
+    margin-inline-start: 0;
 }
diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
index 7d46cf72da..5626356382 100644
--- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
@@ -48,7 +48,6 @@ export default class AppearanceUserSettingsTab extends React.Component<EmptyObje
     private renderAdvancedSection(): ReactNode {
         if (!SettingsStore.getValue(UIFeature.AdvancedSettings)) return null;
 
-        const brand = SdkConfig.get().brand;
         const toggle = (
             <AccessibleButton
                 kind="link"
@@ -62,21 +61,18 @@ export default class AppearanceUserSettingsTab extends React.Component<EmptyObje
         let advanced: React.ReactNode;
 
         if (this.state.showAdvanced) {
-            const tooltipContent = _t("settings|appearance|custom_font_description", { brand });
             advanced = (
                 <>
-                    <SettingsFlag name="useCompactLayout" level={SettingLevel.DEVICE} useCheckbox={true} />
+                    <SettingsFlag name="useCompactLayout" level={SettingLevel.DEVICE} />
 
                     <SettingsFlag
                         name="useBundledEmojiFont"
                         level={SettingLevel.DEVICE}
-                        useCheckbox={true}
                         onChange={(checked) => this.setState({ useBundledEmojiFont: checked })}
                     />
                     <SettingsFlag
                         name="useSystemFont"
                         level={SettingLevel.DEVICE}
-                        useCheckbox={true}
                         onChange={(checked) => this.setState({ useSystemFont: checked })}
                     />
                     <Field
@@ -89,8 +85,6 @@ export default class AppearanceUserSettingsTab extends React.Component<EmptyObje
 
                             SettingsStore.setValue("systemFont", null, SettingLevel.DEVICE, value.target.value);
                         }}
-                        tooltipContent={tooltipContent}
-                        forceTooltipVisible={true}
                         disabled={!this.state.useSystemFont}
                         value={this.state.systemFont}
                     />
diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx
index 439b0c112f..78348755d3 100644
--- a/src/settings/Settings.tsx
+++ b/src/settings/Settings.tsx
@@ -905,6 +905,10 @@ export const SETTINGS: Settings = {
         supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS,
         default: false,
         displayName: _td("settings|appearance|custom_font"),
+        description: () =>
+            _t("settings|appearance|custom_font_description", {
+                brand: SdkConfig.get().brand,
+            }),
         controller: new SystemFontController(),
     },
     "systemFont": {