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/modals/FollowModal/FollowModal.module.scss

@@ -9,16 +9,21 @@
   margin-top: 10px;
 }
 
-.instructions {
+.inputContainer {
   font-family: var(--theme-text-display-font-family);
-  font-size: 0.7rem;
-  font-weight: 600;
-  margin-top: 5px;
-  margin-bottom: 5px;
-}
+  margin-bottom: 10px;
 
-.footer {
-  font-size: 0.5rem;
+  .instructions {
+    font-size: 14px;
+    font-weight: 600;
+    margin: 5px 2px;
+  }
+
+  .footer {
+    font-size: 10px;
+    margin: 2px;
+    color: var(--theme-color-components-primary-button-text-disabled);
+  }
 }
 
 .account {
@@ -50,3 +55,17 @@
     }
   }
 }
+
+.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;
+  }
+}