More UI

src/styles.css

@@ -39,18 +39,14 @@
 	min-height: fill;
 }
 
-label .logo {
-	height: 30px;
-}
-
 body {
-	min-height: 98vh;
+	height: 98vh;
 	display: flex;
 	flex-flow: column nowrap;
 	justify-content: space-between;
 }
 
-.nav {
+.nav.h-container {
 	flex: 0;
 	margin: 3mm;
 	padding: 3mm;
@@ -104,6 +100,10 @@ input[type=number] {
 	border: 1px solid #eee;
 }
 
+input[type=radio] {
+	height: 60%;
+}
+
 button:hover {
 	border-color: #396cd8;
 }
@@ -112,6 +112,47 @@ button:active {
 	background-color: #e8e8e8;
 }
 
+#cafe-inventory form {
+	font-size: 7mm;
+	line-height: 11mm;
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(1cm, 1fr) minmax(14ch, 2fr));
+	grid-auto-flow: row;
+	column-gap: 3mm;
+}
+
+.labelled-input {
+	display: grid;
+	grid-column-end: span 2;
+	grid-row-end: span 1;
+	grid-template-columns: subgrid;
+}
+
+.labelled-input :first-child {
+	justify-self: end;
+	align-self: baseline;
+}
+
+label .logo {
+	height: 1.5cm;
+}
+
+#cafe-inventory form button {
+	grid-column-end: -1;
+}
+
+#cafe-voucher {
+	flex: 1;
+}
+
+#cafe-inventory {
+	flex: 1;
+}
+
+#cafe {
+	width: 100%;
+}
+
 @media (prefers-color-scheme: dark) {
 	:root {
 		color: #f6f6f6;