From 7b0c013dc08710e36760d3866a7072de5fb88bfd Mon Sep 17 00:00:00 2001
From: Botzy <bodim93@gmail.com>
Date: Fri, 21 Feb 2025 13:41:59 +0200
Subject: [PATCH 1/4] fix(Placeholder): improve styles on mobile

---
 .../Calendar/Placeholder/Placeholder.less     | 107 +++++++++++++-----
 .../Calendar/Placeholder/Placeholder.tsx      |  20 ++--
 2 files changed, 93 insertions(+), 34 deletions(-)

diff --git a/src/routes/Calendar/Placeholder/Placeholder.less b/src/routes/Calendar/Placeholder/Placeholder.less
index a509ff79e..a37bd257d 100644
--- a/src/routes/Calendar/Placeholder/Placeholder.less
+++ b/src/routes/Calendar/Placeholder/Placeholder.less
@@ -13,7 +13,9 @@
     overflow-y: auto;
 
     .title {
-        flex: none;
+        display: flex;
+        flex: 4;
+        align-items: flex-end;
         font-size: 1.75rem;
         font-weight: 400;
         text-align: center;
@@ -22,19 +24,26 @@
         opacity: 0.5;
     }
 
-    .image {
-        flex: none;
-        height: 14rem;
-        margin: 1.5rem 0;
+    .image-container {
+        display: flex;
+        flex: 4;
+        align-items: center;
+        padding: 1.5rem 0;
+
+        .image {
+            height: 100%;
+            max-height: 14rem;
+            object-fit: contain;
+        }
     }
 
     .overview {
-        flex: none;
+        flex: 2;
         display: flex;
         flex-direction: row;
         align-items: center;
         gap: 4rem;
-        margin-bottom: 3rem;
+        margin-bottom: 1rem;
 
         .point {
             display: flex;
@@ -61,21 +70,57 @@
         }
     }
 
-    .button {
-        flex: none;
-        justify-content: center;
-        height: 4rem;
-        line-height: 4rem;
-        padding: 0 5rem;
-        font-size: 1.1rem;
-        color: var(--primary-foreground-color);
-        text-align: center;
-        border-radius: 3.5rem;
-        background-color: var(--overlay-color);
+    .button-container {
+        display: flex;
+        flex: 2;       
+        align-items: flex-start;
+        margin: 1rem 0;
+    
+        .button {
+            display: flex;
+            justify-content: center;
+            height: 4rem;
+            line-height: 4rem;
+            padding: 0 5rem;
+            font-size: 1.1rem;
+            color: var(--primary-foreground-color);
+            text-align: center;
+            border-radius: 3.5rem;
+            background-color: var(--overlay-color);
 
-        &:hover {
-            outline: var(--focus-outline-size) solid var(--primary-foreground-color);
-            background-color: transparent;
+            &:hover {
+                outline: var(--focus-outline-size) solid var(--primary-foreground-color);
+                background-color: transparent;
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: @xsmall) {
+    .placeholder {
+        padding: 1rem 2rem;
+
+        .title {
+            flex: 1;
+            margin-bottom: 0;
+        }
+
+        .image-container {
+            flex: 3;
+            padding: 1rem;
+
+            .image {
+                max-height: 10rem;
+            }
+        }
+
+        .overview {
+            flex: 2;
+        }
+
+        .button-container {
+            flex: 2;
+            margin: 1rem 0 0;
         }
     }
 }
@@ -83,17 +128,27 @@
 @media only screen and (max-width: @minimum) {
     .placeholder {
         padding: 1rem 2rem;
-
-        .image {
-            height: 10rem;
+        .title {
+            flex: 2;
         }
 
         .overview {
             flex-direction: column;
+            flex: 2;
+            gap: 1rem;
+
+            .point {
+                .text {
+                    font-size: 1rem;
+                }
+            }
         }
 
-        .button {
-            width: 100%;
+        .button-container {
+            flex: 3;
+            .button {
+                width: 100%;
+            }
         }
     }
 }
\ No newline at end of file
diff --git a/src/routes/Calendar/Placeholder/Placeholder.tsx b/src/routes/Calendar/Placeholder/Placeholder.tsx
index 4b48ba3f2..c84e7a1b8 100644
--- a/src/routes/Calendar/Placeholder/Placeholder.tsx
+++ b/src/routes/Calendar/Placeholder/Placeholder.tsx
@@ -14,11 +14,13 @@ const Placeholder = () => {
             <div className={styles['title']}>
                 {t('CALENDAR_NOT_LOGGED_IN')}
             </div>
-            <Image
-                className={styles['image']}
-                src={require('/images/calendar_placeholder.png')}
-                alt={' '}
-            />
+            <div className={styles['image-container']}>
+                <Image
+                    className={styles['image']}
+                    src={require('/images/calendar_placeholder.png')}
+                    alt={' '}
+                />
+            </div>
             <div className={styles['overview']}>
                 <div className={styles['point']}>
                     <Icon className={styles['icon']} name={'megaphone'} />
@@ -33,9 +35,11 @@ const Placeholder = () => {
                     </div>
                 </div>
             </div>
-            <Button className={styles['button']} href={'#/intro?form=login'}>
-                {t('LOG_IN')}
-            </Button>
+            <div className={styles['button-container']}>
+                <Button className={styles['button']} href={'#/intro?form=login'}>
+                    {t('LOG_IN')}
+                </Button>
+            </div>
         </div>
     );
 };

From 039676afb5b375a8e2c36d18526caea441f6b476 Mon Sep 17 00:00:00 2001
From: Botzy <bodim93@gmail.com>
Date: Mon, 24 Feb 2025 14:19:13 +0200
Subject: [PATCH 2/4] fix(MainNavBars): limit the content scroll area to not
 include navbar

---
 src/components/MainNavBars/MainNavBars.less | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/MainNavBars/MainNavBars.less b/src/components/MainNavBars/MainNavBars.less
index a5495bc69..4eff455a5 100644
--- a/src/components/MainNavBars/MainNavBars.less
+++ b/src/components/MainNavBars/MainNavBars.less
@@ -29,8 +29,7 @@
 
     .nav-content-container {
         position: absolute;
-        padding-top: calc(var(--horizontal-nav-bar-size) + var(--safe-area-inset-top));
-        top: 0;
+        top: calc(var(--horizontal-nav-bar-size) + var(--safe-area-inset-top));
         right: 0;
         bottom: 0;
         left: var(--vertical-nav-bar-size);

From c5c7805d911c01f93ee94e60037ebb230e96aee6 Mon Sep 17 00:00:00 2001
From: Botzy <bodim93@gmail.com>
Date: Mon, 24 Feb 2025 14:20:23 +0200
Subject: [PATCH 3/4] fix(Placeholder): improve styles and add scroll on mobile
 instead of squeezing in components

---
 .../Calendar/Placeholder/Placeholder.less     | 24 +------------------
 1 file changed, 1 insertion(+), 23 deletions(-)

diff --git a/src/routes/Calendar/Placeholder/Placeholder.less b/src/routes/Calendar/Placeholder/Placeholder.less
index a37bd257d..456bcfd21 100644
--- a/src/routes/Calendar/Placeholder/Placeholder.less
+++ b/src/routes/Calendar/Placeholder/Placeholder.less
@@ -8,14 +8,11 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    height: 100%;
+    min-height: 100%;
     width: 100%;
     overflow-y: auto;
 
     .title {
-        display: flex;
-        flex: 4;
-        align-items: flex-end;
         font-size: 1.75rem;
         font-weight: 400;
         text-align: center;
@@ -25,9 +22,6 @@
     }
 
     .image-container {
-        display: flex;
-        flex: 4;
-        align-items: center;
         padding: 1.5rem 0;
 
         .image {
@@ -38,7 +32,6 @@
     }
 
     .overview {
-        flex: 2;
         display: flex;
         flex-direction: row;
         align-items: center;
@@ -71,9 +64,6 @@
     }
 
     .button-container {
-        display: flex;
-        flex: 2;       
-        align-items: flex-start;
         margin: 1rem 0;
     
         .button {
@@ -101,12 +91,10 @@
         padding: 1rem 2rem;
 
         .title {
-            flex: 1;
             margin-bottom: 0;
         }
 
         .image-container {
-            flex: 3;
             padding: 1rem;
 
             .image {
@@ -114,12 +102,7 @@
             }
         }
 
-        .overview {
-            flex: 2;
-        }
-
         .button-container {
-            flex: 2;
             margin: 1rem 0 0;
         }
     }
@@ -128,13 +111,9 @@
 @media only screen and (max-width: @minimum) {
     .placeholder {
         padding: 1rem 2rem;
-        .title {
-            flex: 2;
-        }
 
         .overview {
             flex-direction: column;
-            flex: 2;
             gap: 1rem;
 
             .point {
@@ -145,7 +124,6 @@
         }
 
         .button-container {
-            flex: 3;
             .button {
                 width: 100%;
             }

From bf37815d14c90eaeb7bdde52ccb32ad366329db0 Mon Sep 17 00:00:00 2001
From: Botzy <bodim93@gmail.com>
Date: Mon, 24 Feb 2025 14:51:09 +0200
Subject: [PATCH 4/4] fix(MainNavBars): limit content scroll on mobile to not
 go under bottom nav bar

---
 src/components/MainNavBars/MainNavBars.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MainNavBars/MainNavBars.less b/src/components/MainNavBars/MainNavBars.less
index 4eff455a5..ca816a72f 100644
--- a/src/components/MainNavBars/MainNavBars.less
+++ b/src/components/MainNavBars/MainNavBars.less
@@ -42,7 +42,7 @@
     .main-nav-bars-container {
         .nav-content-container {
             left: 0;
-            padding-bottom: var(--vertical-nav-bar-size);
+            bottom: var(--vertical-nav-bar-size);
         }
 
         .vertical-nav-bar {