Added clock time

ui/src/styles.css

@@ -17,6 +17,8 @@
   --app-radius-sm: 4px;
   --app-space: 1rem;
   --app-container: 980px;
+  --control-height: 42px;
+  --button-min-width: 7.25rem;
   --app-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --app-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
   background: var(--app-bg);
@@ -96,12 +98,11 @@ h4 {
   text-transform: uppercase;
 }
 
-button,
 input[type="number"],
 input[type="text"],
 select {
   width: 100%;
-  min-height: 38px;
+  min-height: var(--control-height);
   border: 1px solid var(--app-border);
   background: var(--app-surface-2);
   color: inherit;
@@ -135,6 +136,11 @@ button:focus-visible {
 }
 
 button {
+  width: auto;
+  min-width: var(--button-min-width);
+  min-height: var(--control-height);
+  padding: 0.65rem 1rem;
+  border: 1px solid transparent;
   border-color: transparent;
   background: var(--app-primary);
   color: #fff;
@@ -201,7 +207,7 @@ pre {
 
 .panel__header button {
   width: auto;
-  min-width: 9rem;
+  min-width: var(--button-min-width);
 }
 
 .dashboard-grid,
@@ -459,7 +465,7 @@ pre {
 }
 
 .stack-panel__reload {
-  min-width: 8.25rem;
+  min-width: 8.75rem;
 }
 
 .toolbar__group {
@@ -469,10 +475,16 @@ pre {
 }
 
 .toolbar__inline {
-  grid-template-columns: minmax(0, 1fr) minmax(7.5rem, 0.28fr);
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: stretch;
   gap: 0.5rem;
 }
 
+.toolbar__inline button {
+  width: auto;
+  min-width: var(--button-min-width);
+}
+
 .layer-stack {
   display: grid;
   gap: 0.75rem;
@@ -532,17 +544,21 @@ pre {
 
 .layer-card__actions {
   justify-content: flex-end;
+  align-self: flex-start;
 }
 
 .layer-card__actions button,
 .layer-card__subheader button {
   width: auto;
-  min-width: 5.25rem;
+  min-width: var(--button-min-width);
+  height: var(--control-height);
 }
 
 .icon-button {
-  width: 38px;
-  min-width: 38px;
+  width: var(--control-height);
+  min-width: var(--control-height);
+  height: var(--control-height);
+  min-height: var(--control-height);
   padding: 0;
   display: inline-flex;
   align-items: center;
@@ -585,6 +601,7 @@ pre {
   width: 34px;
   height: 34px;
   min-width: 34px;
+  min-height: 34px;
   padding: 0;
   border-color: transparent;
   background: transparent;
@@ -654,6 +671,7 @@ pre {
 }
 
 .shader-picker__trigger {
+  width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -713,6 +731,7 @@ pre {
 }
 
 .shader-picker__option {
+  width: 100%;
   display: grid;
   gap: 0.25rem;
   min-height: 4.25rem;
@@ -1015,8 +1034,7 @@ pre {
   }
 
   .dashboard-grid,
-  .stack-panel__grid,
-  .toolbar__inline {
+  .stack-panel__grid {
     grid-template-columns: 1fr;
   }
 
@@ -1025,10 +1043,17 @@ pre {
   }
 
   .panel__header button,
-  .toolbar__inline button,
   .stack-panel__reload,
-  .layer-card__actions,
-  .layer-card__actions button,
+  .layer-card__actions button {
+    width: auto;
+  }
+
+  .layer-card__actions {
+    width: auto;
+    align-self: flex-end;
+    justify-content: flex-end;
+  }
+
   .layer-card__field select {
     width: 100%;
   }
@@ -1049,8 +1074,12 @@ pre {
     grid-template-columns: 1fr;
   }
 
+  .toolbar__inline {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+
   .parameter__reset {
-    width: 100%;
+    width: 24px;
   }
 
   .parameter__swatch {