Truncate long server names on login/register screen (#7702)

Co-authored-by: Aaron Raimist <aaron@raim.ist>

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 {

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>;