From: Mischa POSLAWSKY <perl@shiar.org>
Date: Fri, 3 Nov 2023 19:08:28 +0000 (+0100)
Subject: keyboard: prevent row key wrapping without hard widths
X-Git-Tag: v1.15~8
X-Git-Url: http://git.shiar.nl/sheet.git/commitdiff_plain/fd25d20e6ae7a77338a781934aa72f04251ee745?hp=aee8ac902453466f305d2169195848348379d0d0

keyboard: prevent row key wrapping without hard widths

Inline cells instead of floating so text wrapping rules are applied.
Fixes unwanted padding, and does not rely on expected layouts and
hardcoded calculations.
---

diff --git a/base.css b/base.css
index f4d6610..73241da 100644
--- a/base.css
+++ b/base.css
@@ -182,20 +182,18 @@ h3      {display: none} /* semantic details (non-css/js) */
 
 table.keys {
 	display: block;
-	width: 82.5em; /* 12 * td(2px + 1px + 6.2em + 1px + 2px) + 8em */
-//	padding-right: 72px;
 	border-spacing: 0;
 	border-collapse: collapse;
-}
-table.keys > * {
-	margin-right: -72px;
+	white-space: nowrap;
+	text-align: left;
 }
 
 /* individual keys */
 
 dl.legend dt,
 .keys td {
-	float: left;
+	display: inline-block;
+	white-space: normal;
 	width: 6.2em;
 	line-height: 2.25ex; /* a little terser (seems to be gecko's default anyway) */
 	height: 4.5ex; /* 2 lines */
@@ -952,9 +950,6 @@ body .magic-perma {
 /* terse optimisation */
 
 @media (min-height: 112ex) and (min-width: 90em) {
-	table.keys {
-		width: auto;
-	}
 	.keys td {
 		padding: 1ex 0 1ex .1em;
 		width: 7em;
@@ -978,9 +973,6 @@ body .magic-perma {
 		color: #FFF;
 	}
 
-	table.keys {
-		width: 62.1em; /* 82.5em - 12 * Δtd(6.2em - 4.5em) */
-	}
 	.row2 {margin-left: 5.3em} /* 7em / Δtd(6em : 4.5em) */
 	.row3 {margin-left: 6em}   /* 8em / Δtd */
 	.row4 {margin-left: 7.5em} /* 10em / Δtd */
@@ -1012,9 +1004,6 @@ body .magic-perma {
 			line-height: 4ex;
 		}
 
-		table.keys {
-			width: 37em; /* (12 * td(3em + 6px) + 8em) * 80% */
-		}
 		.row2 {margin-left: 3.5em} /* 7em / Δtd(6em : 3em) */
 		.row3 {margin-left: 4em}   /* 8em / Δtd */
 		.row4 {margin-left: 5em}   /* 10em / Δtd */
@@ -1052,8 +1041,6 @@ body .magic-perma {
 		margin-top: 1ex;
 		transform: rotate(90deg);
 		transform-origin: top left;
-		width: 68em;
-		height: 37em;
 		margin-left: 40em;
 		margin-bottom: 30em;
 		font-size: 80%;