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

Signed-off-by: ernolf <[email protected]>
nextcloud · Oct 26, 2024 · dfb32ec · dfb32ec
1 parent 55b5469
commit dfb32ec
Showing 1 changed file with 8 additions and 4 deletions.
diff --git a/php/public/style.css b/php/public/style.css
@@ -22,6 +22,10 @@
     --default-font-size: 13px;
     --checkbox-size: 16px;
     --max-width: 500px;
+    --container-top-margin: 25px;
+    --container-padding: 2px;
+    --container-height-calculation-difference: calc(var(--container-top-margin) * 2);
+    --main-height-culation-difference: calc(var(--container-height-calculation-difference) + calc(var(--container-padding) * 2));
     --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 */
@@ -279,13 +283,13 @@ html[data-theme="dark"] ::-webkit-scrollbar-track {
 }
 
 .container {
-    margin: 20px auto;
-    padding: 2px;
+    margin: var(--container-top-margin) auto;
+    padding: var(--container-padding);
     max-width: calc(var(--max-width) + 108px);
     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;
 }
 
@@ -294,7 +298,7 @@ main {
     padding-right: 50px;
     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;