Fixes vertical layout issues in graph-next

Author: d13

src/webviews/apps/plus/graph-next/actions/gitActionsButtons.ts

@@ -11,6 +11,12 @@ import '../../../shared/components/overlays/tooltip';
 
 @customElement('gl-git-actions-buttons')
 export class GitActionsButtons extends LitElement {
+	static override styles = css`
+		:host {
+			display: contents;
+		}
+	`;
+
 	@property({ type: Object })
 	branchState?: BranchState;
 

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

@@ -1413,12 +1413,13 @@ web-graph {
 	}
 
 	&__panes {
+		height: 100%;
 	}
 
 	&__graph-pane {
 		display: grid;
 		grid-template-columns: min-content 1fr;
-		grid-template-rows: 1fr;
+		grid-template-rows: auto 1fr;
 		grid-template-areas: 'minimap minimap' 'sidebar graph';
 		height: 100%;
 		overflow: hidden;

src/webviews/apps/plus/graph-next/sidebar/sidebar.ts

@@ -34,6 +34,7 @@ type Counts = Record<IconTypes, number | undefined>;
 export class GlGraphSideBar extends LitElement {
 	static override styles = css`
 		.sidebar {
+			box-sizing: border-box;
 			display: flex;
 			flex-direction: column;
 			align-items: center;
@@ -43,7 +44,7 @@ export class GlGraphSideBar extends LitElement {
 			width: 2.6rem;
 			font-size: 9px;
 			font-weight: 600;
-			height: 100vh;
+			height: 100%;
 			padding: 3rem 0;
 			z-index: 1040;
 		}