From ad9afb79fcc084385c4ca4b9d693b09bae59829d Mon Sep 17 00:00:00 2001
From: ellite <k.d.mitnick@gmail.com>
Date: Fri, 26 Jan 2024 18:04:15 +0100
Subject: [PATCH] Fix subscription form on short displays

---
 about.php            | 2 +-
 scripts/dashboard.js | 6 ++++++
 styles/styles.css    | 9 ++++++++-
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/about.php b/about.php
index c92c64f..e50ee68 100644
--- a/about.php
+++ b/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
diff --git a/scripts/dashboard.js b/scripts/dashboard.js
index 8472b14..d56626f 100644
--- a/scripts/dashboard.js
+++ b/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();
 }
 
diff --git a/styles/styles.css b/styles/styles.css
index da61058..7f4be1a 100644
--- a/styles/styles.css
+++ b/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 {