diff --git a/res/css/views/elements/_ServerPicker.scss b/res/css/views/elements/_ServerPicker.scss
index b871c2cdf3a..850a1625965 100644
--- a/res/css/views/elements/_ServerPicker.scss
+++ b/res/css/views/elements/_ServerPicker.scss
@@ -62,6 +62,8 @@ limitations under the License.
         color: $authpage-primary-color;
         grid-column: 1;
         grid-row: 2;
+        overflow: hidden;
+        text-overflow: ellipsis;
     }
 
     .mx_ServerPicker_change {
diff --git a/src/components/views/elements/ServerPicker.tsx b/src/components/views/elements/ServerPicker.tsx
index 51b18ac6c2b..2f23525716d 100644
--- a/src/components/views/elements/ServerPicker.tsx
+++ b/src/components/views/elements/ServerPicker.tsx
@@ -69,12 +69,11 @@ const ServerPicker = ({ title, dialogTitle, serverConfig, onServerConfigChange }
         </AccessibleButton>;
     }
 
-    let serverName: React.ReactNode = serverConfig.isNameResolvable ? serverConfig.hsName : serverConfig.hsUrl;
-    if (serverConfig.hsNameIsDifferent) {
-        serverName = <TextWithTooltip class="mx_Login_underlinedServerName" tooltip={serverConfig.hsUrl}>
-            { serverConfig.hsName }
-        </TextWithTooltip>;
-    }
+    const serverName: JSX.Element = <TextWithTooltip
+        class={serverConfig.hsNameIsDifferent ? "mx_Login_underlinedServerName" : ""}
+        tooltip={serverConfig.hsUrl}>
+        { serverConfig.hsName }
+    </TextWithTooltip>;
 
     let desc;
     if (serverConfig.hsName === "matrix.org") {