Improve layout when resizing

src-angular/app/components/browse/browse.component.html

@@ -1,7 +1,7 @@
 <app-search-bar />
 <div class="flex flex-1 overflow-hidden">
 	<app-result-table #resultTable (rowClicked)="chartSidebar.onRowClicked($event)" />
-	<div class="basis-1/3 min-w-[310px] max-w-[512px]">
+	<div #chartSidebarDiv>
 		<app-chart-sidebar #chartSidebar />
 	</div>
 </div>

src-angular/app/components/browse/browse.component.ts

@@ -1,9 +1,21 @@
-import { Component, HostBinding } from '@angular/core'
+import { AfterViewInit, Component, ElementRef, HostBinding, ViewChild } from '@angular/core'
 
 @Component({
 	selector: 'app-browse',
 	templateUrl: './browse.component.html',
 })
-export class BrowseComponent {
+export class BrowseComponent implements AfterViewInit {
 	@HostBinding('class.contents') contents = true
+
+	@ViewChild('chartSidebarDiv') chartSidebarDiv: ElementRef<HTMLDivElement>
+
+	ngAfterViewInit(): void {
+		this.adjustSidebarWidth()
+		window.addEventListener('resize', this.adjustSidebarWidth.bind(this))
+	}
+
+	adjustSidebarWidth() {
+		const newWidth = Math.max(310, Math.min(window.innerHeight * 0.4, 512))
+		this.chartSidebarDiv.nativeElement.style.width = `${newWidth}px`
+	}
 }

src-angular/app/components/browse/chart-sidebar/chart-sidebar.component.html

@@ -117,7 +117,7 @@
 					<p class="font-bold whitespace-nowrap">Average NPS: {{ averageNps || 'N/A' }}</p>
 					<p class="font-bold whitespace-nowrap">Maximum NPS: {{ maximumNps }}</p>
 					<p class="font-bold whitespace-nowrap">Note Count: {{ noteCount }}</p>
-					<button class="btn btn-sm btn-neutral my-1 max-w-fit" (click)="previewModal.showModal()">
+					<button class="btn btn-sm btn-neutral my-1 max-w-fit flex-nowrap" (click)="previewModal.showModal()">
 						<i class="bi bi-play text-lg text-neutral-content"></i>
 						Chart Preview
 					</button>