From a4f60517cef235be69396e9128501eea4861db93 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/+/83009
Tested-by: Jochen Roth <rothjochen@gmail.com>
Tested-by: Oliver Bartsch <bo@cedev.de>
Reviewed-by: Andreas Kienast <a.fernandez@scripting-base.de>
Tested-by: core-ci <typo3@b13.com>
Reviewed-by: Jochen Roth <rothjochen@gmail.com>
Reviewed-by: Oliver Bartsch <bo@cedev.de>
Tested-by: Garvin Hicking <gh@faktor-e.de>
Reviewed-by: Garvin Hicking <gh@faktor-e.de>
Tested-by: Georg Ringer <georg.ringer@gmail.com>
Tested-by: Andreas Kienast <a.fernandez@scripting-base.de>
---
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 04b8556b8237..279a7b1dbd78 100644
--- a/typo3/sysext/backend/Resources/Public/Css/backend.css
+++ b/typo3/sysext/backend/Resources/Public/Css/backend.css
@@ -3034,6 +3034,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