Fix line wrapping in PR when file name is long (#1012)

web/src/components/DiffViewer/DiffViewer.module.scss

@@ -234,6 +234,10 @@
     box-shadow: 0px 2px 4px 0px rgba(96, 97, 112, 0.16), 0px 0px 1px 0px rgba(40, 41, 61, 0.04);
     z-index: 4;
 
+    .fnamePopover {
+      display: flex;
+    }
+
     .chevron {
       align-self: center;
       height: 24px;
@@ -244,6 +248,7 @@
       align-self: center;
       align-items: center;
       text-align: left;
+      max-width: calc(100vw - 600px);
 
       a {
         font-size: 13px;
@@ -363,4 +368,14 @@
   }
 }
 
+.popover {
+  :global {
+    .bp3-popover-content {
+      padding: var(--spacing-medium);
+      max-width: 700px;
+      word-break: break-all;
+    }
+  }
+}
+
 // TODO: Restyle DiffView to match latest design (https://www.figma.com/file/PgBvi804VdQNyLS8fD9K0p/Code?node-id=9391%3A118114&mode=dev)

web/src/components/DiffViewer/DiffViewer.module.scss.d.ts

@@ -24,8 +24,10 @@ export declare const diffContent: string
 export declare const diffHeader: string
 export declare const fileChanged: string
 export declare const fname: string
+export declare const fnamePopover: string
 export declare const main: string
 export declare const navV2: string
+export declare const popover: string
 export declare const readOnly: string
 export declare const sidebarCollapsed: string
 export declare const standalone: string

web/src/components/DiffViewer/DiffViewer.tsx

@@ -467,7 +467,14 @@ const DiffViewerInternal: React.FC<DiffViewerProps> = ({
               }}
               className={css.chevron}
             />
-            <Text inline className={css.fname}>
+            <Text
+              inline
+              className={css.fname}
+              lineClamp={1}
+              tooltipProps={{
+                portalClassName: css.popover,
+                className: css.fnamePopover
+              }}>
               <Link
                 to={routes.toCODERepository({
                   repoPath: repoMetadata.path as string,

web/src/pages/PullRequest/Conversation/CodeCommentHeader.tsx

@@ -16,7 +16,7 @@
 
 import React, { useEffect } from 'react'
 import { Link } from 'react-router-dom'
-import { Container, Layout } from '@harnessio/uicore'
+import { Container, Layout, Text } from '@harnessio/uicore'
 import { Diff2HtmlUI } from 'diff2html/lib-esm/ui/js/diff2html-ui'
 import * as Diff2Html from 'diff2html'
 import { get } from 'lodash-es'
@@ -70,8 +70,15 @@ export const CodeCommentHeader: React.FC<CodeCommentHeaderProps> = ({
     <Container className={css.snapshot}>
       <Layout.Vertical>
         <Container className={css.title}>
-          <Link
+          <Text
+            inline
             className={css.fname}
+            lineClamp={1}
+            tooltipProps={{
+              portalClassName: css.popover
+            }}>
+            <Link
+              // className={css.fname}
               to={`${routes.toCODEPullRequest({
                 repoPath: repoMetadata?.path as string,
                 pullRequestId: String(pullReqMetadata?.number),
@@ -79,6 +86,7 @@ export const CodeCommentHeader: React.FC<CodeCommentHeaderProps> = ({
               })}?path=${commentItems[0].payload?.code_comment?.path}&commentId=${commentItems[0].payload?.id}`}>
               {commentItems[0].payload?.code_comment?.path}
             </Link>
+          </Text>
         </Container>
         <Container className={css.snapshotContent} id={id} />
       </Layout.Vertical>

web/src/pages/PullRequest/Conversation/Conversation.module.scss

@@ -144,7 +144,7 @@
     border-top-left-radius: var(--radius);
     border-top-right-radius: var(--radius);
 
-    .fname {
+    .fname a {
       font-size: 13px !important;
       font-weight: 600 !important;
       color: var(--grey-900) !important;
@@ -241,3 +241,13 @@
 .commitContainer {
   padding-top: 1px;
 }
+
+.popover {
+  :global {
+    .bp3-popover-content {
+      padding: var(--spacing-medium);
+      max-width: 700px;
+      word-break: break-all;
+    }
+  }
+}

web/src/pages/PullRequest/Conversation/Conversation.module.scss.d.ts

@@ -35,6 +35,7 @@ export declare const menuWrapper: string
 export declare const mergeContainer: string
 export declare const mergedBox: string
 export declare const optionMenuIcon: string
+export declare const popover: string
 export declare const refreshIcon: string
 export declare const repeatBtn: string
 export declare const selectButton: string

web/src/pages/Repository/RepositoryContent/ContentHeader/ContentHeader.tsx

@@ -96,7 +96,7 @@ export function ContentHeader({
           }}
           onCreateBranch={openCreateNewBranchModal}
         />
-        <Container style={{ maxWidth: 'calc(100vw - 750px)' }}>
+        <Container style={{ maxWidth: 'calc(100vw - 800px)' }}>
           <Layout.Horizontal spacing="small">
             <Link
               id="repository-ref-root"
@@ -136,6 +136,7 @@ export function ContentHeader({
             />
             <Button
               text={getString('newFile')}
+              style={{ whiteSpace: 'nowrap' }}
               icon={CodeIcon.Add}
               variation={ButtonVariation.PRIMARY}
               disabled={isRefATag(gitRef) || isGitRev(gitRef)}

web/src/pages/Repository/RepositoryContent/FileContent/GitBlame.tsx

@@ -167,7 +167,7 @@ export const GitBlame: React.FC<
   // TODO: Normalize loading and error rendering when implementing new Design layout
   // that have Blame in a separate tab.
   if (loading) {
-    return <Container padding="xlarge">{getString('loading')}</Container>
+    return <Container padding={{ left: 'small' }}>{getString('loading')}</Container>
   }
 
   if (error) {