Prevent diff statuses from flex shrinking, fix alignment

Summary:
After we added more responsive design in D45671035, some styling seems to have broken and gone unnoticed.

- diff badges are now more more likely to be flex-shrunk by being in a slightly too narrow display that's not narrow enough to fully wrap. We should prevent this text wrap so diff statuses ("landing" etc) never wrap their text
- The uncommit button was top-aligned, but I think center align makes more sense, especially when you see it next to other  elements that should be centered (diff badge row)
- In fixing the uncommit button alignment, it messed up commit avatars. However, this is a good opportunity to fix the commit avatar alignment. I noticed in the past they were sometimes askew anyway.
  - We instead align avatars to be centered as well (top & bottom : auto)
  - This then causes a new bug, where the commit graph line border may poke out above the commit avatar.
  - We can cover this up by re-adding the background perfectly aligned with the border, with the right height for the commit, but only do this for the topmost commit of a stack
  - Lastly, if its the head commit, then we shouldn't cover up with the background color, but rather the blue color used for "You are here" to blend in properly.

All these things taken together seem to give a good look.

Reviewed By: muirdm

Differential Revision: D45785794

fbshipit-source-id: 2ddb3c552a6d183ea5bc20ae0ba3b8aa32ec9845

addons/isl/src/Commit.tsx

@@ -217,7 +217,8 @@ export const Commit = memo(
           'commit' +
           (commit.isHead ? ' head-commit' : '') +
           (commit.successorInfo != null ? ' obsolete' : '') +
-          (isHighlighted ? ' highlighted' : '')
+          (isHighlighted ? ' highlighted' : '') +
+          (isPublic || hasChildren ? '' : ' topmost')
         }
         data-testid={`commit-${commit.hash}`}>
         {!isNonActionable &&

addons/isl/src/CommitTreeList.css

@@ -93,7 +93,8 @@
   vertical-align: top;
   overflow: hidden;
   left: -21px;
-  top: 9px;
+  top: auto;
+  bottom: auto;
   border-radius: 50%;
   height: 14px;
   width: 14px;
@@ -101,6 +102,24 @@
   transition: transform 0.2s, box-shadow 0.3s;
 }
 
+/*
+avatar may render below the top of the border,
+cover up the border that peeks out the top with background color,
+but only on the top commit of a stack
+*/
+.commit.topmost .commit-details:before {
+  left: -15px;
+  top: 0;
+  content: '';
+  width: 2px;
+  height: calc(50%);
+  background-color: var(--background);
+  position: absolute;
+}
+.commit.topmost.head-commit .commit-details:before {
+  background-color: var(--button-primary-hover-background);
+}
+
 .commit.highlighted .commit-avatar {
   box-shadow: 0px 0px 4px 2px var(--focus-border);
   transform: scale(1.2);
@@ -122,10 +141,12 @@
   padding-left: 0;
   margin-left: var(--halfpad);
   position: relative;
+  align-items: center;
 }
 
 .commit-rows.narrow {
   flex-direction: column;
+  align-items: initial;
 }
 
 .commit-details {
@@ -142,6 +163,7 @@
   display: flex;
   gap: var(--pad);
   align-items: center;
+  flex-shrink: 0;
 }
 
 .commit-rows > *:not(.selected-commit-background) {