From cee3efb88661f18c23ba5588d828d2a559540b29 Mon Sep 17 00:00:00 2001
From: Shivanand Sonnad <shivanand.sonnad@harness.io>
Date: Mon, 10 Feb 2025 06:25:26 +0000
Subject: [PATCH] feat: [AH-944]: fix UI flickering if upstream proxy length is
 big (#3392)

* feat: [AH-944]: use color from design system
* feat: [AH-944]: fix UI flickering if upstream proxy length is big
* feat: [AH-944]: add ellipsis to upstream proxy name in reorder select
---
 .../ar/components/ReorderSelect/ReorderSelect.module.scss    | 4 ++--
 web/src/ar/components/ReorderSelect/SelectListMenuItem.tsx   | 5 ++++-
 web/src/ar/components/ReorderSelect/SelectedListMenuItem.tsx | 5 ++++-
 .../components/UpstreamProxiesSelect/index.tsx               | 2 +-
 4 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/web/src/ar/components/ReorderSelect/ReorderSelect.module.scss b/web/src/ar/components/ReorderSelect/ReorderSelect.module.scss
index 68ed697c6..9d5c0a498 100644
--- a/web/src/ar/components/ReorderSelect/ReorderSelect.module.scss
+++ b/web/src/ar/components/ReorderSelect/ReorderSelect.module.scss
@@ -47,7 +47,7 @@
     color: var(--black);
 
     .addBtn {
-      display: block !important;
+      display: inline-flex !important;
     }
   }
 }
@@ -57,5 +57,5 @@
   min-height: 20px !important;
   height: 20px !important;
   display: none !important;
-  min-width: 10px !important;
+  min-width: 50px !important;
 }
diff --git a/web/src/ar/components/ReorderSelect/SelectListMenuItem.tsx b/web/src/ar/components/ReorderSelect/SelectListMenuItem.tsx
index 1608d7138..ad6f71305 100644
--- a/web/src/ar/components/ReorderSelect/SelectListMenuItem.tsx
+++ b/web/src/ar/components/ReorderSelect/SelectListMenuItem.tsx
@@ -17,6 +17,7 @@
 import React from 'react'
 import { Menu } from '@blueprintjs/core'
 import { Layout, Text } from '@harnessio/uicore'
+import { Color } from '@harnessio/design-system'
 
 import { useStrings } from '@ar/frameworks/strings'
 import MenuItemAction from './MenuItemAction'
@@ -41,7 +42,9 @@ function SelectListMenuItem(props: SelectListMenuItemProps): JSX.Element {
       disabled={disabled}
       text={
         <Layout.Horizontal flex={{ justifyContent: 'space-between', alignItems: 'center' }}>
-          <Text color="black">{label ? label : getString('na')}</Text>
+          <Text color={Color.GREY_900} lineClamp={1}>
+            {label ? label : getString('na')}
+          </Text>
           {!disabled && <MenuItemAction rightIcon="main-chevron-right" text={getString('add')} />}
         </Layout.Horizontal>
       }
diff --git a/web/src/ar/components/ReorderSelect/SelectedListMenuItem.tsx b/web/src/ar/components/ReorderSelect/SelectedListMenuItem.tsx
index de53ecf92..b76529e9b 100644
--- a/web/src/ar/components/ReorderSelect/SelectedListMenuItem.tsx
+++ b/web/src/ar/components/ReorderSelect/SelectedListMenuItem.tsx
@@ -17,6 +17,7 @@
 import React from 'react'
 import { Expander, Menu } from '@blueprintjs/core'
 import { Layout, Text } from '@harnessio/uicore'
+import { Color } from '@harnessio/design-system'
 import { Icon } from '@harnessio/icons'
 
 import { useStrings } from '@ar/frameworks/strings'
@@ -49,7 +50,9 @@ function SelectedListMenuItem(props: SelectedListMenuItemProps): JSX.Element {
       text={
         <Layout.Horizontal spacing="small" flex={{ justifyContent: 'flex-start', alignItems: 'center' }}>
           {!disabled && <Icon name="drag-handle-vertical" size={12} />}
-          <Text color="black">{label ? label : getString('na')}</Text>
+          <Text lineClamp={1} color={Color.GREY_900}>
+            {label ? label : getString('na')}
+          </Text>
           <Expander />
           {!disabled && (
             <MenuItemAction
diff --git a/web/src/ar/pages/repository-details/components/UpstreamProxiesSelect/index.tsx b/web/src/ar/pages/repository-details/components/UpstreamProxiesSelect/index.tsx
index 2b1911242..94e260e32 100644
--- a/web/src/ar/pages/repository-details/components/UpstreamProxiesSelect/index.tsx
+++ b/web/src/ar/pages/repository-details/components/UpstreamProxiesSelect/index.tsx
@@ -134,7 +134,7 @@ function UpstreamProxiesSelect(props: UpstreamProxiesSelectProps): JSX.Element {
   }
 
   return (
-    <Container>
+    <Container width="100%">
       <ReorderSelect
         className={className}
         items={items}