Fix subscription form on short displays

about.php

@@ -9,7 +9,7 @@
             <h2><?= translate('about_and_credits', $i18n) ?></h2>
         </header>
         <div class="credits-list">
-            <p>Wallos v1.2.0</p>
+            <p>Wallos v1.2.1</p>
             <p><?= translate('license', $i18n) ?>: 
                 <span>
                     GPLv3

scripts/dashboard.js

@@ -85,6 +85,8 @@ function fillEditFormFields(subscription) {
 
 function openEditSubscription(event, id) {
     event.stopPropagation();
+    const body = document.querySelector('body');
+    body.classList.add('no-scroll');
     const url = `endpoints/subscription/get.php?id=${id}`;
     fetch(url)
     .then((response) => {
@@ -111,11 +113,15 @@ function addSubscription() {
     resetForm();
     const modal = document.getElementById('subscription-form');
     modal.classList.add("is-open"); 
+    const body = document.querySelector('body');
+    body.classList.add('no-scroll');
 }
 
 function closeAddSubscription() {
     const modal = document.getElementById('subscription-form');
     modal.classList.remove("is-open"); 
+    const body = document.querySelector('body');
+    body.classList.remove('no-scroll');
     resetForm();
 }
 

styles/styles.css

@@ -6,6 +6,10 @@ body {
   color: #202020;
 }
 
+body.no-scroll {
+  overflow-y: hidden; 
+}
+
 h2, h3 {
   font-weight: 500;
 }
@@ -821,13 +825,15 @@ input[type="checkbox"] {
   border-radius: 8px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   box-sizing: border-box;
-  overflow: hidden;
   position: fixed;
   left: 50%;
   top: 50%;
   transform: translateX(-50%) translateY(-50%);
   z-index: 3;
   max-width: 800px;
+  max-height: calc(100vh - 34px);
+  overflow: auto;
+  overflow-y: auto;
   width: 90%;
   display: none;
 }
@@ -853,6 +859,7 @@ input[type="checkbox"] {
 @media (max-width: 768px) {
   .subscription-form {
     width: 100%;
+    max-height: 100vh;
   }
 
   .subscription-form .buttons input {