fix: Hide welcome banner on small screens

On small screens, the welcome banner is unnecessary clutter. Hide it on anything that's less tall than a 1080p monitor. Closes #1786
DSD-DBS · Sep 12, 2024 · a43b2c1 · a43b2c1
1 parent f43efb9
commit a43b2c1
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 1 deletion.
diff --git a/frontend/src/app/sessions/sessions.component.html b/frontend/src/app/sessions/sessions.component.html
@@ -3,7 +3,7 @@
  ~ SPDX-License-Identifier: Apache-2.0
  -->
 
-<div class="mb-12"><app-welcome /></div>
+<div class="mb-12 hidden tall:block"><app-welcome /></div>
 
 <app-user-sessions-wrapper>
   <div class="flex flex-wrap justify-around gap-4">

diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
@@ -30,6 +30,9 @@ module.exports = {
         // 2*10px is the margin of the mat-card
         "max-card": "calc(100vw - 2*3.9px - 2*10px)",
       },
+      screens: {
+        tall: { raw: "(min-height: 945px)" },
+      },
     },
   },
   plugins: [],