basics of resonsive layout

src/routes/streams/[stream_id]/+page.svelte

@@ -24,15 +24,14 @@
 <style>
 	#streamContainer {
 		display: grid;
-		grid-template-rows: auto 1fr;
-		height: calc(100vh - 1em);
+		grid-template-rows: 1fr auto;
+		height: 100%;
+		gap: 0.5em;
 	}
 
 	#streamPage {
 		grid-row: 1 / 2;
 		overflow: auto;
-		margin-bottom: 0.5em;
-		width: 100%;
 		background: local url('/assets/result.png') top right / 50% no-repeat, rgba(0, 0, 0, 0.8);
 	}
 
@@ -40,5 +39,6 @@
 		grid-row: 2 / 3;
 		margin-left: 1px;
 		margin-right: 1px;
+		height: 100%;
 	}
 </style>

src/routes/streams/[stream_id]/StreamPage.svelte

@@ -57,8 +57,6 @@
 	}
 
 	#table-container {
-		display: grid;
-		grid-template-columns: auto 1fr 1fr;
 		overflow-x: hidden;
 		margin-left: 3%;
 	}