From 0e770d81d6e1dc15cef3c2254274e52a2e81a576 Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Tue, 29 Sep 2020 09:32:26 +0100
Subject: [PATCH] Fix identifier wrapping

Fixes https://github.com/matrix-org/matrix.to/issues/153
---
 src/clients/Nheko.tsx                | 10 ++++++++--
 src/clients/Weechat.tsx              | 10 ++++++++--
 src/components/CreateLinkTile.scss   |  4 ----
 src/components/CreateLinkTile.tsx    |  2 +-
 src/components/DefaultPreview.scss   |  4 ----
 src/components/DefaultPreview.tsx    |  2 +-
 src/components/HomeserverOptions.tsx |  7 ++++++-
 src/components/InviteTile.tsx        |  2 +-
 src/components/LinkPreview.tsx       |  7 ++++++-
 src/components/RoomPreview.tsx       |  6 ++++--
 src/components/UserPreview.tsx       |  9 ++++++---
 src/index.scss                       |  4 ++++
 12 files changed, 45 insertions(+), 22 deletions(-)

diff --git a/src/clients/Nheko.tsx b/src/clients/Nheko.tsx
index a0954d1..22f8045 100644
--- a/src/clients/Nheko.tsx
+++ b/src/clients/Nheko.tsx
@@ -40,7 +40,10 @@ const Nheko: TextClient = {
                     <span>
                         Type{' '}
                         <code>
-                            /join <b>{link.identifier}</b>
+                            /join{' '}
+                            <b className="matrixIdentifier">
+                                {link.identifier}
+                            </b>
                         </code>
                     </span>
                 );
@@ -49,7 +52,10 @@ const Nheko: TextClient = {
                     <span>
                         Type{' '}
                         <code>
-                            /invite <b>{link.identifier}</b>
+                            /invite{' '}
+                            <b className="matrixIdentifier">
+                                {link.identifier}
+                            </b>
                         </code>
                     </span>
                 );
diff --git a/src/clients/Weechat.tsx b/src/clients/Weechat.tsx
index cd15769..86b0a98 100644
--- a/src/clients/Weechat.tsx
+++ b/src/clients/Weechat.tsx
@@ -40,7 +40,10 @@ const Weechat: TextClient = {
                     <span>
                         Type{' '}
                         <code>
-                            /join <b>{link.identifier}</b>
+                            /join{' '}
+                            <b className="matrixIdentifier">
+                                {link.identifier}
+                            </b>
                         </code>
                     </span>
                 );
@@ -49,7 +52,10 @@ const Weechat: TextClient = {
                     <span>
                         Type{' '}
                         <code>
-                            /invite <b>{link.identifier}</b>
+                            /invite{' '}
+                            <b className="matrixIdentifier">
+                                {link.identifier}
+                            </b>
                         </code>
                     </span>
                 );
diff --git a/src/components/CreateLinkTile.scss b/src/components/CreateLinkTile.scss
index a377ae4..0fba4fc 100644
--- a/src/components/CreateLinkTile.scss
+++ b/src/components/CreateLinkTile.scss
@@ -35,10 +35,6 @@ limitations under the License.
         color: $foreground;
     }
 
-    .linkHeader h1 {
-        word-break: break-all;
-    }
-
     .createLinkReset {
         height: 40px;
         width: 40px;
diff --git a/src/components/CreateLinkTile.tsx b/src/components/CreateLinkTile.tsx
index 5c05c58..fbca6d9 100644
--- a/src/components/CreateLinkTile.tsx
+++ b/src/components/CreateLinkTile.tsx
@@ -128,7 +128,7 @@ const LinkCreatedTile: React.FC<ILinkCreatedTileProps> = (props) => {
                 <div>New link</div>
                 <img src={refreshIcon} alt="Go back to matrix.to home page" />
             </button>
-            <h1 className="linkHeader">{props.link}</h1>
+            <h1 className="linkHeader matrixIdentifier">{props.link}</h1>
             <Button
                 flashChildren={'Copied'}
                 icon={copyIcon}
diff --git a/src/components/DefaultPreview.scss b/src/components/DefaultPreview.scss
index 48e404c..21b77bb 100644
--- a/src/components/DefaultPreview.scss
+++ b/src/components/DefaultPreview.scss
@@ -19,8 +19,4 @@ limitations under the License.
         border-radius: 0;
         border: 0;
     }
-
-    h1 {
-        word-break: break-all;
-    }
 }
