feat: hide unavailable ui elements on small devices

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>

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}