Update sidebar to two column layout (#7605)

Part of #7383

Author: alexr00

webviews/components/sidebar.tsx

@@ -3,7 +3,7 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import React, { useContext, useRef, useState } from 'react';
+import React, { useContext, useEffect, useRef, useState } from 'react';
 import { COPILOT_LOGINS } from '../../src/common/copilot';
 import { gitHubLabelColor } from '../../src/common/utils';
 import { IAccount, IMilestone, IProjectItem, reviewerId, reviewerLabel, ReviewState } from '../../src/github/interface';
@@ -255,7 +255,7 @@ export function CollapsibleSidebar(props: PullRequest) {
 			>
 				<Sidebar {...props} />
 			</div>
-			<a className='collapsible-label-see-more' onClick={() => setExpanded(e => !e)}>{expanded ? 'See less' : 'See more...'}</a>
+			<a className='collapsible-label-see-more' onClick={() => setExpanded(e => !e)}>{expanded ? 'See less' : 'See more'}</a>
 		</div>
 	);
 }
@@ -283,28 +283,61 @@ function CollapsedLabel(props: PullRequest) {
 		getColor: (item: any) => { backgroundColor: string; textColor: string; borderColor: string },
 		getText: (item: any) => string
 	}) => {
-		return <span className="pill-stack">
-			{items.slice(0, 5).map((item, i) => {
+		const containerRef = useRef<HTMLSpanElement>(null);
+		const [visibleCount, setVisibleCount] = useState(items.length);
+
+		useEffect(() => {
+			if (!containerRef.current || items.length === 0) return;
+
+			const resizeObserver = new ResizeObserver(() => {
+				const container = containerRef.current;
+				if (!container) return;
+
+				const containerWidth = container.offsetWidth;
+				const overflowTextWidth = 60; // "+N more" text width estimate
+
+				// Start with all items and reduce until they fit
+				let testCount = items.length;
+				while (testCount > 0) {
+					const testWidth = testCount * 50 + (testCount < items.length ? overflowTextWidth : 0);
+					if (testWidth <= containerWidth) {
+						break;
+					}
+					testCount--;
+				}
+
+				setVisibleCount(Math.max(1, testCount));
+			});
+
+			resizeObserver.observe(containerRef.current);
+			return () => resizeObserver.disconnect();
+		}, [items.length]);
+
+		const visibleItems = items.slice(0, visibleCount);
+		const hiddenCount = items.length - visibleCount;
+
+		return <span className="pill-container" ref={containerRef}>
+			{visibleItems.map((item) => {
 				const color = getColor(item);
-				const pill = (
+				return (
 					<span
 						key={getKey(item)}
-						className="stacked-pill"
+						className="pill-item"
 						style={{
 							backgroundColor: color.backgroundColor,
 							color: color.textColor,
 							borderRadius: '20px',
-							left: `${(i * 20)}px`,
 						}}
 						title={getText(item)}
 					>
 						{getText(item)}
 					</span>
 				);
-				return pill;
 			})}
+			{hiddenCount > 0 && (
+				<span className="pill-overflow">+{hiddenCount}</span>
+			)}
 		</span>;
-
 	};
 
 	// Collect non-empty sections in order, with custom rendering

webviews/editorWebview/index.css

@@ -1222,6 +1222,11 @@ code {
 }
 
 @media (max-width: 768px) {
+	.title {
+		border-bottom: none;
+		padding-bottom: 0px;
+	}
+
 	#app {
 		display: block;
 	}
@@ -1473,16 +1478,16 @@ svg.octicon path {
 }
 
 .collapsible-sidebar {
-	border: 1px solid var(--vscode-editorWidget-border);
-	border-radius: 4px;
+	border-top: 1px solid var(--vscode-editorWidget-border);
+	border-bottom: 1px solid var(--vscode-editorWidget-border);
 	margin-bottom: 16px;
 }
 
 .collapsible-sidebar-header {
 	display: flex;
 	align-items: center;
 	cursor: pointer;
-	padding: 4px 8px;
+	padding: 16px 8px 7px;
 	user-select: none;
 	outline: none;
 }
@@ -1493,33 +1498,81 @@ svg.octicon path {
 
 .collapsible-sidebar-title {
 	font-size: 14px;
+	width: 100%;
 }
 
 .collapsible-sidebar-content {
-	padding: 18px 22px;
+	padding: 6px 22px;
 }
 
 .collapsed-label {
 	gap: 6px;
-	display: flex;
-	flex-direction: column;
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	grid-gap: 6px 12px;
 }
 
 .collapsed-section {
 	gap: 2px;
 	display: inline-flex;
+	align-items: center;
+	min-width: 0;
+	overflow: hidden;
 }
 
 .collapsed-section-label {
 	padding-right: 4px;
+	font-weight: 600;
+	flex-shrink: 0;
+}
+
+.pill-container {
+	display: flex;
+	align-items: center;
+	min-width: 0;
+	flex: 1;
+	flex-wrap: nowrap;
+	overflow: hidden;
+}
+
+.pill-item {
+	flex-shrink: 0;
+	white-space: nowrap;
+	border-radius: 20px;
+	padding: 0px 6px;
+	font-size: 12px;
+	margin-right: 2px;
+}
+
+.pill-overflow {
+	color: var(--vscode-descriptionForeground);
+	font-size: 11px;
+	margin-left: 4px;
+	flex-shrink: 0;
+	white-space: nowrap;
+}
+
+.pill-stack {
+	position: relative;
+	display: inline-block;
+	min-height: 20px;
+	flex-shrink: 1;
+}
+
+.pill-overflow {
+	color: var(--vscode-descriptionForeground);
+	font-size: 12px;
+	margin-left: 4px;
+	flex-shrink: 0;
+	white-space: nowrap;
 }
 
 .collapsed-section .stacked-avatar {
 	position: absolute;
 }
 
 .collapsed-section .stacked-avatar {
-	top: -2px;
+	top: -10px;
 }
 
 .stacked-pill {
@@ -1535,6 +1588,7 @@ svg.octicon path {
 
 .collapsible-label-see-more {
 	padding-left: 8px;
-	padding-bottom: 4px;
+	padding-bottom: 8px;
 	display: block;
+	font-size: 12px;
 }