Fix scrolling border and side bar on Start Menu

classic.css

@@ -14,13 +14,7 @@
 	font-family: "MS Sans Serif", "Segoe UI", sans-serif;
 	font-size: 12px;
 }
-.start-menu::before {
-	content: "";
-	position: absolute;
-	bottom: 0;
-	top: 0;
-	left: 0;
-	width: 21px;
+.start-menu-titlebar {
 	/* background-image: url("images/start-menu-side.png"); */
 	/* background-image: url("images/start-menu-side-98-js.png"); */
 	background-image: url("images/start-menu-side-98-js-alt.png");

index.html

@@ -27,7 +27,9 @@
 			<!-- TODO: tray icons -->
 			<div class="taskbar-time"></div>
 		</div>
-		<div class="start-menu" hidden style="display: none; padding: 15px; padding-left: calc(21px + 15px);">
+		<div class="start-menu" hidden style="display: none;">
+			<div class="start-menu-titlebar"></div>
+			<div class="start-menu-content">
 			Welcome to the Start Menu.
 			<br>Please enjoy your stay.
 			<br><br><br><br><br><br>
@@ -79,6 +81,7 @@ <h2 class="the-thing-heading">Start a program</h2>
 					<a class="back-link" href="#start">Go Back</a>
 				</div>
 			</div>
+			</div>
 		</div>
 		<script src="lib/pep.js"></script>
 		<script src="lib/jquery.min.js"></script>

layout.css

@@ -8,16 +8,24 @@ html, body {
 	overflow: hidden;
 }
 .start-menu {
-	position: absolute !important; /* XXX overriding relative */
-	/* FIXME: :after doesn't scroll; both of these things can be fixed by not using :after and instead border-image */
-	/* Update: TODO: make an inner element scrollable instead to fix the border scrolling and the side image scrolling */
+	position: absolute !important; /* XXX overriding relative; could instead of using :after use border-image */
 	left: 2px;
 	bottom: 26px;
-	width: calc(186px + 21px); /* 186px isn't the proper width measured out, just what I had it before, for the content */
+	width: calc(186px + 21px); /* 186px isn't the proper width measured out, just what I had it before, (for the content, on chrome on windows 10; text wrapping is not cross-platform-consistent) */
+	padding-left: 21px; /* 21px = .start-menu-titlebar */
 	height: 340px;
 	max-height: calc(100vh - 22px); /* based on taskbar height TODO: do this differently, probably in JS, since the taskbar will be resizable (or could be) */
 	box-sizing: border-box;
-	overflow: auto; /* TODO: make an inner element scrollable instead! */
+	display: flex;
+	flex-direction: row;
+}
+.start-menu-titlebar {
+	flex: 0 0 auto;
+	width: 21px;
+}	
+.start-menu-content {
+	overflow: auto;
+	padding: 15px;
 }
 .start-menu ul {
 	list-style: none;