From 045f87ef50e7f0394cd028c409788630660c0701 Mon Sep 17 00:00:00 2001
From: Oliver Bartsch <bo@cedev.de>
Date: Thu, 15 Feb 2024 11:16:57 +0100
Subject: [PATCH] [BUGFIX] Prevent drop down menus in docheader from being cut
off
Drop down menus, used in the docheader (e.g. the
language selection in then page module) do no longer
get cut off on small screens.
This is done by setting a dynamic max-height
(viewport height - topbar and docheader height)
and by allowing to scroll.
Resolves: #103074
Releases: main, 12.4
Change-Id: Icd5f6d9c245f40c55e47e1f18901467a5703bc16
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/83037
Tested-by: Oliver Bartsch <bo@cedev.de>
Reviewed-by: Oliver Bartsch <bo@cedev.de>
Tested-by: core-ci <typo3@b13.com>
---
Build/Sources/Sass/component/_module.scss | 5 +++++
typo3/sysext/backend/Resources/Public/Css/backend.css | 1 +
2 files changed, 6 insertions(+)
diff --git a/Build/Sources/Sass/component/_module.scss b/Build/Sources/Sass/component/_module.scss
index d21ad2394af0..f582db62d0bc 100644
--- a/Build/Sources/Sass/component/_module.scss
+++ b/Build/Sources/Sass/component/_module.scss
@@ -107,6 +107,11 @@
gap: var(--module-docheader-spacing);
flex-wrap: wrap;
}
+
+ .dropdown-menu {
+ max-height: calc(100vh - #{$toolbar-height} - var(--module-docheader-height));
+ overflow-y: auto;
+ }
}
}
diff --git a/typo3/sysext/backend/Resources/Public/Css/backend.css b/typo3/sysext/backend/Resources/Public/Css/backend.css
index a3f8d2fb5cff..835798bd4df6 100644
--- a/typo3/sysext/backend/Resources/Public/Css/backend.css
+++ b/typo3/sysext/backend/Resources/Public/Css/backend.css
@@ -3046,6 +3046,7 @@ a.dropdown-toggle{text-decoration:none}
.module-docheader .module-docheader-bar label{margin-top:0;margin-bottom:0}
.module-docheader .module-docheader-bar .form-group{margin:0}
.module-docheader .module-docheader-bar-container{display:flex;gap:var(--module-docheader-spacing);flex-wrap:wrap}
+.module-docheader .module-docheader-bar .dropdown-menu{max-height:calc(100vh - 45px - var(--module-docheader-height));overflow-y:auto}
.module-body{padding:var(--module-body-padding)}
.module-body>.container{padding-left:0;padding-right:0}
.module-body .container-small{max-width:768px;margin:0 auto}
--
GitLab