Merge pull request desktop#13272 from desktop/Stop-ugly-jumping-for-l…

…ong-check-run-names Clip long check run names so we don't have wonkiness on hover.
jwbth · Nov 8, 2021 · df785ba · df785ba
2 parents 1413b36 + 49e947c
commit df785ba
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/app/src/ui/check-runs/ci-check-run-list-item.tsx b/app/src/ui/check-runs/ci-check-run-list-item.tsx
@@ -5,6 +5,7 @@ import { getClassNameForCheck, getSymbolForCheck } from '../branches/ci-status'
 import classNames from 'classnames'
 import { CICheckRunLogs } from './ci-check-run-logs'
 import * as OcticonSymbol from '../octicons/octicons.generated'
+import { TooltippedContent } from '../lib/tooltipped-content'
 
 interface ICICheckRunListItemProps {
   /** The check run to display **/
@@ -86,10 +87,16 @@ export class CICheckRunListItem extends React.PureComponent<
             />
           </div>
           <div className="ci-check-list-item-detail">
-            <div className="ci-check-name">{checkRun.name}</div>
-            <div className="ci-check-description" title={checkRun.description}>
-              {checkRun.description}
-            </div>
+            <TooltippedContent
+              className="ci-check-name"
+              tooltip={checkRun.name}
+              onlyWhenOverflowed={true}
+              tagName="div"
+            >
+              {checkRun.name}
+            </TooltippedContent>
+
+            <div className="ci-check-description">{checkRun.description}</div>
           </div>
           <div
             className={classNames('view-on-github', {

diff --git a/app/styles/ui/check-runs/_ci-check-run-list-item.scss b/app/styles/ui/check-runs/_ci-check-run-list-item.scss
@@ -12,10 +12,14 @@
   .ci-check-list-item-detail {
     flex: 1;
     margin: auto;
+    overflow-x: hidden;
   }
 
   .ci-check-name {
     font-weight: var(--font-weight-semibold);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
   }
 
   .ci-check-description {