From 11bd10f4552c836ec8d80ba33f6290238b686d92 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Ctan-nhu=E2=80=9D?= <“tan@harness.io”>
Date: Thu, 10 Aug 2023 10:41:25 -0700
Subject: [PATCH] CODE-520: Fixed text wrapping on buttons in Compare page

---
 .../BranchTagSelect/BranchTagSelect.module.scss           | 1 +
 web/src/components/BranchTagSelect/BranchTagSelect.tsx    | 3 ++-
 .../CompareContentHeader/CompareContentHeader.module.scss | 8 ++++++--
 .../CompareContentHeader.module.scss.d.ts                 | 2 +-
 .../Compare/CompareContentHeader/CompareContentHeader.tsx | 6 +++---
 web/src/pages/PullRequest/Conversation/SystemComment.tsx  | 3 +--
 6 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/web/src/components/BranchTagSelect/BranchTagSelect.module.scss b/web/src/components/BranchTagSelect/BranchTagSelect.module.scss
index 4ebf838fa..1eec2ec79 100644
--- a/web/src/components/BranchTagSelect/BranchTagSelect.module.scss
+++ b/web/src/components/BranchTagSelect/BranchTagSelect.module.scss
@@ -8,6 +8,7 @@ html[class=''] {
   --border: 1px solid var(--grey-200) !important;
   --background-color-active: var(--white) !important;
   --box-shadow: none !important;
+  white-space: nowrap !important;
 
   &:active,
   &:hover,
diff --git a/web/src/components/BranchTagSelect/BranchTagSelect.tsx b/web/src/components/BranchTagSelect/BranchTagSelect.tsx
index 0894d8a3c..a0d5d95fe 100644
--- a/web/src/components/BranchTagSelect/BranchTagSelect.tsx
+++ b/web/src/components/BranchTagSelect/BranchTagSelect.tsx
@@ -42,6 +42,7 @@ export const BranchTagSelect: React.FC<BranchTagSelectProps> = ({
   forBranchesOnly,
   labelPrefix,
   placeHolder,
+  className,
   ...props
 }) => {
   const [query, onQuery] = useState('')
@@ -50,7 +51,7 @@ export const BranchTagSelect: React.FC<BranchTagSelectProps> = ({
 
   return (
     <Button
-      className={css.button}
+      className={cx(css.button, className)}
       text={
         text ? (
           labelPrefix ? (
diff --git a/web/src/pages/Compare/CompareContentHeader/CompareContentHeader.module.scss b/web/src/pages/Compare/CompareContentHeader/CompareContentHeader.module.scss
index 907e13580..ec0ad00f5 100644
--- a/web/src/pages/Compare/CompareContentHeader/CompareContentHeader.module.scss
+++ b/web/src/pages/Compare/CompareContentHeader/CompareContentHeader.module.scss
@@ -5,10 +5,14 @@
   > div {
     align-items: center;
   }
+
+  button {
+    white-space: nowrap !important;
+  }
 }
 
-.branchDropdown {
-  background-color: var(--white);
+.branchTagDropdown {
+  --background-color: var(--white) !important;
 }
 
 .mergeText {
diff --git a/web/src/pages/Compare/CompareContentHeader/CompareContentHeader.module.scss.d.ts b/web/src/pages/Compare/CompareContentHeader/CompareContentHeader.module.scss.d.ts
index e0fcb004a..051e591be 100644
--- a/web/src/pages/Compare/CompareContentHeader/CompareContentHeader.module.scss.d.ts
+++ b/web/src/pages/Compare/CompareContentHeader/CompareContentHeader.module.scss.d.ts
@@ -2,7 +2,7 @@
 // this is an auto-generated file
 declare const styles: {
   readonly main: string
-  readonly branchDropdown: string
+  readonly branchTagDropdown: string
   readonly mergeText: string
   readonly popover: string
   readonly menuItem: string
diff --git a/web/src/pages/Compare/CompareContentHeader/CompareContentHeader.tsx b/web/src/pages/Compare/CompareContentHeader/CompareContentHeader.tsx
index 272ad5be3..8d3c9bba2 100644
--- a/web/src/pages/Compare/CompareContentHeader/CompareContentHeader.tsx
+++ b/web/src/pages/Compare/CompareContentHeader/CompareContentHeader.tsx
@@ -63,7 +63,7 @@ export function CompareContentHeader({
           onSelect={onTargetGitRefChanged}
           labelPrefix={getString('prefixBase')}
           placeHolder={getString('selectBranchPlaceHolder')}
-          style={{ '--background-color': 'var(--white)' } as React.CSSProperties}
+          className={css.branchTagDropdown}
         />
         <Icon name="arrow-left" size={14} />
         <BranchTagSelect
@@ -74,7 +74,7 @@ export function CompareContentHeader({
           onSelect={onSourceGitRefChanged}
           labelPrefix={getString('prefixCompare')}
           placeHolder={getString('selectBranchPlaceHolder')}
-          style={{ '--background-color': 'var(--white)' } as React.CSSProperties}
+          className={css.branchTagDropdown}
         />
         {!!targetGitRef && !!sourceGitRef && (
           <MergeableLabel repoMetadata={repoMetadata} targetGitRef={targetGitRef} sourceGitRef={sourceGitRef} />
@@ -146,7 +146,7 @@ const MergeableLabel: React.FC<Pick<CompareContentHeaderProps, 'repoMetadata' |
     <Text
       className={css.mergeText}
       icon={loading ? 'spinner' : mergeable === true ? 'command-artifact-check' : 'cross'}
-      iconProps={{ color }}
+      iconProps={{ color, margin: { right: 'xsmall' } }}
       color={color}>
       {loading ? '' : error ? getErrorMessage(error) : getString(mergeable ? 'pr.ableToMerge' : 'pr.cantMerge')}
     </Text>
diff --git a/web/src/pages/PullRequest/Conversation/SystemComment.tsx b/web/src/pages/PullRequest/Conversation/SystemComment.tsx
index 325bc1264..9064c1366 100644
--- a/web/src/pages/PullRequest/Conversation/SystemComment.tsx
+++ b/web/src/pages/PullRequest/Conversation/SystemComment.tsx
@@ -12,7 +12,6 @@ import {
 } from '@harness/uicore'
 import ReactTimeago from 'react-timeago'
 import { Render } from 'react-jsx-match'
-import { Link } from 'react-router-dom'
 import { CodeIcon, GitInfoProps } from 'utils/GitUtils'
 import { MarkdownViewer } from 'components/MarkdownViewer/MarkdownViewer'
 import { useStrings } from 'framework/strings'
@@ -21,9 +20,9 @@ import type { CommentItem } from 'components/CommentBox/CommentBox'
 import { formatDate, formatTime, PullRequestSection } from 'utils/Utils'
 import { CommentType } from 'components/DiffViewer/DiffViewerUtils'
 import { useAppContext } from 'AppContext'
-import css from './Conversation.module.scss'
 import { CommitActions } from 'components/CommitActions/CommitActions'
 import { PipeSeparator } from 'components/PipeSeparator/PipeSeparator'
+import css from './Conversation.module.scss'
 
 interface SystemCommentProps extends Pick<GitInfoProps, 'pullRequestMetadata'> {
   commentItems: CommentItem<TypesPullReqActivity>[]