Make menu bars wrap to multiple rows

1j01 · Nov 21, 2021 · 4326860 · 4326860
1 parent 70000c0
commit 4326860
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 1 deletion.
diff --git a/build/layout.css b/build/layout.css
diff --git a/build/layout.css.map b/build/layout.css.map
diff --git a/demo/test.js b/demo/test.js
@@ -206,6 +206,8 @@ const menus = {
 			},
 		},
 	],
+	"&Loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong Menu Button Text": [
+	],
 	"&Help": new Array(100).fill(0).map((_, i) => ({
 		item: new Array(i + 3).fill("A").join(""),
 	})),
@@ -215,6 +217,8 @@ $main_test_window = new $Window({
 	title: "Test Station",
 	resizable: false,
 	icons: { 16: "https://win98icons.alexmeub.com/icons/png/application_hammer_grouppol-0.png" },
+	innerWidth: 300,
+	// innerHeight: 600,
 });
 $main_test_window.setMenuBar(new MenuBar(menus));
 $main_test_window.$content.append(`

diff --git a/src/layout.css b/src/layout.css
@@ -57,6 +57,7 @@ body > .window-titlebar {
 .menus {
 	display: flex;
 	flex: 0 0 auto;
+	flex-wrap: wrap;
 }
 .menu-popup {
 	position: absolute;
@@ -65,8 +66,12 @@ body > .window-titlebar {
 .menu-popup-table {
 	border-collapse: collapse;
 }
+.menu-button,
 .menu-item {
 	white-space: nowrap;
+    max-width: 100%;
+    overflow: hidden;
+    /* text-overflow: ellipsis; might imply a dialog */
 }
 .menu-hr {
 	display: block !important;