From 6c692a7e950436adbc4c4821019a4de376455bcd Mon Sep 17 00:00:00 2001
From: David Lechner <david@pybricks.com>
Date: Tue, 8 Jun 2021 14:23:13 -0500
Subject: [PATCH] fix wrapping on external link buttons

---
 src/about/AboutDialog.tsx       | 4 ++--
 src/settings/SettingsDrawer.tsx | 4 ----
 src/utils/ExternalLinkIcon.tsx  | 9 ++++++---
 src/utils/external-link.scss    | 4 ++++
 4 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/about/AboutDialog.tsx b/src/about/AboutDialog.tsx
index c120b016..ed60bc38 100644
--- a/src/about/AboutDialog.tsx
+++ b/src/about/AboutDialog.tsx
@@ -59,11 +59,11 @@ class AboutDialog extends React.Component<AboutDialogProps> {
                             {i18n.translate(AboutStringId.LicenseButtonLabel)}
                         </Button>
                         <AnchorButton href={changelogUrl} target="blank_">
-                            {i18n.translate(AboutStringId.ChangelogButtonLabel)}&nbsp;
+                            {i18n.translate(AboutStringId.ChangelogButtonLabel)}
                             <ExternalLinkIcon />
                         </AnchorButton>
                         <AnchorButton href={pybricksWebsiteUrl} target="blank_">
-                            {i18n.translate(AboutStringId.WebsiteButtonLabel)}&nbsp;
+                            {i18n.translate(AboutStringId.WebsiteButtonLabel)}
                             <ExternalLinkIcon />
                         </AnchorButton>
                     </div>
diff --git a/src/settings/SettingsDrawer.tsx b/src/settings/SettingsDrawer.tsx
index 289c766c..b668d03f 100644
--- a/src/settings/SettingsDrawer.tsx
+++ b/src/settings/SettingsDrawer.tsx
@@ -193,7 +193,6 @@ class SettingsDrawer extends React.PureComponent<SettingsProps> {
                                     target="blank_"
                                 >
                                     {i18n.translate(SettingsStringId.HelpProjectsLabel)}
-                                    &nbsp;
                                     <ExternalLinkIcon />
                                 </AnchorButton>
                                 <AnchorButton
@@ -202,7 +201,6 @@ class SettingsDrawer extends React.PureComponent<SettingsProps> {
                                     target="blank_"
                                 >
                                     {i18n.translate(SettingsStringId.HelpSupportLabel)}
-                                    &nbsp;
                                     <ExternalLinkIcon />
                                 </AnchorButton>
                                 <AnchorButton
@@ -211,7 +209,6 @@ class SettingsDrawer extends React.PureComponent<SettingsProps> {
                                     target="blank_"
                                 >
                                     {i18n.translate(SettingsStringId.HelpChatLabel)}
-                                    &nbsp;
                                     <ExternalLinkIcon />
                                 </AnchorButton>
                                 <AnchorButton
@@ -220,7 +217,6 @@ class SettingsDrawer extends React.PureComponent<SettingsProps> {
                                     target="blank_"
                                 >
                                     {i18n.translate(SettingsStringId.HelpBugsLabel)}
-                                    &nbsp;
                                     <ExternalLinkIcon />
                                 </AnchorButton>
                                 <AboutDialog
diff --git a/src/utils/ExternalLinkIcon.tsx b/src/utils/ExternalLinkIcon.tsx
index 810b968a..3bdba6b5 100644
--- a/src/utils/ExternalLinkIcon.tsx
+++ b/src/utils/ExternalLinkIcon.tsx
@@ -11,9 +11,12 @@ import './external-link.scss';
 class ExternalLinkIcon extends React.Component {
     render(): JSX.Element {
         return (
-            <sup className="pb-external-link">
-                <Icon icon="share" iconSize={12} />
-            </sup>
+            <span className="pb-external-link">
+                {' '}
+                <sup>
+                    <Icon icon="share" iconSize={12} />
+                </sup>
+            </span>
         );
     }
 }
diff --git a/src/utils/external-link.scss b/src/utils/external-link.scss
index fb81f8d9..8da43998 100644
--- a/src/utils/external-link.scss
+++ b/src/utils/external-link.scss
@@ -3,6 +3,10 @@
 
 @import '../variables.scss';
 
+span.pb-external-link {
+    white-space: nowrap;
+}
+
 // override some button magic in case this is used in a button
 .#{$ns}-button .pb-external-link .#{$ns}-icon:first-child:last-child {
     margin: 0;