xP: enhance mobile experience

The left column used to jump around, and phones were near-unusable.

1 files changed, 15 insertions, 11 deletions

diff --git a/xP/public/xP.css b/xP/public/xP.css
index 81025c9..2e9d4b5 100644
--- a/xP/public/xP.css
+++ b/xP/public/xP.css
@@ -2,16 +2,19 @@ body {
 	margin: 0;
 	padding: 0;
 	font-family: sans-serif;
+	font-size: clamp(0.5rem, 2vw, 1rem);
 }
 .xP {
-	height: 100vh;
 	display: flex;
 	flex-direction: column;
 	overflow: hidden;
+	height: 100vh;
+	/* https://caniuse.com/viewport-unit-variants */
+	height: 100dvh;
 }
 
 .title, .status {
-	padding: .05rem .3rem;
+	padding: .05em .3em;
 	background: #eee;
 
 	position: relative;
@@ -52,10 +55,11 @@ body {
 .list {
 	overflow-y: auto;
 	border-right: 1px solid #ccc;
-	min-width: 10rem;
+	min-width: 10em;
+	flex-shrink: 0;
 }
 .item {
-	padding: .05rem .3rem;
+	padding: .05em .3em;
 	cursor: default;
 }
 .item.highlighted {
@@ -89,7 +93,7 @@ body {
 	overflow-y: auto;
 }
 .log {
-	padding: .1rem .3rem;
+	padding: .1em .3em;
 	font-family: monospace;
 	white-space: pre-wrap;
 	overflow-y: auto;
@@ -99,7 +103,7 @@ body {
 	opacity: 50%;
 }
 .date {
-	padding: .3rem;
+	padding: .3em;
 	grid-column: span 2;
 	font-weight: bold;
 }
@@ -109,16 +113,16 @@ body {
 	background: #ff5f00;
 }
 .time {
-	padding: .1rem .3rem;
+	padding: .1em .3em;
 	background: #f8f8f8;
 	color: #bbb;
 	border-right: 1px solid #ccc;
 }
 .mark {
-	padding-right: .3rem;
+	padding-right: .3em;
 	text-align: center;
 	display: inline-block;
-	min-width: 2rem;
+	min-width: 2em;
 }
 .mark.error {
 	color: red;
@@ -133,7 +137,7 @@ body {
 	color: darkred;
 }
 .content {
-	padding: .1rem .3rem;
+	padding: .1em .3em;
 	white-space: pre-wrap;
 }
 .content .b {
@@ -154,7 +158,7 @@ body {
 
 textarea {
 	font: inherit;
-	padding: .05rem .3rem;
+	padding: .05em .3em;
 	margin: 0;
 	border: 2px inset #eee;
 	flex-shrink: 0;