From 78373e86ea6deba0ad251b9bf1708d2ee8ac5f29 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 4 Feb 2022 10:20:20 +0000
Subject: [PATCH] Truncate long server names on login/register screen (#7702)

Co-authored-by: Aaron Raimist <aaron@raim.ist>
---
 res/css/views/elements/_ServerPicker.scss      | 3 +++
 src/components/views/elements/ServerPicker.tsx | 4 +++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/res/css/views/elements/_ServerPicker.scss b/res/css/views/elements/_ServerPicker.scss
index b871c2cdf3..e5a979d0af 100644
--- a/res/css/views/elements/_ServerPicker.scss
+++ b/res/css/views/elements/_ServerPicker.scss
@@ -62,6 +62,9 @@ limitations under the License.
         color: $authpage-primary-color;
         grid-column: 1;
         grid-row: 2;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        margin-right: 8px;
     }
 
     .mx_ServerPicker_change {
diff --git a/src/components/views/elements/ServerPicker.tsx b/src/components/views/elements/ServerPicker.tsx
index 51b18ac6c2..8921dfe19b 100644
--- a/src/components/views/elements/ServerPicker.tsx
+++ b/src/components/views/elements/ServerPicker.tsx
@@ -86,7 +86,9 @@ const ServerPicker = ({ title, dialogTitle, serverConfig, onServerConfigChange }
     return <div className="mx_ServerPicker">
         <h3>{ title || _t("Homeserver") }</h3>
         { !disableCustomUrls ? <AccessibleButton className="mx_ServerPicker_help" onClick={onHelpClick} /> : null }
-        <span className="mx_ServerPicker_server">{ serverName }</span>
+        <span className="mx_ServerPicker_server" title={typeof serverName === "string" ? serverName : undefined}>
+            { serverName }
+        </span>
         { editBtn }
         { desc }
     </div>;