Make the chat its own scrollable area

thrimbletrimmer/edit.html

@@ -124,57 +124,59 @@
 				<input type="checkbox" id="enable-chapter-markers" />
 				<label for="enable-chapter-markers">Add chapter markers to video description</label>
 			</div>
-			<div id="range-definitions">
-				<div>
-					<div class="range-definition-times">
-						<input type="text" class="range-definition-start" />
-						<img
-							src="images/pencil.png"
-							alt="Set range start point to current video time"
-							class="range-definition-set-start click"
-						/>
-						<img
-							src="images/play_to.png"
-							alt="Play from start point"
-							class="range-definition-play-start click"
-						/>
-						<div class="range-definition-between-time-gap"></div>
-						<input type="text" class="range-definition-end" />
-						<img
-							src="images/pencil.png"
-							alt="Set range end point to current video time"
-							class="range-definition-set-end click"
-						/>
-						<img
-							src="images/play_to.png"
-							alt="Play from end point"
-							class="range-definition-play-end click"
-						/>
-						<div class="range-definition-icon-gap"></div>
+			<div>
+				<div id="range-definitions">
+					<div>
+						<div class="range-definition-times">
+							<input type="text" class="range-definition-start" />
+							<img
+								src="images/pencil.png"
+								alt="Set range start point to current video time"
+								class="range-definition-set-start click"
+							/>
+							<img
+								src="images/play_to.png"
+								alt="Play from start point"
+								class="range-definition-play-start click"
+							/>
+							<div class="range-definition-between-time-gap"></div>
+							<input type="text" class="range-definition-end" />
+							<img
+								src="images/pencil.png"
+								alt="Set range end point to current video time"
+								class="range-definition-set-end click"
+							/>
+							<img
+								src="images/play_to.png"
+								alt="Play from end point"
+								class="range-definition-play-end click"
+							/>
+							<div class="range-definition-icon-gap"></div>
+							<img
+								src="images/arrow.png"
+								alt="Range affected by keyboard shortcuts"
+								title="Range affected by keyboard shortcuts"
+								class="range-definition-current"
+							/>
+						</div>
+						<div class="range-definition-chapter-markers hidden"></div>
 						<img
-							src="images/arrow.png"
-							alt="Range affected by keyboard shortcuts"
-							title="Range affected by keyboard shortcuts"
-							class="range-definition-current"
+							src="images/plus.png"
+							alt="Add chapter marker"
+							title="Add chapter marker"
+							class="add-range-definition-chapter-marker click hidden"
+							tabindex="0"
 						/>
 					</div>
-					<div class="range-definition-chapter-markers hidden"></div>
-					<img
-						src="images/plus.png"
-						alt="Add chapter marker"
-						title="Add chapter marker"
-						class="add-range-definition-chapter-marker click hidden"
-						tabindex="0"
-					/>
 				</div>
+				<img
+					src="images/plus.png"
+					alt="Add range"
+					id="add-range-definition"
+					class="click"
+					tabindex="0"
+				/>
 			</div>
-			<img
-				src="images/plus.png"
-				alt="Add range"
-				id="add-range-definition"
-				class="click"
-				tabindex="0"
-			/>
 
 			<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>
 
-			<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>
+				<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;