diff --git a/src/main/resources/static/css/general.css b/src/main/resources/static/css/general.css
index b49bfb7ee..88e7a1b11 100644
--- a/src/main/resources/static/css/general.css
+++ b/src/main/resources/static/css/general.css
@@ -1,7 +1,8 @@
#page-container {
- min-height: 100vh;
+ height: 100vh;
display: flex;
flex-direction: column;
+ overflow-x: clip;
}
#content-wrap {
diff --git a/src/main/resources/static/css/navbar.css b/src/main/resources/static/css/navbar.css
index f9b3f3072..31099cdf2 100644
--- a/src/main/resources/static/css/navbar.css
+++ b/src/main/resources/static/css/navbar.css
@@ -162,6 +162,7 @@ html[dir="rtl"] .lang-dropdown-item-wrapper {
text-wrap: wrap;
word-break: break-word;
width: 80%;
+ font-size: large;
}
.close-icon {
@@ -476,6 +477,9 @@ html[dir="rtl"] .dropdown-menu[data-bs-popper] {
display: flex;
gap: 30px;
justify-content: center;
+ width: 140%;
+ position: relative;
+ left: -20%;
}
.feature-group {
diff --git a/src/main/resources/templates/fragments/navbar.html b/src/main/resources/templates/fragments/navbar.html
index 593d8c213..ca4ced807 100644
--- a/src/main/resources/templates/fragments/navbar.html
+++ b/src/main/resources/templates/fragments/navbar.html
@@ -1,4 +1,4 @@
-<div th:fragment="navbar" class="mx-auto" style="position: sticky; top:0; z-index:10000">
+<div th:fragment="navbar" class="mx-auto" style="position: sticky; top:0; z-index:10000; width:100%">
<script th:src="@{'/js/languageSelection.js'}"></script>
<script th:src="@{'/js/navbar.js'}"></script>
<script th:src="@{'/js/additionalLanguageCode.js'}"></script>
diff --git a/src/main/resources/templates/home.html b/src/main/resources/templates/home.html
index 3842c1fe7..bba498db5 100644
--- a/src/main/resources/templates/home.html
+++ b/src/main/resources/templates/home.html
@@ -7,20 +7,18 @@
</head>
<body>
- <div id="page-container">
- <div id="content-wrap">
- <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-
-
-
+ <div id="page-container">
+ <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
+ <div style="transform-origin: top;"
+ id="scale-wrap">
<br class="d-md-none">
<!-- Features -->
<script th:src="@{'/js/homecard.js'}"></script>
<div style="
width: 100%;
display: flex;
- flex-direction: column;">
-
+ flex-direction: column;"
+ >
<div>
<br>
<div style="justify-content: center; display: flex;">
@@ -123,9 +121,10 @@
</div>
</div>
+ <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
+
</div>
</div>
- <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
</div>
@@ -222,7 +221,21 @@
window.showSurvey = /*[[${showSurveyFromDocker}]]*/ true
</script>
<script th:src="@{'/js/pages/home.js'}" th:inline="javascript"></script>
-
+ <script>
+ function applyScale() {
+ const baseWidth = 1440;
+ const baseHeight = 1000;
+ const scaleX = window.innerWidth / baseWidth;
+ const scaleY = window.innerHeight / baseHeight;
+ const scale = Math.max(0.9, Math.min(scaleX, scaleY)); // keep aspect ratio, honor minScale
+ const ui = document.getElementById('scale-wrap');
+ ui.style.transform = `scale(${scale*0.75})`;
+ }
+
+ window.addEventListener('resize', applyScale);
+ window.addEventListener('load', applyScale);
+ </script>
+
</body>