Basic cleanup (#4547)

app/assets/stylesheets/helpers.scss

@@ -16,19 +16,23 @@
   left: 0;
   right: 0;
   margin: auto;
-  height: 70%;
+  height: 75%;
 }
 
+.no-header-height {
+  min-height: calc(100vh - $footer-height - $footer-buffer-height);
+
   .vertical-buffer {
     padding-top: 10%;
   }
-
-.no-header-height {
-  min-height: calc(100vh - $footer-height - $footer-buffer-height);
 }
 
 .regular-height {
   min-height: calc(100vh - $header-height - $footer-height - $footer-buffer-height);
+
+  .vertical-buffer {
+    padding-top: 5%;
+  }
 }
 
 .cursor-pointer {

app/javascript/App.jsx

@@ -32,7 +32,7 @@ export default function App() {
 
   return (
     <>
-      {headerPage && <Header /> }
+      {(headerPage || currentUser.signed_in) && <Header /> }
       <Container className={pageHeight}>
         <Outlet />
       </Container>

app/javascript/components/recordings/RecordingsList.jsx

@@ -27,7 +27,7 @@ export default function RecordingsList({
           isLoading
             ? (
               // eslint-disable-next-line react/no-array-index-key
-              [...Array(10)].map((val, idx) => <RecordingsListRowPlaceHolder key={idx} />)
+              [...Array(7)].map((val, idx) => <RecordingsListRowPlaceHolder key={idx} />)
             )
             : (
               (recordings?.length

app/javascript/components/rooms/RoomCardPlaceHolder.jsx

@@ -18,9 +18,10 @@ export default function RoomCardPlaceHolder() {
           <Placeholder xs={4} size="xs" /> <Placeholder xs={6} size="xs" />
           <Placeholder xs={2} size="xs" />
         </Placeholder>
-        <hr />
-        <Placeholder.Button variant="brand-outline" className="disabled float-end" animation="glow" bg="placeholder">{t('start')}</Placeholder.Button>
       </Card.Body>
+      <Card.Footer className="bg-white">
+        <Placeholder.Button variant="brand-outline" className="disabled float-end" animation="glow" bg="placeholder">{t('start')}</Placeholder.Button>
+      </Card.Footer>
     </Card>
   );
 }