embed screen style adjustments (#4063)

* restyle and relayout embed screen to account for smaller screen displays.
- address https://github.com/owncast/owncast/issues/3683 to address overflow issues
- address https://github.com/owncast/owncast/issues/4051 to move the name of the stream

* Javascript formatting autofixes

* clean up; restore package lock

* accommodate cases when there's no follow option; put follow form on one line, but wrap if need

* clean up

* separate out follow form into separate standalone component to be used in multiple places

* improve follow error styling; rm defaultProps for Modal to get rid of warning

* improve styling of follow form and components for legibility

* prettyify scss

* prettyify scss again

* one more time

* prettify ant file

* simplify layout, center everything

* just use gap

* tweak and lint

* lint, again

---------

Co-authored-by: Owncast <owncast@owncast.online>

web/components/ui/OfflineEmbed/OfflineEmbed.module.scss

@@ -1,6 +1,12 @@
 @import '../../../styles/mixins';
 
+$short-container-max-height: 480px;
+$short-container-min-height: 320px;
+$follow-modal-width: 300px;
+
 .offlineContainer {
+  --text-color: rgb(255 255 255 / 100%);
+
   position: absolute;
   width: 100%;
   height: 100%;
@@ -13,56 +19,108 @@
   align-items: center;
   justify-content: center;
   gap: 16px;
-  padding: 24px;
+  font-size: 16px;
+
+  @include screen(mobile) {
+    font-size: 12px;
+  }
+
+  @media (height <= $short-container-max-height) {
+    font-size: 12px;
+  }
 
   /* Content */
   .content {
+    color: var(--text-color);
     display: flex;
     flex-flow: column nowrap;
     align-items: center;
-    justify-content: center;
-    gap: 8px;
+    gap: 2rem;
     padding: 24px;
     text-align: center;
+    width: 100vw;
+    height: 100vh;
+    max-width: 1024px;
+    max-height: 576px;
+    justify-content: center;
+
+    .headerContainer {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      width: 100%;
+      margin: 0;
+      font-size: 1em;
+    }
+
+    .messageContainer {
+      width: 100%;
+
+      --description-height: auto;
+
+      @media (height <= $short-container-min-height) {
+        --description-height: 30vh;
+
+        margin: 0;
+      }
+
+      min-height: var(--description-height);
+
+      --gradient-mask: linear-gradient(to top, rgb(0 0 0 / 0%), rgb(0 0 0 / 100%) 17%);
+
+      overflow: hidden;
+      overflow-y: auto;
+      max-height: var(--description-height);
+      mask-image: var(--gradient-mask);
+      mask-repeat: repeat-x;
+      mask-size: auto var(--description-height);
+      mask-position: top;
+      padding-bottom: 0.5rem;
+    }
 
     /* Message */
     .message {
-      color: rgb(255 255 255 / 100%);
+      color: var(--text-color);
       font-family: var(--theme-text-body-font-family);
       font-style: normal;
-      font-size: 16px;
-      font-weight: 400;
+      font-size: 1em;
       line-height: 1.375;
       letter-spacing: 0;
       text-decoration: none;
       text-transform: none;
+      display: block;
+      margin: auto;
+
+      @include screen(desktop) {
+        width: 80%;
+      }
     }
 
     /* Heading */
-    .heading {
-      color: rgb(255 255 255 / 100%);
+    .offlineTitle {
+      color: var(--text-color);
       font-family: var(--theme-text-display-font-family);
       font-style: normal;
-      font-size: 24px;
-      font-weight: 500;
+      font-size: 1.375em;
+      font-weight: 600;
       line-height: 1.125;
       letter-spacing: -0.125px;
       text-decoration: none;
       text-transform: none;
+      margin: 0;
     }
 
     /* Page Logo */
     .pageLogo {
       position: relative;
-      width: 10vw;
-      height: 10vw;
-      min-height: 64px;
-      min-width: 64px;
+      min-height: 3em;
+      min-width: 3em;
       max-height: 100px;
       max-width: 100px;
       border-radius: 96px;
       background-color: rgb(255 255 255 / 100%);
-      border: 5px solid rgb(18 22 29 / 100%);
+      border: 2px solid rgb(18 22 29 / 100%);
       display: flex;
       flex-flow: row nowrap;
       align-items: flex-start;
@@ -73,26 +131,26 @@
       background-position: center;
     }
 
-    /* Page Name */
-    .pageName {
-      color: rgb(255 255 255 / 100%);
+    /* Stream Name */
+    .streamName {
+      color: var(--text-color);
       font-family: var(--theme-text-display-font-family);
       font-style: normal;
-      font-size: 20px;
+      font-size: 1.25em;
       font-weight: 500;
       line-height: 1.1875;
       letter-spacing: -0.0625px;
       text-decoration: none;
       text-transform: none;
+      text-align: left;
+    }
+
+    .followButton {
+      display: none;
+
+      @media (width > $follow-modal-width) {
+        display: block;
+      }
     }
   }
-
-  .submitButton {
-    margin-top: 10px;
-  }
-
-  .footer {
-    color: white;
-    padding: 5px;
-  }
 }