diff --git a/src/components/alerts/alert.css b/src/components/alerts/alert.css
index 938d04b61..87c0ca4c7 100644
--- a/src/components/alerts/alert.css
+++ b/src/components/alerts/alert.css
@@ -55,7 +55,7 @@
     align-self: center;
 }
 
-.connection-button {
+.alert-connection-button {
     min-height: 2rem;
     padding: 0.55rem 0.9rem;
     border-radius: 0.35rem;
@@ -68,6 +68,13 @@
     display: flex;
     align-items: center;
     align-self: center;
-    margin-right: 13px;
     outline-style:none;
 }
+
+[dir="ltr"] .alert-connection-button {
+    margin-right: 13px;
+}
+
+[dir="rtl"] .alert-connection-button {
+    margin-left: 13px;
+}
diff --git a/src/components/alerts/alert.jsx b/src/components/alerts/alert.jsx
index e38816723..facbc2303 100644
--- a/src/components/alerts/alert.jsx
+++ b/src/components/alerts/alert.jsx
@@ -42,7 +42,7 @@ const AlertComponent = ({
         <div className={styles.alertMessage}>
             {extensionName ? (
                 <FormattedMessage
-                    defaultMessage="Scratch lost connection to {extensionName}"
+                    defaultMessage="Scratch lost connection to {extensionName}."
                     description="Message indicating that an extension peripheral has been disconnected"
                     id="gui.alerts.lostPeripheralConnection"
                     values={{
@@ -55,7 +55,7 @@ const AlertComponent = ({
         </div>
         {showReconnect && (
             <button
-                className={styles.connectionButton}
+                className={styles.alertConnectionButton}
                 onClick={onReconnect}
             >
                 <FormattedMessage