From 171dc732f53767ba937792f5940675758756936e Mon Sep 17 00:00:00 2001 From: DL6ER Date: Wed, 29 Nov 2023 13:34:47 +0100 Subject: [PATCH 1/3] Use block instead of viewport height to fix maximum height of taillog pre element Signed-off-by: DL6ER --- style/pi-hole.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style/pi-hole.css b/style/pi-hole.css index e9707ffd..bc820e98 100644 --- a/style/pi-hole.css +++ b/style/pi-hole.css @@ -1122,7 +1122,7 @@ table.dataTable tbody > tr > .selected { } .pre-scrollable { - max-height: calc(100vh - 300px); + max-height: 100vb; overflow-y: scroll; } From dd7871ca069ba1313614ad97f46250dfcbb750df Mon Sep 17 00:00:00 2001 From: RD WebDesign Date: Thu, 30 Nov 2023 04:07:17 -0300 Subject: [PATCH 2/3] Use different heights for different scenarios The page height depends on many factors (sidebar is open/collapsed, submenu items opened/closed, mobile/desktop header, text wrap in narrow screens, manual window resize in desktops). This commit tries to calculated the best height for the PRE element in each scenario. Signed-off-by: RD WebDesign --- style/pi-hole.css | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/style/pi-hole.css b/style/pi-hole.css index bc820e98..1e083f66 100644 --- a/style/pi-hole.css +++ b/style/pi-hole.css @@ -1122,9 +1122,19 @@ table.dataTable tbody > tr > .selected { } .pre-scrollable { - max-height: 100vb; + max-height: max(195px, 100vh - 170px); overflow-y: scroll; } +@media screen and (max-width: 767px) { + .pre-scrollable { + max-height: max(195px, 100vh - 220px); + } +} +@media screen and (max-width: 546px) { + .pre-scrollable { + max-height: max(195px, 100vh - 240px); + } +} .hr-small { margin-top: 0px; From bd4683501e0724c1a7a91b33c7046fe6de1ed85a Mon Sep 17 00:00:00 2001 From: RD WebDesign Date: Thu, 30 Nov 2023 18:52:09 -0300 Subject: [PATCH 3/3] Using dynamic viewport height unit (dvh) to account browser UI height Signed-off-by: RD WebDesign --- style/pi-hole.css | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/style/pi-hole.css b/style/pi-hole.css index 1e083f66..df26bf41 100644 --- a/style/pi-hole.css +++ b/style/pi-hole.css @@ -1122,17 +1122,20 @@ table.dataTable tbody > tr > .selected { } .pre-scrollable { - max-height: max(195px, 100vh - 170px); + /* use dynamic unit to account for mobile browser interface height */ + max-height: max(195px, 100dvh - 170px); overflow-y: scroll; } @media screen and (max-width: 767px) { .pre-scrollable { - max-height: max(195px, 100vh - 220px); + /* reduce max-height on mobile (higher header) */ + max-height: max(195px, 100dvh - 220px); } } @media screen and (max-width: 546px) { .pre-scrollable { - max-height: max(195px, 100vh - 240px); + /* reduce max-height even more (box-header text wraps, increasing the height) */ + max-height: max(195px, 100dvh - 240px); } }