xP: enhance mobile experience

The left column used to jump around, and phones were near-unusable.
This commit is contained in:
2022-09-08 15:53:29 +02:00
parent d7b6967b6f
commit 8c8e06b015
2 changed files with 16 additions and 11 deletions

View File

@@ -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;