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 f4d6610a705186cdec78722b374fa7bfc0c7875b..73241da719b71b74d4f1a42732cb1636079b7dfd 100644 (file)
--- 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%;