diff --git a/src/components/DefaultPreview.tsx b/src/components/DefaultPreview.tsx
index 894bbf8..00f4b91 100644
--- a/src/components/DefaultPreview.tsx
+++ b/src/components/DefaultPreview.tsx
@@ -34,7 +34,7 @@ const DefaultPreview: React.FC<IProps> = ({ link }: IProps) => {
                 avatarUrl={genericRoomPreview}
                 label={`Generic icon representing ${link.identifier}`}
             />
-            <h1>{link.identifier}</h1>
+            <h1 className="matrixIdentifier">{link.identifier}</h1>
         </div>
     );
 };
diff --git a/src/components/HomeserverOptions.tsx b/src/components/HomeserverOptions.tsx
index ab30a3c..750b1c0 100644
--- a/src/components/HomeserverOptions.tsx
+++ b/src/components/HomeserverOptions.tsx
@@ -91,7 +91,12 @@ const HomeserverOptions: React.FC<IProps> = ({ link }: IProps) => {
         <Tile className="homeserverOptions">
             <div className="homeserverOptionsDescription">
                 <div>
-                    <h3>About {link.identifier}</h3>
+                    <h3>
+                        About&nbsp;
+                        <span className="matrixIdentifier">
+                            {link.identifier}
+                        </span>
+                    </h3>
                     <p>
                         A homeserver will show you metadata about the link, like
                         a description. Homeservers will be able to relate your
diff --git a/src/components/InviteTile.tsx b/src/components/InviteTile.tsx
index 269e47e..da331f2 100644
--- a/src/components/InviteTile.tsx
+++ b/src/components/InviteTile.tsx
@@ -53,7 +53,7 @@ const InviteTile: React.FC<IProps> = ({ children, client, link }: IProps) => {
                         Accept invite
                     </LinkButton>
                 );
-                inviteUseString = `Accepting will open ${link.identifier} in ${client.name}.`;
+                inviteUseString = `Accepting will open this link in ${client.name}.`;
                 break;
             case ClientKind.TEXT_CLIENT:
                 // TODO: copy to clipboard
diff --git a/src/components/LinkPreview.tsx b/src/components/LinkPreview.tsx
index dec14e8..37557e7 100644
--- a/src/components/LinkPreview.tsx
+++ b/src/components/LinkPreview.tsx
@@ -137,7 +137,12 @@ const LinkPreview: React.FC<IProps> = ({ link }: IProps) => {
                     checked={showHSOptions}
                     onChange={(): void => setShowHSOPtions(!showHSOptions)}
                 >
-                    About {link.identifier}
+                    <span>
+                        About&nbsp;
+                        <span className="matrixIdentifier">
+                            {link.identifier}
+                        </span>
+                    </span>
                 </Toggle>
             </>
         );
diff --git a/src/components/RoomPreview.tsx b/src/components/RoomPreview.tsx
index 0ef2f14..620874a 100644
--- a/src/components/RoomPreview.tsx
+++ b/src/components/RoomPreview.tsx
@@ -38,9 +38,11 @@ const RoomPreview: React.FC<IProps> = ({ room }: IProps) => {
     return (
         <div className="roomPreview">
             <RoomAvatar room={room} />
-            <h1>{room.name ? room.name : roomAlias}</h1>
+            <h1 className="matrixIdentifier">
+                {room.name ? room.name : roomAlias}
+            </h1>
             {members}
-            <p>{roomAlias}</p>
+            <p className="matrixIdentifier">{roomAlias}</p>
         </div>
     );
 };
diff --git a/src/components/UserPreview.tsx b/src/components/UserPreview.tsx
index 6122977..7cfda27 100644
--- a/src/components/UserPreview.tsx
+++ b/src/components/UserPreview.tsx
@@ -67,9 +67,12 @@ export const InviterPreview: React.FC<InviterPreviewProps> = ({
         <div className={className}>
             <div>
                 <h1>
-                    Invited by <b>{user ? user.displayname : userId}</b>
+                    Invited by{' '}
+                    <b className="matrixIdentifier">
+                        {user ? user.displayname : userId}
+                    </b>
                 </h1>
-                {user ? <p>{userId}</p> : null}
+                {user ? <p className="matrixIdentifier">{userId}</p> : null}
             </div>
             {avatar}
         </div>
@@ -84,7 +87,7 @@ export const WrappedInviterPreview: React.FC<WrappedInviterProps> = ({
     link,
 }: WrappedInviterProps) => {
     const [user, setUser] = useState<User | undefined>(undefined);
-    const hss = useHSs({link});
+    const hss = useHSs({ link });
     useEffect(() => {
         if (hss.length) {
             client(hss[0])
diff --git a/src/index.scss b/src/index.scss
index c1ed963..a628c94 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -64,3 +64,7 @@ hr {
     border: 1px solid lighten($grey, 50);
     margin: 0 40px;
 }
+
+.matrixIdentifier {
+    word-break: break-all;
+}