web: Fix Sidebar item layout bugs (#4191)

* web: better text truncation on sidebar

* web: fix text truncation on Overview

* web: update Snapshot tests

* web: update comment

* web: update snapshots for Sidebar

Co-authored-by: Han Yu <han@tilt.dev>

web/src/OverviewItemView.tsx

@@ -187,6 +187,8 @@ let RuntimeBoxStack = styled.div`
   flex-direction: column;
   flex-grow: 1;
   flex-shrink: 1;
+  // To truncate long resource names…
+  min-width: 0; // Override default, so width can be less than content
 `
 
 let InnerRuntimeBox = styled.div`
@@ -219,9 +221,6 @@ let OverviewItemNameRoot = styled(OverviewItemText)`
   font-family: ${Font.sansSerif};
   font-weight: 600;
   z-index: 1; // Appear above the .isBuilding gradient
-  // TODO: Allow flex-grow: 1 to work with text truncation
-  // For now, a hack that sacrifices some width but ensures truncation:
-  max-width: 240px;
 `
 
 let OverviewItemNameTruncate = styled.span`

web/src/SidebarIcon.tsx

@@ -46,6 +46,7 @@ let glowDark = keyframes`
 
 let SidebarIconRoot = styled.div`
   display: flex;
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
   width: ${Width.statusIcon}px;

web/src/SidebarItemView.tsx

@@ -97,6 +97,8 @@ let SidebarItemInnerBox = styled.div`
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+  // To truncate long resource names…
+  min-width: 0; // Override default, so width can be less than content
 `
 
 let SidebarItemRuntimeBox = styled.div`
@@ -121,13 +123,15 @@ let SidebarItemBuildBox = styled.div`
 let SidebarItemText = styled.div`
   display: flex;
   align-items: center;
-  flex-grow: 1;
   white-space: nowrap;
   overflow: hidden;
   opacity: ${ColorAlpha.almostOpaque};
-  // TODO: Allow flex-grow: 1 to work with text truncation
-  // For now, a hack that sacrifices some width but ensures truncation:
-  max-width: 140px;
+`
+
+let SidebarPinBox = styled.div`
+  display: flex;
+  align-items: stretch;
+  flex-grow: 1;
 `
 
 let SidebarItemAllRoot = styled(SidebarItemRoot)`
@@ -204,6 +208,7 @@ let SidebarItemTimeAgo = styled.span`
 let SidebarItemActions = styled.div`
   display: flex;
   flex-direction: column;
+  flex-shrink: 0;
 `
 
 export function triggerUpdate(name: string, action: string) {
@@ -343,7 +348,9 @@ export default function SidebarItemView(props: SidebarItemViewProps) {
               alertCount={item.runtimeAlertCount}
             />
             <SidebarItemName name={item.name} />
-            <SidebarPinButton resourceName={item.name} />
+            <SidebarPinBox>
+              <SidebarPinButton resourceName={item.name} />
+            </SidebarPinBox>
             <SidebarItemTimeAgo>
               {hasSuccessfullyDeployed ? timeAgo : "—"}
             </SidebarItemTimeAgo>

web/src/SidebarPinButton.tsx

@@ -10,7 +10,6 @@ let PinButton = styled.button`
   padding: 0;
   background-color: transparent;
   align-items: center;
-  justify-content: flex-start;
   margin-right: 5px;
 `