Prevent window text wrapping at edge of screen

- Before, if you moved a window off the screen to the right it
  would "squish" against the side of the screen, dynamically re-wrapping
  text and making the window change size. It didn't feel like a real OS.
- Window centering also had problems because of windows changing size
  based on their position.
- Disable word wrap by default for windows.
- Leave some windows like About Paint squishy, but improve the layout.

index.html

@@ -701,7 +701,7 @@ <h1>Full Clipboard Support</h1>
 				current_language = language;
 			}
 			function set_language(language) {
-				const $w = $FormToolWindow().title("Reload Required").addClass("dialogue-window");
+				const $w = $FormToolWindow().title("Reload Required").addClass("dialogue-window squish");
 				$w.$main.text("The application needs to reload to change the language.");
 				$w.$main.css("max-width", "600px");
 				$w.$Button(localize("OK"), () => {

src/$ToolWindow.js

@@ -100,15 +100,15 @@ function $ToolWindow($component){
 
 	$w.applyBounds = () => {
 		$w.css({
-			left: Math.max(0, Math.min(innerWidth - $w.width(), $w[0].getBoundingClientRect().left)),
-			top: Math.max(0, Math.min(innerHeight - $w.height(), $w[0].getBoundingClientRect().top)),
+			left: Math.max(0, Math.min(innerWidth - $w.outerWidth(), $w[0].getBoundingClientRect().left)),
+			top: Math.max(0, Math.min(innerHeight - $w.outerHeight(), $w[0].getBoundingClientRect().top)),
 		});
 	};
 
 	$w.center = () => {
 		$w.css({
-			left: (innerWidth - $w.width()) / 2,
-			top: (innerHeight - $w.height()) / 2,
+			left: (innerWidth - $w.outerWidth()) / 2,
+			top: (innerHeight - $w.outerHeight()) / 2,
 		});
 		$w.applyBounds();
 	};

src/edit-colors.js

@@ -211,6 +211,10 @@ function choose_color(initial_color, callback) {
 		$right.show();
 		$w.addClass("defining-custom-colors"); // for mobile layout
 		$define_custom_colors_button.attr("disabled", "disabled");
+		// Windows 98 doesn't really apply bounds here (or when dragging windows off-screen),
+		// but in this case it can cause the whole page to scroll in a way it's not supposed to,
+		// because of the focused input element.
+		$w.applyBounds();
 		// assuming small viewport implies mobile implies an onscreen keyboard,
 		// and that you probably don't want to use the keyboard to choose colors
 		if ($w.width() >= 300) {
@@ -239,6 +243,12 @@ function choose_color(initial_color, callback) {
 	const luminosity_canvas = make_canvas(10, 187);
 	const result_canvas = make_canvas(58, 40);
 	const lum_arrow_canvas = make_canvas(5, 9);
+
+	$(result_canvas).css({
+		position: "absolute",
+		left: 10,
+		top: 198,
+	});
 
 	let mouse_down_on_rainbow_canvas = false;
 	let crosshair_shown_on_rainbow_canvas = false;
@@ -274,7 +284,7 @@ function choose_color(initial_color, callback) {
 			lum_arrow_canvas.ctx.fillRect(x, lum_arrow_canvas.width-x-1, 1, 1+x*2);
 		}
 		lum_arrow_canvas.style.position = "absolute";
-		lum_arrow_canvas.style.right = "7px";
+		lum_arrow_canvas.style.left = "215px";
 		lum_arrow_canvas.style.top = `${3 + ~~((1-lum_percent/100)*luminosity_canvas.height)}px`;
 
 		result_canvas.ctx.fillStyle = get_current_color();

src/functions.js

@@ -862,7 +862,7 @@ function are_you_sure(action, canceled){
 }
 
 function show_error_message(message, error){
-	const $w = $FormToolWindow().title(localize("Paint")).addClass("dialogue-window");
+	const $w = $FormToolWindow().title(localize("Paint")).addClass("dialogue-window squish");
 	$w.$main.text(message);
 	$w.$main.css("max-width", "600px");
 	if(error){
@@ -948,6 +948,7 @@ function show_about_paint(){
 		$about_paint_window.close();
 	}
 	$about_paint_window = $ToolWindow().title(localize("About Paint"));
+	$about_paint_window.addClass("about-paint squish");
 	if (is_pride_month) {
 		$("#paint-32x32").attr("src", "./images/icons/gay-es-paint-32x32-light-outline.png");
 	}
@@ -1050,6 +1051,8 @@ function show_news(){
 		$news_window.close();
 	}
 	$news_window = $ToolWindow().title("Project News");
+	$news_window.addClass("news-window squish");
+
 
 	// const $latest_entries = $latest_news.find(".news-entry");
 	// const latest_entry = $latest_entries[$latest_entries.length - 1];
@@ -1477,6 +1480,7 @@ function show_document_history() {
 	}
 	const $w = $document_history_window = new $ToolWindow();
 	$w.title("Document History");
+	$w.addClass("history-window squish");
 	$w.$content.html(`
 		<div class="history-view"></div>
 	`);

src/manage-storage.js

@@ -38,7 +38,7 @@ function manage_storage(){
 	if($storage_manager){
 		$storage_manager.close();
 	}
-	$storage_manager = $FormToolWindow().title("Manage Storage").addClass("storage-manager dialogue-window");
+	$storage_manager = $FormToolWindow().title("Manage Storage").addClass("storage-manager dialogue-window squish");
 	// @TODO: way to remove all (with confirmation)
 	const $table = $(E("table")).appendTo($storage_manager.$main);
 	const $message = $(E("p")).appendTo($storage_manager.$main).html(

styles/layout.css

@@ -81,11 +81,14 @@ html, body, .jspaint {
 		display: none !important;
 	}
 }
-.window,
-.window-content {
+.window.squish,
+.window.squish .window-content {
 	max-width: 100vw;
 	max-height: 100vh;
 }
+.window:not(.squish) {
+	white-space: nowrap;
+}
 .component-area,
 .tool-window .window-titlebar {
 	-webkit-user-select: none;
@@ -509,7 +512,7 @@ html, body, .jspaint {
 	margin-bottom: 7px;
 }
 .edit-colors-window .luminosity-canvas {
-	margin-left: 16px/*rtl:ignore*/;
+	margin-left: 15px/*rtl:ignore*/;
 }
 .edit-colors-window .result-color-canvas {
 	margin-top: 4px;
@@ -858,6 +861,7 @@ html, body, .jspaint {
 #jspaint-project-name {
 	margin-left: 10px;
 	margin-right: 8px;
+	white-space: nowrap;
 }
 #jspaint-version {
 	/* @TODO: separate into a shared.css? (not really layout!) */
@@ -872,7 +876,7 @@ html, body, .jspaint {
 	margin: auto;
 	margin-right: 40px;
 	width: 150px;
-	height: 2.2em;
+	min-height: 2.2em;
 }
 
 #news {

styles/layout.rtl.css

@@ -81,11 +81,14 @@ html, body, .jspaint {
 		display: none !important;
 	}
 }
-.window,
-.window-content {
+.window.squish,
+.window.squish .window-content {
 	max-width: 100vw;
 	max-height: 100vh;
 }
+.window:not(.squish) {
+	white-space: nowrap;
+}
 .component-area,
 .tool-window .window-titlebar {
 	-webkit-user-select: none;
@@ -509,7 +512,7 @@ html, body, .jspaint {
 	margin-bottom: 7px;
 }
 .edit-colors-window .luminosity-canvas {
-	margin-left: 16px;
+	margin-left: 15px;
 }
 .edit-colors-window .result-color-canvas {
 	margin-top: 4px;
@@ -858,6 +861,7 @@ html, body, .jspaint {
 #jspaint-project-name {
 	margin-right: 10px;
 	margin-left: 8px;
+	white-space: nowrap;
 }
 #jspaint-version {
 	/* @TODO: separate into a shared.css? (not really layout!) */
@@ -872,7 +876,7 @@ html, body, .jspaint {
 	margin: auto;
 	margin-left: 40px;
 	width: 150px;
-	height: 2.2em;
+	min-height: 2.2em;
 }
 
 #news {