chore: fix review comments

SAP · May 10, 2024 · 1e7a704 · 1e7a704
1 parent 778f6e7
commit 1e7a704
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 13 deletions.
diff --git a/packages/main/src/themes/FormItem.css b/packages/main/src/themes/FormItem.css
@@ -33,7 +33,13 @@
 }
 
 /* S - 1 column */
-@container (max-width: 599px) {
+
+/* 
+ * There are 24px (1.5rem) paddings on the Form itself and when the Form is around 600px,
+ * the actual FormItem is less than 600px and the following container query is applied a bit earlier.
+ * Note: using CSS variable in the container query is not possible.
+ */
+@container (max-width: calc(600px - 1.5rem)) {
 	:host(:not([label-span])) .ui5-form-item-layout {
 		--ui5-form-item-layout: 1fr;
 	}

diff --git a/packages/main/src/themes/FormLabelSpan.css b/packages/main/src/themes/FormLabelSpan.css
@@ -5,7 +5,7 @@
 */
 
 /* S - 12 cells */
-@container (max-width: 599px) {
+@container (max-width: 600px) {
 	:host([label-span-s="1"]) .ui5-form-item,
 	:host([label-span-s="1"]) .ui5-form-group {
 		--ui5-form-item-layout: var(--ui5-form-item-layout-span1);
@@ -72,7 +72,7 @@
 }
 
 /* M  - 4 cells by default, up to 12 cells */
-@container (width > 599px) and (width < 1024px) {
+@container (width > 600px) and (width <= 1024px) {
 	:host([label-span-m="1"]) .ui5-form-item,
 	:host([label-span-m="1"]) .ui5-form-group {
 		--ui5-form-item-layout: var(--ui5-form-item-layout-span1);
@@ -137,7 +137,7 @@
 }
 
 /* L - 4 cells by default, up to 12 cells */
-@container (width > 1023px) and (width < 1439px) {
+@container (width > 1024px) and (width <= 1440px) {
 	:host([label-span-l="1"]) .ui5-form-item,
 	:host([label-span-l="1"]) .ui5-form-group {
 		--ui5-form-item-layout: var(--ui5-form-item-layout-span1);
@@ -202,7 +202,7 @@
 }
 
 /* XL - 4 cells by default, up to 12 cells */
-@container (min-width: 1440px) {
+@container (min-width: 1441px) {
 	:host([label-span-xl="1"]) .ui5-form-item,
 	:host([label-span-xl="1"]) .ui5-form-group {
 		--ui5-form-item-layout: var(--ui5-form-item-layout-span1);

diff --git a/packages/main/src/themes/FormLayout.css b/packages/main/src/themes/FormLayout.css
@@ -2,9 +2,12 @@
 * The Form layout is divided into one or more columns. 
 * XL - max. 4 columns, L - max. 3 columns, M - max. 2 columns and S - 1 column.
 */
+/* 
+* S max-width: 600px - container padding 24px
+*/
 
 /* S - 1 column */
-@container (max-width: 599px) {
+@container (max-width: 600px) {
 	.ui5-form-layout {
 		grid-template-columns: 1fr;
 	}
@@ -18,7 +21,7 @@
 }
 
 /* M  - 1 column by default, up to 2 columns */
-@container (width > 599px) and (width < 1024px) {
+@container (width > 600px) and (width <= 1024px) {
 	.ui5-form-layout {
 		grid-template-columns: 1fr;
 	}
@@ -39,7 +42,7 @@
 }
 
 /* L - 2 columns by default, up to 3 columns */
-@container (width > 1023px) and (width < 1439px) {
+@container (width > 1024px) and (width <= 1440px) {
 
 	.ui5-form-layout {
 		grid-template-columns: repeat(2, 1fr);
@@ -74,7 +77,7 @@
 }
 
 /* XL - 2 columns by default, up to 6 */
-@container (min-width: 1440px) {
+@container (min-width: 1441px) {
 	.ui5-form-layout {
 		grid-template-columns: repeat(2, 1fr);
 	}

diff --git a/packages/main/test/pages/styles/FormLayout.css b/packages/main/test/pages/styles/FormLayout.css
@@ -7,10 +7,10 @@
 }
 .banner {height: 1rem;container-type: inline-size; margin: 1rem 0}
 .banner-inner {height: 1rem;background-color: red;}
-@container (max-width: 599px) {.banner-inner {background-color: darkred;}}
-@container (min-width: 600px) {.banner-inner {background-color: red;}}
-@container (min-width: 1024px) {.banner-inner {background-color: orange;}}
-@container (min-width: 1440px) {.banner-inner {background-color: yellow;}}
+@container (max-width: 600px) {.banner-inner {background-color: darkred;}}
+@container (width > 600px) and (width <= 1024px) {.banner-inner {background-color: red;}}
+@container (width > 1024px) and (width <= 1440px) {.banner-inner {background-color: orange;}}
+@container (min-width: 1441px) {.banner-inner {background-color: yellow;}}
 
 .text {
     display: inline-block;