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

Co-authored-by: Aaron Raimist <[email protected]>
matrix-org · Feb 4, 2022 · 78373e8 · 78373e8
1 parent 2e19f81
commit 78373e8
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git 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
@@ -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>;