feat: improve Modal responsiveness

src/components/Modal.tsx

@@ -20,7 +20,7 @@ const Modal: FlowComponent<{ open: boolean }> = (props) => {
         "!visible": isVisible(),
       }}
     >
-      <div class="modal-box w-1/2 p-20 max-w-none overflow-hidden">
+      <div class="modal-box relative py-16 w-11/12 lg:w-2/3 xxl:w-1/2 lg:p-16 max-w-none overflow-hidden">
         {props.children}
       </div>
     </div>

src/components/WelcomeModal.tsx

@@ -99,23 +99,23 @@ const WelcomeModal: Component = (props) => {
   return (
     <Modal open={isOpen()}>
       <ModalCloseButton onClick={() => setLocalState("showWelcome", false)} />
-      <div class="max-h-[50vh] overflow-y-auto">
+      <div class="max-h-[50vh] overflow-y-auto px-2">
-        <div class="h-[50vh] flex items-center justify-center">
+        <div class="min-h-[50vh] flex items-center justify-center">
           <div>
-            <div class="flex flex-col items-center">
+            <div class="flex flex-col items-center justify-around">
-              <div class="mb-3 text-8xl flex items-end justify-between w-[370px] font-bold tracking-tighter leading-none text-swiss-red fill-current">
+              <div class="mb-3 text-6xl lg:text-8xl flex items-end lg:w-[370px] justify-between gap-2 lg:gap-0 font-bold tracking-tighter leading-none text-swiss-red fill-current">
-                <AppIcon height="0.9em" />
+                <AppIcon class="w-auto h-[0.9em]" />
                 <div>Räppli</div>
               </div>
               <div class="flex flex-col items-stretch">
                 <div class="flex justify-center">
-                  <div class="text-gray-800 tracking-widest mb-4 flex gap-1">
+                  <div class="text-gray-800 text-sm lg:text-base tracking-widest mb-4 flex gap-1 flex-col items-center lg:flex-row">
                     Der reibungslose Weg zur{" "}
                     <span class="ignore-white-space" ref={subtitleEl}></span>
                   </div>
                 </div>
               </div>
-              <div class="flex justify-end w-[410px]">
+              <div class="flex justify-end lg:w-[410px] max-w-full">
                 <a
                   href="https://lufrai.org"
                   target="_blank"
@@ -129,7 +129,7 @@ const WelcomeModal: Component = (props) => {
               </div>
             </div>
 
-            <div class="mt-28 text-base flex text-center gap-7 items-center justify-center">
+            <div class="mt-28 text-base flex flex-wrap text-center gap-7 items-center justify-center">
               <a
                 class="link text-secondary-focus hover:text-secondary"
                 href="#welcome-quickstart"
@@ -325,10 +325,10 @@ const WelcomeModal: Component = (props) => {
           <LaunchIcon />
           Loslegen
         </button>
-        <div class="absolute -bottom-12 -right-12 text-xs text-black opacity-60 flex gap-3">
+      </div>
-          <span>Version: {__APP_VERSION__}</span>
+      <div class="absolute bottom-8 right-8 text-xs text-black opacity-60 flex gap-3">
-          <span>{getDisplayDate(new Date(__BUILD_TIME__))}</span>
+        <span>Version: {__APP_VERSION__}</span>
-        </div>
+        <span>{getDisplayDate(new Date(__BUILD_TIME__))}</span>
       </div>
     </Modal>
   );