From 9ed5fb15f6ee21b82188a5275bf5c65e6f74bc79 Mon Sep 17 00:00:00 2001
From: Benjamin Kott <benjamin.kott@outlook.com>
Date: Tue, 10 Sep 2024 20:09:16 +0200
Subject: [PATCH] [BUGFIX] Correct size of statusreport title on small devices
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Resolves: #104881
Releases: main
Change-Id: I9547fb7c2ef3e1c78856ace3577121388cb7720b
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/85991
Tested-by: Frank Nägler <frank.naegler@typo3.com>
Reviewed-by: Benni Mack <benni@typo3.org>
Reviewed-by: Georg Ringer <georg.ringer@gmail.com>
Tested-by: Benni Mack <benni@typo3.org>
Tested-by: Georg Ringer <georg.ringer@gmail.com>
Reviewed-by: Frank Nägler <frank.naegler@typo3.com>
---
Build/Sources/Sass/component/_statusreport.scss | 6 ++++++
typo3/sysext/backend/Resources/Public/Css/backend.css | 5 +++++
2 files changed, 11 insertions(+)
diff --git a/Build/Sources/Sass/component/_statusreport.scss b/Build/Sources/Sass/component/_statusreport.scss
index d482a5bff8cd..0139a3818986 100644
--- a/Build/Sources/Sass/component/_statusreport.scss
+++ b/Build/Sources/Sass/component/_statusreport.scss
@@ -139,6 +139,12 @@
container-type: inline-size;
}
+@container (max-width: 800px) {
+ .statusreport {
+ grid-template: 'statusreport-indicator statusreport-title statusreport-body' / calc(var(--statusreport-icon-size) * 1.5) 200px auto;
+ }
+}
+
@container (max-width: 500px) {
.statusreport {
grid-template: 'statusreport-indicator statusreport-title' 'statusreport-indicator statusreport-body' / calc(var(--statusreport-icon-size) * 1.5) auto;
diff --git a/typo3/sysext/backend/Resources/Public/Css/backend.css b/typo3/sysext/backend/Resources/Public/Css/backend.css
index 2582be0ec549..1ca7bb4b94c7 100644
--- a/typo3/sysext/backend/Resources/Public/Css/backend.css
+++ b/typo3/sysext/backend/Resources/Public/Css/backend.css
@@ -2890,6 +2890,11 @@ a.dropdown-toggle{text-decoration:none}
container-type: inline-size;
}
+@container (max-width: 800px) {
+ .statusreport {
+ grid-template: "statusreport-indicator statusreport-title statusreport-body"/calc(var(--statusreport-icon-size) * 1.5) 200px auto;
+ }
+}
@container (max-width: 500px) {
.statusreport {
grid-template: "statusreport-indicator statusreport-title" "statusreport-indicator statusreport-body"/calc(var(--statusreport-icon-size) * 1.5) auto;
--
GitLab