From 6f1c21929b500338f514540adc72f4816a5e31c9 Mon Sep 17 00:00:00 2001
From: Benjamin Butschell <bb@webprofil.at>
Date: Wed, 29 Apr 2020 17:36:18 +0200
Subject: [PATCH] [BUGFIX #280] fix broken Icon and Colour UI in screens
 smaller than 1920px width

---
 Resources/Private/Language/de.locallang.xlf |  4 ++--
 Resources/Private/Language/locallang.xlf    |  4 ++--
 Resources/Public/Styles/styles.css          | 13 +++++++++++--
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/Resources/Private/Language/de.locallang.xlf b/Resources/Private/Language/de.locallang.xlf
index 2f05e35d..2ea5b366 100644
--- a/Resources/Private/Language/de.locallang.xlf
+++ b/Resources/Private/Language/de.locallang.xlf
@@ -592,10 +592,10 @@
 				<target>Element-Key (Kleinbuchstaben)</target>
 			</trans-unit>
 			<trans-unit id="tx_mask.all.icon">
-				<target>FontAwesome-Icon</target>
+				<target>Icon</target>
 			</trans-unit>
 			<trans-unit id="tx_mask.all.color">
-				<target>Farbe (HEX-Code)</target>
+				<target>Farbe</target>
 			</trans-unit>
 			<trans-unit id="tx_mask.all.configure">
 				<target>Konfigurieren</target>
diff --git a/Resources/Private/Language/locallang.xlf b/Resources/Private/Language/locallang.xlf
index 308daf59..87dd117c 100644
--- a/Resources/Private/Language/locallang.xlf
+++ b/Resources/Private/Language/locallang.xlf
@@ -585,10 +585,10 @@
 				<source>Element-key (unique, lowercase)</source>
 			</trans-unit>
 			<trans-unit id="tx_mask.all.icon">
-				<source>FontAwesome-Icon</source>
+				<source>Icon</source>
 			</trans-unit>
 			<trans-unit id="tx_mask.all.color">
-				<source>Colour (HEX-Code)</source>
+				<source>Colour</source>
 			</trans-unit>
 			<trans-unit id="tx_mask.all.configure">
 				<source>Configure</source>
diff --git a/Resources/Public/Styles/styles.css b/Resources/Public/Styles/styles.css
index d7daf27a..39f6fc6f 100644
--- a/Resources/Public/Styles/styles.css
+++ b/Resources/Public/Styles/styles.css
@@ -276,7 +276,7 @@ ul.tx_mask_fieldtypes .tx_mask_fieldcontent_highlight {
 	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
 	height: 32px;
 	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-	width: 100px;
+	width: 85px;
 }
 
 .icons-selector .selector-button {
@@ -298,7 +298,7 @@ ul.tx_mask_fieldtypes .tx_mask_fieldcontent_highlight {
 	float: left;
 	height: 100%;
 	text-align: center;
-	width: 60px;
+	width: 45px;
 }
 
 .icons-selector .selected-icon i {
@@ -847,6 +847,7 @@ img.brand-logo {
 	padding: 11px;
 	border: 1px dashed #bbb;
 }
+
 .icon-size-large .icon-unify {
 	font-size: 35px !important;
 }
@@ -952,3 +953,11 @@ img.brand-logo {
 .tx_mask_field_templates .mask_tooltip:hover .tooltiptext {
 	visibility: visible;
 }
+
+#meta_color {
+	min-width: auto !important;
+}
+
+.form-control-wrap {
+	max-width: none !important;
+}