diff --git a/php/public/style.css b/php/public/style.css
index 36a37dab6b8..e75b2f0081b 100644
--- 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;