Truncates branch name inside the action button on the commit graph #3499

Author: nzaytsev

src/webviews/apps/plus/graph/GraphWrapper.tsx

@@ -1107,7 +1107,7 @@ export function GraphWrapper({
 										) : (
 											''
 										)}
-										{branchName}
+										<span className="action-button__truncated">{branchName}</span>
 										<span
 											className="codicon codicon-chevron-down action-button__more"
 											aria-hidden="true"
@@ -1143,7 +1143,7 @@ export function GraphWrapper({
 							</>
 						)}
 					</div>
-					<div className="titlebar__group">
+					<div className="titlebar__group--last">
 						<GlTooltip placement="bottom">
 							<a
 								href={`command:gitlens.showLaunchpad?${encodeURIComponent(

src/webviews/apps/plus/graph/graph.scss

@@ -345,6 +345,12 @@ button:not([disabled]),
 		overflow: hidden;
 	}
 
+	&__truncated {
+		width: 100%;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
 	&.is-ahead {
 		background-color: var(--branch-status-ahead-background);
 
@@ -888,6 +894,13 @@ button:not([disabled]),
 		}
 	}
 
+	&__group--last {
+		display: flex;
+		gap: 0.5rem;
+		flex-shrink: 0;
+		width: auto;
+	}
+
 	&,
 	&__row {
 		justify-content: space-between;
@@ -966,6 +979,7 @@ gl-feature-gate gl-feature-badge {
 	&__header {
 		flex: none;
 		z-index: 101;
+		width: fit-content;
 		position: relative;
 	}