From eddbe6e2be8327fa53838024c8def37176090b36 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Le=20Bihan?= <clement.lebihan773@gmail.com>
Date: Wed, 12 Apr 2023 00:17:45 +0200
Subject: [PATCH] fixed responsive issue with an explicit flex-shrink

---
 front/components/GtkUI/RawElement.tsx | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/front/components/GtkUI/RawElement.tsx b/front/components/GtkUI/RawElement.tsx
index d4072b4..64b8a4f 100644
--- a/front/components/GtkUI/RawElement.tsx
+++ b/front/components/GtkUI/RawElement.tsx
@@ -20,7 +20,7 @@ import {
 	ElementDropdownProps,
 	ElementTextProps,
 	ElementToggleProps,
-	ElementRangeProps
+	ElementRangeProps,
 } from "./ElementTypes";
 
 type RawElementProps = {
@@ -40,6 +40,7 @@ export const RawElement = ({ element, isHovered }: RawElementProps) => {
 				height: 45,
 				padding: 15,
 				justifyContent: "space-between",
+				alignContent: "stretch",
 				alignItems: "center",
 				backgroundColor: isHovered ? "#f5f5f5" : undefined,
 			}}
@@ -47,18 +48,19 @@ export const RawElement = ({ element, isHovered }: RawElementProps) => {
 			<Box
 				style={{
 					flexGrow: 1,
+					flexShrink: 100,
 					opacity: disabled ? 0.6 : 1,
 				}}
 			>
 				{icon}
-				<Column>
-					<Text isTruncated maxW={"95%"}>
+				<Column maxW={"90%"}>
+					<Text isTruncated maxW={"100%"}>
 						{title}
 					</Text>
 					{description && (
 						<Text
 							isTruncated
-							maxW={"90%"}
+							maxW={"100%"}
 							style={{
 								opacity: 0.6,
 								fontSize: 12,
@@ -69,10 +71,16 @@ export const RawElement = ({ element, isHovered }: RawElementProps) => {
 					)}
 				</Column>
 			</Box>
-			<Box>
+			<Box
+				style={{
+					flexGrow: 0,
+					flexShrink: 0,
+				}}
+			>
 				<Row
 					style={{
 						alignItems: "center",
+						marginRight: 3,
 					}}
 				>
 					{helperText && (