fix: dashboard variable - ux and usability fixes

SigNoz · Sep 20, 2024 · 2f23c07 · 2f23c07
1 parent 4edc6db
commit 2f23c07
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 12 deletions.
diff --git a/...container/NewDashboard/DashboardVariablesSelection/DashboardVariableSelection.styles.scss b/...container/NewDashboard/DashboardVariablesSelection/DashboardVariableSelection.styles.scss
@@ -43,6 +43,7 @@
 		.ant-select-item {
 			display: flex;
 			align-items: center;
+			gap: 8px;
 		}
 
 		.all-label {
@@ -56,28 +57,25 @@
 		}
 
 		.dropdown-value {
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
+			display: grid;
+			grid-template-columns: 1fr max-content;
 
 			.option-text {
-				max-width: 180px;
 				padding: 0 8px;
 			}
 
 			.toggle-tag-label {
 				padding-left: 8px;
 				right: 40px;
-				font-weight: normal;
-				position: absolute;
+				font-weight: 500;
 			}
 		}
 	}
 }
 
 .dropdown-styles {
 	min-width: 300px;
-	max-width: 350px;
+	max-width: 400px;
 }
 
 .lightMode {

diff --git a/frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.tsx b/frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.tsx
@@ -500,11 +500,17 @@ function VariableItem({
 											{...retProps(option as string)}
 											onClick={(e): void => handleToggle(e as any, option as string)}
 										>
-											<Tooltip title={option.toString()} placement="bottomRight">
-												<Typography.Text ellipsis className="option-text">
-													{option.toString()}
-												</Typography.Text>
-											</Tooltip>
+											<Typography.Text
+												ellipsis={{
+													tooltip: {
+														placement: variableData.multiSelect ? 'top' : 'right',
+														autoAdjustOverflow: true,
+													},
+												}}
+												className="option-text"
+											>
+												{option.toString()}
+											</Typography.Text>
 
 											{variableData.multiSelect &&
 												optionState.tag === option.toString() &&