fixed alert formatting when in gui standalone; made alert button sizing more flexible and smart

src/components/alerts/alert.css

@@ -72,6 +72,7 @@
 
 .alert-connection-button {
     min-height: 2rem;
+    width: 6.5rem;
     padding: 0.55rem 0.9rem;
     border-radius: 0.35rem;
     background: #FF8C1A;
@@ -81,8 +82,9 @@
     border: none;
     cursor: pointer;
     display: flex;
+    justify-content: center;
     align-items: center;
-    align-self: center;
+    align-self: stretch;
     outline-style:none;
 }
 
@@ -93,3 +95,9 @@
 [dir="rtl"] .alert-connection-button {
     margin-left: 13px;
 }
+
+/* prevent last button in list from too much margin to edge of alert */
+.alert-buttons > :last-child {
+    margin-left: 0;
+    margin-right: 0;
+}

src/components/alerts/alert.jsx

@@ -9,7 +9,6 @@ import Spinner from '../spinner/spinner.jsx';
 import {AlertLevels} from '../../lib/alerts/index.jsx';
 
 import styles from './alert.css';
-import spinnerStyles from '../spinner/spinner.css';
 
 const closeButtonColors = {
     [AlertLevels.SUCCESS]: CloseButton.COLOR_GREEN,
@@ -35,20 +34,22 @@ const AlertComponent = ({
         className={classNames(styles.alert, styles[level])}
     >
         {/* TODO: implement Rtl handling */}
-        <div className={styles.iconSection}>
-            {iconSpinner && (
-                <Spinner
-                    className={styles.alertSpinner}
-                    level={level}
-                />
-            )}
-            {iconURL && (
-                <img
-                    className={styles.alertIcon}
-                    src={iconURL}
-                />
-            )}
-        </div>
+        {(iconSpinner || iconURL) && (
+            <div className={styles.iconSection}>
+                {iconSpinner && (
+                    <Spinner
+                        className={styles.alertSpinner}
+                        level={level}
+                    />
+                )}
+                {iconURL && (
+                    <img
+                        className={styles.alertIcon}
+                        src={iconURL}
+                    />
+                )}
+            </div>
+        )}
         <div className={styles.alertMessage}>
             {extensionName ? (
                 <FormattedMessage

src/components/alerts/alerts.css

 .alerts-inner-container {
     min-width: 200px;
-    max-width: 448px;
+    max-width: 548px;
 }

src/components/spinner/spinner.css

@@ -9,6 +9,7 @@
     border-width: .1875rem;
     border-style: solid;
     border-color: $ui-white-transparent;
+    box-sizing: content-box;
 }
 
 .spinner::before, .spinner::after {