Make the chat its own scrollable area

thrimbletrimmer/edit.html

@@ -124,6 +124,7 @@
 				<input type="checkbox" id="enable-chapter-markers" />
 				<label for="enable-chapter-markers">Add chapter markers to video description</label>
 			</div>
+			<div>
 				<div id="range-definitions">
 					<div>
 						<div class="range-definition-times">
@@ -175,6 +176,7 @@
 					class="click"
 					tabindex="0"
 				/>
+			</div>
 
 			<div id="video-info">
 				<div id="video-info-editor-notes-container" class="hidden">

thrimbletrimmer/index.html

@@ -125,9 +125,11 @@
 				<progress id="video-controls-playback-position" value="0" class="click"></progress>
 			</div>
 
+			<div>
 				<a href="#" id="download">Download Video</a>
 				<a href="#" id="download-frame">Download Current Frame as Image</a>
 				<a href="#" id="time-converter-link">Convert Times</a>
+			</div>
 			<form id="time-converter" class="hidden">
 				<h2>Time Converter</h2>
 				<div id="time-converter-time-container">

thrimbletrimmer/styles/thrimbletrimmer.css

@@ -6,6 +6,8 @@ body {
 
 	background: #222;
 	color: #fff;
+	height: 100vh;
+	margin: 0;
 }
 
 a {
@@ -66,6 +68,15 @@ a,
 
 #page-container {
 	position: relative;
+	max-height: 100vh;
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-start;
+	align-items: stretch;
+}
+
+#page-container > * {
+	flex: 0 1 auto;
 }
 
 #editor-help {
@@ -81,6 +92,7 @@ a,
 	align-items: flex-end;
 	gap: 5px;
 	margin-bottom: 10px;
+	margin-top: 5px;
 }
 
 #stream-time-settings > div {
@@ -354,6 +366,10 @@ a,
 	width: 200px;
 }
 
+#chat-replay {
+	overflow-y: auto;
+}
+
 .chat-replay-message {
 	display: flex;
 	align-items: baseline;