fix: mobile page layout overflowingv0.5.6

fix: hide sidebar/topbar on gallery maximized

4 files changed, 8 insertions, 8 deletions

diff --git a/static/input.css b/static/input.css
index 69cfa91..aef2d8f 100644
--- a/static/input.css
+++ b/static/input.css
@@ -154,10 +154,6 @@
     background-size: calc(var(--squares-and-triangles-background-width-coef) * 1vw) calc(var(--squares-and-triangles-background-height-coef) * 1vw);
 }
 
-body:has(.lg-container:not([class~="lg-inline"])) .desktop-sidebar-custom {
-    display: none !important;
-}
-
 .mobile-topbar-custom {
     width: 90vw;
     height: 8%;
@@ -165,7 +161,7 @@ body:has(.lg-container:not([class~="lg-inline"])) .desktop-sidebar-custom {
     margin-left: 5vw;
 }
 
-body:has(.lg-container:not([class~="lg-inline"])) .mobile-topbar-custom {
+body:has(.lg-container:not([class~="lg-inline"])) #sidebar {
     display: none !important;
 }
 
@@ -444,6 +440,10 @@ body:has(.lg-container:not([class~="lg-inline"])) .mobile-topbar-custom {
         max-height: 80%;
     }
 
+    .ar-lt-0\.8\:max-h-\[calc\(100\%-25vh\)\] {
+        max-height: calc(100% - 25vh);
+    }
+
     .ar-lt-0\.8\:text-\[5vh\] {
         font-size: 5vh;
     }
diff --git a/views/layouts/general-page.html b/views/layouts/general-page.html
index 121a5cd..eab7cd1 100644
--- a/views/layouts/general-page.html
+++ b/views/layouts/general-page.html
@@ -33,7 +33,7 @@
         switchTheme(savedTheme);
     </script>
 
-    <div class="bg-sidebar flex sticky flex-col ar-gt-0.8:items-center shadow-2xl z-20 w-[5vw] ar-lt-0.8:w-[90vw] ar-lt-0.4:w-[100vw] h-screen ar-lt-0.8:h-[8vh] ar-lt-0.8:ml-[5vw] ar-lt-0.4:ml-0">
+    <div id="sidebar" class="bg-sidebar flex sticky flex-col ar-gt-0.8:items-center shadow-2xl z-20 w-[5vw] ar-lt-0.8:w-[90vw] ar-lt-0.4:w-[100vw] h-screen ar-lt-0.8:h-[8vh] ar-lt-0.8:ml-[5vw] ar-lt-0.4:ml-0">
         <div class="logo-custom ar-lt-0.8:hidden text-sidebar font-patua font-extrabold text-center relative z-20">
             saya.today
         </div>
diff --git a/views/pages/blog-catalogue.html b/views/pages/blog-catalogue.html
index 962932e..0da8d26 100644
--- a/views/pages/blog-catalogue.html
+++ b/views/pages/blog-catalogue.html
@@ -1,5 +1,5 @@
 {{ define "body" }}
-<div class="flex flex-row ar-lt-0.8:flex-col max-h-[calc(100%-7vmax)] ar-lt-0.8:max-h-[80%] flex-1 text-[1vmax]">
+<div class="flex flex-row ar-lt-0.8:flex-col max-h-[calc(100%-7vmax)] ar-lt-0.8:max-h-[calc(100%-25vh)] flex-1 text-[1vmax]">
     <form hx-get="/api/v1/blog-search" hx-vals='{"lang": "{{ .Lang }}"}' hx-target=".blog-cards" hx-swap="innerHTML"
         class="tags-list ar-gt-0.8:min-w-[10vh] ar-gt-0.8:max-w-[20vh] ar-gt-0.8:w-fit ar-lt-0.8:w-[100%] flex shrink-0 flex-col overflow-y-auto ar-gt-0.8:mr-[1.2vmin]">
         <fieldset>
diff --git a/views/pages/blog-page.html b/views/pages/blog-page.html
index 093a75e..feb63ef 100644
--- a/views/pages/blog-page.html
+++ b/views/pages/blog-page.html
@@ -15,7 +15,7 @@
 {{ end }}
 
 {{ define "body" }}
-<div class="bg-background-light flex flex-col grow overflow-y-auto inset-shadow p-[2.4vmin] max-h-[calc(100%-7vmax)] ar-lt-0.8:max-h-[80%]">
+<div class="bg-background-light flex flex-col grow overflow-y-auto inset-shadow p-[2.4vmin] max-h-[calc(100%-7vmax)] ar-lt-0.8:max-h-[calc(100%-25vh)]">
     {{ .ParsedMarkdown }}
 {{- if .MapLocationX }}
     <hr class="border-t-4 border-dotted border-main-dark mt-[0.8vmin] mb-[0.8vmin] w-[80%] ml-auto mr-auto">