frontend: better layout

Massimo Melina committed Feb 12, 2023 at 20:39 UTC d61e023250c37b69b89ac98ad1e990bcc98731fb
2 files changed +5 -4
frontend/src/components.ts
+1 -1
@@ -7,7 +7,7 @@ export function Spinner() {
7 return hIcon('spinner', { className:'spinner' })
8 }
9
10 -export function Flex({ gap='1em', vert=false, children=null, props={}, ...rest }) {
10 +export function Flex({ gap='.8em', vert=false, children=null, props={}, ...rest }) {
11 return h('div', {
12 style: {
13 display: 'flex',
frontend/src/index.scss
+4 -3
@@ -48,13 +48,14 @@ body, input {
48 code {
49 font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
50 }
51 -input, select {
51 +input:not([type=checkbox]), select {
52 padding: 0.3em 0.4em;
53 border-radius: 0.5em;
54 background: var(--bg);
55 border-color: var(--mild-contrast);
56 color: var(--good-contrast);
57 max-width: 100%; box-sizing: border-box; // avoid scrolling
58 + width: 100%;
59 }
60 input[type=checkbox] {
61 transform: scale(1.7);
@@ -165,9 +166,9 @@ header {
166 display: flex;
167 align-items: center;
168 gap: .3em;
168 - margin: 0.3em 0 0.1em;
169 + margin: 0.2em 0 0;
170 padding-left: 11px;
170 - & input[type=checkbox] { margin-right: .7em }
171 + & input[type=checkbox] { margin-right: .7em; margin-top: .5em; }
172 }
173
174 ul.dir {