Fix identifier wrapping

Fixes https://github.com/matrix-org/matrix.to/issues/153

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

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

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;

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}

src/components/DefaultPreview.scss

@@ -19,8 +19,4 @@ limitations under the License.
         border-radius: 0;
         border: 0;
     }
-
-    h1 {
-        word-break: break-all;
-    }
 }

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

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

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

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

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

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>

src/index.scss

@@ -64,3 +64,7 @@ hr {
     border: 1px solid lighten($grey, 50);
     margin: 0 40px;
 }
+
+.matrixIdentifier {
+    word-break: break-all;
+}