Reduce some padding in sidebar (#7607)

* Reduce some padding in sidebar
Part of #7383

* Better guess for whether labels will fit

Author: alexr00

webviews/components/sidebar.tsx

@@ -240,7 +240,7 @@ export function CollapsibleSidebar(props: PullRequest) {
 	return (
 		<div className="collapsible-sidebar">
 			<div
-				className="collapsible-sidebar-header"
+				className={`collapsible-sidebar-header ${expanded ? 'expanded' : ''}`}
 				onClick={() => setExpanded(e => !e)}
 				tabIndex={0}
 				role="button"
@@ -298,11 +298,13 @@ function CollapsedLabel(props: PullRequest) {
 
 				// Start with all items and reduce until they fit
 				let testCount = items.length;
+				let characterCount = items.reduce((acc, item) => acc + getText(item).length, 0);
 				while (testCount > 0) {
-					const testWidth = testCount * 50 + (testCount < items.length ? overflowTextWidth : 0);
+					const testWidth = ((characterCount * 6) + (14 * testCount)) + (testCount < items.length ? overflowTextWidth : 0);
 					if (testWidth <= containerWidth) {
 						break;
 					}
+					characterCount -= getText(items[testCount - 1]).length;
 					testCount--;
 				}
 
@@ -335,7 +337,7 @@ function CollapsedLabel(props: PullRequest) {
 				);
 			})}
 			{hiddenCount > 0 && (
-				<span className="pill-overflow">+{hiddenCount}</span>
+				<span className="pill-overflow">+{hiddenCount} more</span>
 			)}
 		</span>;
 	};

webviews/editorWebview/index.css

@@ -608,11 +608,11 @@ small-button {
 }
 
 .section {
-	padding-bottom: 24px;
+	padding-bottom: 14px;
 	border-bottom: 1px solid var(--vscode-editorWidget-border);
 	display: flex;
 	flex-direction: column;
-	gap: 12px;
+	gap: 8px;
 }
 
 .section:last-of-type {
@@ -1487,22 +1487,26 @@ svg.octicon path {
 	display: flex;
 	align-items: center;
 	cursor: pointer;
-	padding: 16px 8px 7px;
+	padding: 16px 0px 7px;
 	user-select: none;
 	outline: none;
 }
 
+.collapsible-sidebar-header.expanded {
+	padding: 7px 0px;
+}
+
 .collapsible-sidebar-header:focus {
 	outline: 1px solid var(--vscode-focusBorder);
 }
 
 .collapsible-sidebar-title {
-	font-size: 14px;
+	font-size: 13px;
 	width: 100%;
 }
 
 .collapsible-sidebar-content {
-	padding: 6px 22px;
+	padding-bottom: 6px;
 }
 
 .collapsed-label {
@@ -1587,7 +1591,6 @@ svg.octicon path {
 }
 
 .collapsible-label-see-more {
-	padding-left: 8px;
 	padding-bottom: 8px;
 	display: block;
 	font-size: 12px;