fix(ui): adjust height of main to fit in container

Signed-off-by: ernolf <[email protected]>
nextcloud · Oct 26, 2024 · 4ff189f · 4ff189f
1 parent 55b5469
commit 4ff189f
Showing 1 changed file with 26 additions and 17 deletions.
diff --git a/php/public/style.css b/php/public/style.css
@@ -15,16 +15,31 @@
     --color-info-hover: #00aaef;
     --color-border-maxcontrast: #7d7d7d;
     --color-loader: #f3f3f3;
+    --color-disabled: #d3d3d3; /* light gray background for disabled checkboxes */
+    --color-border-disabled: #a9a9a9; /* darker gray border for disabled checkboxes */
+    --color-text-disabled: #a9a9a9; /* matching label text color for disabled checkboxes */
     --border: .5px;
     --border-hover: 2px;
     --border-radius: 7px;
     --border-radius-large: 12px;
     --default-font-size: 13px;
     --checkbox-size: 16px;
     --max-width: 500px;
-    --color-disabled: #d3d3d3; /* light gray background for disabled checkboxes */
-    --color-border-disabled: #a9a9a9; /* darker gray border for disabled checkboxes */
-    --color-text-disabled: #a9a9a9; /* matching label text color for disabled checkboxes */
+    --container-top-margin: 20px;
+    --container-bottom-margin: 20px;
+    --container-padding: 2px;
+    --container-height-calculation-difference: calc(var(--container-top-margin) + var(--container-bottom-margin));
+    --main-height-calculation-difference: calc(var(--container-height-calculation-difference) + calc(var(--container-padding) * 2));
+    --main-padding: 50px;
+}
+
+/* Breakpoint calculation: 500px (max-width) + 100px (main-padding * 2) + 200px (additional space) = 800px
+Note: Unfortunately, it's not possible to calculate this dynamically using CSS variables in media queries */
+@media only screen and (max-width: 800px) {
+    :root {
+        --container-top-margin: 50px;
+        --container-bottom-margin: 0px;
+    }
 }
 
 [data-theme="dark"] {
@@ -279,26 +294,26 @@ html[data-theme="dark"] ::-webkit-scrollbar-track {
 }
 
 .container {
-    margin: 20px auto;
-    padding: 2px;
-    max-width: calc(var(--max-width) + 108px);
+    margin: var(--container-top-margin) auto var(--container-bottom-margin) auto;
+    padding: var(--container-padding);
+    max-width: calc(var(--max-width) + calc(var(--main-padding) * 2) + 8px);
     background-color: var(--color-main-background);
     border-radius: var(--border-radius-large);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    max-height: calc(100dvh - 50px);
+    max-height: calc(100dvh - var(--container-height-calculation-difference));
     overflow: hidden;
 }
 
 main {
-    padding-left: 50px;
-    padding-right: 50px;
+    padding-left: var(--main-padding);
+    padding-right: var(--main-padding);
     background-color: transparent; /* transparent, since color comes from outer container */
     color: var(--color-main-text);
-    max-height: calc(100dvh - 44px);
+    max-height: calc(100dvh - var(--main-height-calculation-difference));
     overflow-y: auto;
     box-sizing: border-box;
     word-break: break-word;
-    max-width: calc(var(--max-width) + 100px);
+    max-width: calc(var(--max-width) + calc(var(--main-padding) * 2));
     margin: 0 auto;
 }
 
@@ -499,9 +514,3 @@ input[type="checkbox"]:disabled:not(:checked) + label {
 #theme-toggle:not(:hover) #theme-icon {
     opacity: 0.6; /* Slightly transparent */
 }
-
-@media only screen and (max-width: 800px) {
-    .container {
-        margin: 50px auto 0px auto;
-    }
-}