Do not show title on offline banner + add margin

web/components/ui/Content/Content.tsx

@@ -344,6 +344,7 @@ export const Content: FC = () => {
               )}
               {!online && !appState.appLoading && (
                 <OfflineBanner
+                  showsHeader={false}
                   streamName={name}
                   customText={offlineMessage}
                   notificationsEnabled={browserNotificationsEnabled}

web/components/ui/OfflineBanner/OfflineBanner.module.scss

@@ -9,15 +9,15 @@
   flex-direction: column;
   color: var(--theme-color-components-text-on-light);
   background-color: var(--theme-color-background-main);
-  margin: 1rem auto;
+  margin: 3rem auto;
   border-radius: var(--theme-rounded-corners);
-  padding: 1rem;
+  padding: 2.5em;
   font-size: 1.2rem;
   border: 1px solid lightgray;
 }
 
 .bodyText {
-  line-height: 1.5rem;
+  line-height: 2rem;
 }
 
 .separator {

web/components/ui/OfflineBanner/OfflineBanner.tsx

@@ -17,6 +17,7 @@ export type OfflineBannerProps = {
   lastLive?: Date;
   notificationsEnabled: boolean;
   fediverseAccount?: string;
+  showsHeader?: boolean;
   onNotifyClick?: () => void;
   onFollowClick?: () => void;
 };
@@ -27,6 +28,7 @@ export const OfflineBanner: FC<OfflineBannerProps> = ({
   lastLive,
   notificationsEnabled,
   fediverseAccount,
+  showsHeader = true,
   onNotifyClick,
   onFollowClick,
 }) => {
@@ -74,8 +76,12 @@ export const OfflineBanner: FC<OfflineBannerProps> = ({
   return (
     <div id="offline-banner" className={styles.outerContainer}>
       <div className={styles.innerContainer}>
-        <div className={styles.header}>{streamName}</div>
-        <Divider className={styles.separator} />
+        {showsHeader && (
+          <>
+            <div className={styles.header}>{streamName}</div>
+            <Divider className={styles.separator} />
+          </>
+        )}
         <div className={styles.bodyText}>{text}</div>
         {lastLive && (
           <div className={styles.lastLiveDate}>