fix(ui5-flexible-column-layout): adjust grip minimum target size (#10743

)

- Problem:
The grip did not meet the minimum target size requirements.

- Solution:
Add a container div around the grip icon to control the minimum target size, setting it to 1.5rem width and 2rem height.

- Explanation:
Restructured the grip to handle width and height at the div level instead of the icon because the .ui5-icon-root class (which gets automatically applied to icons) sets width and height to 100%. Applying the dimensions directly to the icon would cause it to stretch and fill the entire available space, distorting its proportions.

Fixes: #10669

packages/fiori/src/FlexibleColumnLayoutTemplate.tsx

@@ -100,20 +100,26 @@ function arrowStart(this: FlexibleColumnLayout) {
 
 function gripStart(this: FlexibleColumnLayout) {
 	return (
-		<Icon
-			name={verticalGripIcon}
+		<div
 			class="ui5-fcl-grip ui5-fcl-grip--start"
-			style={{ display: this.showStartSeparatorGrip ? "inline-block" : "none" }}
-		/>
+			style={{ display: this.showStartSeparatorGrip ? "flex" : "none" }}>
+			<Icon
+				name={verticalGripIcon}
+				class="ui5-fcl-grip-icon"
+			/>
+		</div>
 	);
 }
 
 function gripEnd(this: FlexibleColumnLayout) {
 	return (
-		<Icon
-			name={verticalGripIcon}
+		<div
 			class="ui5-fcl-grip ui5-fcl-grip--end"
-			style={{ display: this.showEndSeparatorGrip ? "inline-block" : "none" }}
-		/>
+			style={{ display: this.showEndSeparatorGrip ? "flex" : "none" }}>
+			<Icon
+				name={verticalGripIcon}
+				class="ui5-fcl-grip-icon"
+			/>
+		</div>
 	);
 }

packages/fiori/src/themes/FlexibleColumnLayout.css

@@ -36,6 +36,7 @@
 /* separator */
 .ui5-fcl-separator {
 	display: flex;
+	flex-direction: column;
 	align-items: center;
 	justify-content: center;
 	width: 1rem;
@@ -50,13 +51,20 @@
 	border:var(--_ui5_fcl_separator_focus_border);
 	outline: none;
 }
+
 .ui5-fcl-grip {
 	cursor: col-resize;
 	overflow: visible;
-	z-index: 1;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 1.5rem;
+	height: 2rem;
+	z-index: 10;
+}
+
+.ui5-fcl-grip-icon {
 	color: var(--sapButton_TextColor);
-	padding-top: 0.3125rem;
-	padding-bottom: 0.3125rem;
 }
 
 .ui5-fcl-arrow {
@@ -101,8 +109,8 @@
 }
 
 /* Only apply shorter height when arrow is visible */
-.ui5-fcl-separator:hover .ui5-fcl-arrow + .ui5-fcl-grip::before  {
-	height: calc(40% - 1rem);
+.ui5-fcl-separator:hover .ui5-fcl-arrow + .ui5-fcl-grip::before {
+    height: calc(40% - 1rem);
 }
 
 [aria-hidden] ::slotted([slot="startColumn"]),