From 02ccdcb802fecff01d103984f9e1765d3e8eace4 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens <joriksch@gmail.com>
Date: Mon, 15 Jun 2020 17:42:30 +0100
Subject: [PATCH] Fix field width and add tooltip

---
 .../settings/tabs/user/_AppearanceUserSettingsTab.scss    | 7 +++++--
 src/components/views/elements/Field.tsx                   | 8 +++++---
 .../settings/tabs/user/AppearanceUserSettingsTab.tsx      | 1 +
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
index 311a6b7c41..ce99b85d35 100644
--- a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
+++ b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
@@ -14,11 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_AppearanceUserSettingsTab_fontSlider,
-.mx_AppearanceUserSettingsTab .mx_Field {
+.mx_AppearanceUserSettingsTab_fontSlider {
     @mixin mx_Settings_fullWidthField;
 }
 
+.mx_AppearanceUserSettingsTab .mx_Field {
+    width: 256px;
+}
+
 .mx_AppearanceUserSettingsTab_fontSlider {
     display: flex;
     flex-direction: row;
diff --git a/src/components/views/elements/Field.tsx b/src/components/views/elements/Field.tsx
index 771d2182ea..4d60550e02 100644
--- a/src/components/views/elements/Field.tsx
+++ b/src/components/views/elements/Field.tsx
@@ -60,6 +60,8 @@ interface IProps extends React.InputHTMLAttributes<HTMLSelectElement | HTMLInput
     // If specified, contents will appear as a tooltip on the element and
     // validation feedback tooltips will be suppressed.
     tooltipContent?: React.ReactNode,
+    // If specified the tooltip will be shown regardless of feedback
+    forceTooltipVisible?: boolean,
     // If specified alongside tooltipContent, the class name to apply to the
     // tooltip itself.
     tooltipClassName?: string,
@@ -226,10 +228,10 @@ export default class Field extends React.PureComponent<IProps, IState> {
         const Tooltip = sdk.getComponent("elements.Tooltip");
         let fieldTooltip;
         if (tooltipContent || this.state.feedback) {
-            const addlClassName = tooltipClassName ? tooltipClassName : '';
+            const addClassName = tooltipClassName ? tooltipClassName : '';
             fieldTooltip = <Tooltip
-                tooltipClassName={`mx_Field_tooltip ${addlClassName}`}
-                visible={this.state.feedbackVisible}
+                tooltipClassName={`mx_Field_tooltip ${addClassName}`}
+                visible={(this.state.focused && this.props.forceTooltipVisible) || this.state.feedbackVisible}
                 label={tooltipContent || this.state.feedback}
             />;
         }
diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
index 6c70e89e28..3259c74ff4 100644
--- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
@@ -354,6 +354,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
                         SettingsStore.setValue("systemFont", null, SettingLevel.DEVICE, value.target.value);
                     }}
                     tooltipContent="Set the name of a font installed on your system & Riot will attempt to use it."
+                    forceTooltipVisible={true}
                     disabled={!this.state.useSystemFont}
                     value={this.state.systemFont}
                 />