From e792c48f6deea012302ba9caa9cde9bd0f597b24 Mon Sep 17 00:00:00 2001
From: Rajat Dabade <rajat@signoz.io>
Date: Fri, 29 Dec 2023 16:05:46 +0530
Subject: [PATCH] [Refactor]: css fixes (#4248)

---
 .../RightContainer/Threshold/Threshold.tsx       | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/frontend/src/container/NewWidget/RightContainer/Threshold/Threshold.tsx b/frontend/src/container/NewWidget/RightContainer/Threshold/Threshold.tsx
index b64c5b26e6..a35acabf64 100644
--- a/frontend/src/container/NewWidget/RightContainer/Threshold/Threshold.tsx
+++ b/frontend/src/container/NewWidget/RightContainer/Threshold/Threshold.tsx
@@ -27,6 +27,10 @@ import CustomColor from './CustomColor';
 import ShowCaseValue from './ShowCaseValue';
 import { ThresholdProps } from './types';
 
+const wrapStyle = {
+	flexWrap: 'wrap',
+} as React.CSSProperties;
+
 function Threshold({
 	index,
 	thresholdOperator = '>',
@@ -220,7 +224,7 @@ function Threshold({
 							}
 						>
 							{selectedGraph === PANEL_TYPES.TIME_SERIES && (
-								<>
+								<Space style={wrapStyle}>
 									<Typography.Text>Label</Typography.Text>
 									{isEditMode ? (
 										<Input
@@ -232,7 +236,7 @@ function Threshold({
 									) : (
 										<ShowCaseValue width="180px" value={label || 'none'} />
 									)}
-								</>
+								</Space>
 							)}
 							{(selectedGraph === PANEL_TYPES.VALUE ||
 								selectedGraph === PANEL_TYPES.TABLE) && (
@@ -243,7 +247,7 @@ function Threshold({
 									{isEditMode ? (
 										<>
 											{selectedGraph === PANEL_TYPES.TABLE && (
-												<Space>
+												<Space style={wrapStyle}>
 													<Select
 														style={{
 															minWidth: '150px',
@@ -270,7 +274,7 @@ function Threshold({
 									) : (
 										<>
 											{selectedGraph === PANEL_TYPES.TABLE && (
-												<Space>
+												<Space style={wrapStyle}>
 													<ShowCaseValue width="150px" value={tableSelectedOption} />
 													<Typography.Text>is</Typography.Text>
 												</Space>
@@ -283,7 +287,7 @@ function Threshold({
 						</Space>
 					</div>
 					<div className="threshold-units-selector">
-						<Space>
+						<Space style={wrapStyle}>
 							{isEditMode ? (
 								<InputNumber
 									style={{ backgroundColor }}
@@ -311,7 +315,7 @@ function Threshold({
 					<div>
 						<Space direction="vertical">
 							<Typography.Text>Show with</Typography.Text>
-							<Space>
+							<Space style={wrapStyle}>
 								{isEditMode ? (
 									<>
 										<ColorSelector setColor={setColor} thresholdColor={color} />