Fix error message styling consistency in browser notification modal (#4418)

* Initial plan

* Update BrowserNotifyModal to use Alert component for error styling consistency

Co-authored-by: gabek <414923+gabek@users.noreply.github.com>

* chore: update copilot instructions

* chore: update copilot instructions

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: gabek <414923+gabek@users.noreply.github.com>
Co-authored-by: Gabe Kangas <gabek@real-ity.com>

web/components/modals/BrowserNotifyModal/BrowserNotifyModal.module.scss

@@ -2,6 +2,20 @@
   margin-bottom: 5px;
 }
 
+.errorAlert {
+  margin-bottom: 1.25rem;
+  font-family: var(--theme-text-display-font-family);
+
+  :global(.ant-alert-message) {
+    font-size: 14px;
+  }
+
+  :global(.ant-alert-description) {
+    font-size: 12px;
+    font-family: monospace;
+  }
+}
+
 .pushPreview {
   border-style: dashed;
   border-width: 2px;

web/components/modals/BrowserNotifyModal/BrowserNotifyModal.tsx

@@ -1,4 +1,4 @@
-import { Row, Spin, Typography, Button } from 'antd';
+import { Row, Spin, Typography, Button, Alert } from 'antd';
 import React, { FC, useState } from 'react';
 import UploadOutlined from '@ant-design/icons/lib/icons/UploadOutlined';
 import PlusSquareOutlined from '@ant-design/icons/lib/icons/PlusSquareOutlined';
@@ -189,7 +189,18 @@ export const BrowserNotifyModal = () => {
               about Owncast browser notifications.
           </span>
         </Row>
-        <Row>{error}</Row>
+        <Row>
+          {error && (
+            <Alert
+              message="Browser Notification Error"
+              description={error}
+              type="error"
+              closable
+              className={styles.errorAlert}
+              onClose={() => setError(null)}
+            />
+          )}
+        </Row>
         <PermissionPopupPreview start={() => startBrowserPushRegistration()} />
       </Spin>
     </ErrorBoundary>