feat: add support for screens with min-width 1024px

src/components/Page.tsx

@@ -48,7 +48,7 @@ const Page: FlowComponent = (props) => {
   });
 
   return (
-    <div class="flex-1 flex flex-col justify-start print:block overflow-y-hidden overflow-x-hidden xxl:overflow-y-auto items-center xl:max-w-[none] max-h-screen xl:max-h-[none] print:max-h-[none] min-h-screen print:min-h-0 p-5 pt-3 print:p-0">
+    <div class="flex-1 flex flex-col justify-start print:block overflow-y-hidden overflow-x-hidden xxl:overflow-y-auto items-center lg:max-w-[none] max-h-screen lg:max-h-[none] print:max-h-[none] min-h-screen print:min-h-0 p-5 pt-3 print:p-0">
       <div
         aria-disabled="true"
         class="print:hidden text-xs text-black text-opacity-50 uppercase mb-2"
@@ -71,7 +71,7 @@ const Page: FlowComponent = (props) => {
           {lastSavedWords()}
         </span>
       </div>
-      <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">
+      <div class="w-[900px] lg:w-[1000px] xl:w-[1100px] xxl:w-[1200px] print:w-full shrink-0 scale-75 md:scale-90 lg:scale-100 origin-top print:scale-100 shadow-md print:shadow-none bg-white p-5 print:p-0">
         {props.children}
       </div>
     </div>

src/components/Settings/Overlay.tsx

@@ -226,7 +226,7 @@ const SettingsOverlay: Component = () => {
 
   return (
     <>
-      <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="print:hidden hidden lg: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}

src/components/WelcomeModal.tsx

@@ -167,7 +167,7 @@ const WelcomeModal: Component = (props) => {
 
   return (
     <Modal open={isOpen()}>
-      <div class="hidden xl:block">
+      <div class="hidden lg:block">
         <ModalCloseButton onClick={() => setLocalState("showWelcome", false)} />
       </div>
       <div class="max-h-[60vh] overflow-y-auto px-2">
@@ -925,13 +925,13 @@ const WelcomeModal: Component = (props) => {
       <div class="mt-14 relative flex justify-center items-center gap-10">
         <a
           href="#welcome-patron"
-          class="hidden xl:flex btn btn-sm btn-secondary bg-purple-600 border-purple-600 gap-2 transition-all shadow-lg hover:shadow-lg shadow-purple-300 hover:shadow-purple-500 hover:ring-2 ring-offset-2 ring-purple-500"
+          class="hidden lg:flex btn btn-sm btn-secondary bg-purple-600 border-purple-600 gap-2 transition-all shadow-lg hover:shadow-lg shadow-purple-300 hover:shadow-purple-500 hover:ring-2 ring-offset-2 ring-purple-500"
         >
           <DonationIcon />
           Spenden
         </a>
         <div
-          class="hidden xl:flex form-control flex-row items-center gap-2 tooltip tooltip-accent"
+          class="hidden lg:flex form-control flex-row items-center gap-2 tooltip tooltip-accent"
           data-tip="Füge das Lufrai Logo zu deinem Dokument hinzu."
         >
           <input
@@ -953,12 +953,12 @@ const WelcomeModal: Component = (props) => {
         </div>
         <button
           onClick={() => setLocalState("showWelcome", false)}
-          class="hidden xl:flex btn btn-xl btn-primary gap-2 transition-all shadow-lg hover:shadow-lg shadow-indigo-300 hover:shadow-indigo-500 hover:ring-2 ring-offset-2 ring-indigo-500"
+          class="hidden lg:flex btn btn-xl btn-primary gap-2 transition-all shadow-lg hover:shadow-lg shadow-indigo-300 hover:shadow-indigo-500 hover:ring-2 ring-offset-2 ring-indigo-500"
         >
           <LaunchIcon />
           Loslegen
         </button>
-        <div class="w-full text-sm xl:hidden bg-error bg-opacity-50 ring-2 ring-offset-2 ring-error text-error-content rounded p-3 shadow-2xl flex items-center justify-center gap-3">
+        <div class="w-full text-sm lg:hidden bg-error bg-opacity-50 ring-2 ring-offset-2 ring-error text-error-content rounded p-3 shadow-2xl flex items-center justify-center gap-3">
           <WarningIcon /> Bitte verwende einen Laptop oder Computer!
         </div>
       </div>