Limit max height of project selector popup

- requested by LaylaTichy on discord

gitbutler-ui/src/lib/components/ProjectsPopup.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import ListItem from './ListItem.svelte';
+	import ScrollableContainer from './ScrollableContainer.svelte';
 	import { ProjectService } from '$lib/backend/projects';
 	import { getContextByClass } from '$lib/utils/context';
 	import { goto } from '$app/navigation';
@@ -26,6 +27,7 @@
 {#if !hidden}
 	<div class="popup" class:collapsed={isNavCollapsed}>
 		{#if $projects$.length > 0}
+			<ScrollableContainer maxHeight="20rem">
 				<div class="popup__projects">
 					{#each $projects$ as project}
 						{@const selected = project.id == $page.params.projectId}
@@ -42,6 +44,7 @@
 						</ListItem>
 					{/each}
 				</div>
+			</ScrollableContainer>
 		{/if}
 		<div class="popup__actions">
 			<ListItem

gitbutler-ui/src/lib/components/ScrollableContainer.svelte

@@ -6,7 +6,7 @@
 	export let contents: HTMLDivElement | undefined = undefined;
 	export let height: string | undefined = undefined;
 	export let fillViewport: boolean = false;
-	export let maxHeight: number | undefined = undefined;
+	export let maxHeight: string | undefined = undefined;
 	export let scrollable: boolean | undefined = undefined;
 
 	export let scrolled = false;
@@ -26,7 +26,6 @@
 		observer = new ResizeObserver(() => {
 			if (viewport && contents) {
 				scrollable = viewport.offsetHeight < contents.offsetHeight;
-				maxHeight = contents.offsetHeight;
 			}
 		});
 		if (viewport) observer.observe(viewport);
@@ -40,6 +39,7 @@
 	class="scrollable"
 	class:scrolled={showBorderWhenScrolled && scrolled}
 	style:flex-grow={wide ? 1 : 0}
+	style:max-height={maxHeight}
 >
 	<div
 		bind:this={viewport}