From 19ae8f347580dfdde87d124df444a3e094d9dc13 Mon Sep 17 00:00:00 2001
From: Katja Lutz <mail@katjalutz.ch>
Date: Thu, 23 Jun 2022 15:22:09 +0200
Subject: [PATCH] feat: hide unavailable ui elements on small devices

---
 src/components/Page.tsx             | 4 ++--
 src/components/Settings/Overlay.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Page.tsx b/src/components/Page.tsx
index 20186ac..9b45333 100644
--- a/src/components/Page.tsx
+++ b/src/components/Page.tsx
@@ -2,8 +2,8 @@ import { FlowComponent } from "solid-js";
 
 const Page: FlowComponent = (props) => {
   return (
-    <div class="flex-1 flex items-start print:block overflow-y-hidden xxl:overflow-y-auto justify-center min-h-screen print:min-h-0 p-5 print:p-0">
-      <div class="w-[1200px] shrink-0 scale-[.5] md:scale-[0.6] lg:scale-90 xl:scale-100 origin-top print:scale-100 shadow-md print:shadow-none print:w-full bg-white p-5 print:p-0">
+    <div class="flex-1 flex items-start print:block overflow-y-hidden overflow-x-hidden xxl:overflow-y-auto justify-center xl:max-w-[none] max-h-screen xl:max-h-[none] min-h-screen print:min-h-0 p-5 print:p-0">
+      <div class="w-[1200px] shrink-0 scale-[.5] lg:scale-90 xl:scale-100 origin-top print:scale-100 shadow-md print:shadow-none print:w-full bg-white p-5 print:p-0">
         {props.children}
       </div>
     </div>
diff --git a/src/components/Settings/Overlay.tsx b/src/components/Settings/Overlay.tsx
index 4578f03..b2a2f63 100644
--- a/src/components/Settings/Overlay.tsx
+++ b/src/components/Settings/Overlay.tsx
@@ -218,7 +218,7 @@ const SettingsOverlay: Component = () => {
 
   return (
     <>
-      <div class="print:hidden bg-white z-50 h-full fixed xxl:h-auto xxl:relative left-0 w-[480px] grid grid-rows-[1fr_auto] gap-4 p-3 transition-all shadow-none hover:shadow-2xl focus-within:shadow-2xl -translate-x-72 opacity-70 hover:opacity-100 focus-within:opacity-100 xxl:opacity-100 xxl:-translate-x-0 hover:translate-x-0 focus-within:translate-x-0 ">
+      <div class="print:hidden hidden xl:grid bg-white z-50 h-full fixed xxl:h-auto xxl:relative left-0 w-[480px] grid-rows-[1fr_auto] gap-4 p-3 transition-all shadow-none hover:shadow-2xl focus-within:shadow-2xl -translate-x-72 opacity-70 hover:opacity-100 focus-within:opacity-100 xxl:opacity-100 xxl:-translate-x-0 hover:translate-x-0 focus-within:translate-x-0 ">
         <div class="overflow-y-scroll">
           <AccordionItem
             item={0}