flatter html

server/static/components.css

@@ -214,13 +214,7 @@
   font-size: 0.875rem;
 }
 
-.metrics-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: var(--space-sm);
-}
-
-.metrics-grid > div {
+.metric {
   background: var(--surface-white);
   border: 1px solid var(--outline-dim);
   border-radius: var(--radius-md);
@@ -230,7 +224,7 @@
   gap: var(--space-xs);
 }
 
-.metrics-grid .label {
+.metric .label {
   font-size: 0.75rem;
   font-weight: 500;
   color: var(--on-surface-dim);
@@ -240,17 +234,17 @@
   gap: var(--space-xs);
 }
 
-.metrics-grid .label .material-symbols-outlined {
+.metric .label .material-symbols-outlined {
   font-size: 1rem;
 }
 
-.metrics-grid .value {
+.metric .value {
   font-size: 1.75rem;
   font-weight: 700;
   line-height: 1.2;
 }
 
-.metrics-grid .change {
+.metric .change {
   font-size: 0.75rem;
   font-weight: 600;
 }
@@ -657,10 +651,6 @@ textarea + label {
   flex-direction: column;
 }
 
-.col-span-2 {
-  grid-column: span 2;
-}
-
 .horizontal-group {
   display: flex;
   gap: var(--space-sm);
@@ -729,27 +719,6 @@ textarea + label {
   color: var(--success-text);
 }
 
-.breakdown-list {
-  list-style: none;
-}
-
-.breakdown-item {
-  display: flex;
-  justify-content: space-between;
-  padding: 0.375rem var(--space-md);
-  margin: 0 calc(-1 * var(--space-md));
-  border-bottom: 1px solid var(--outline-dim);
-}
-
-.breakdown-amount {
-  font-weight: 600;
-}
-
-.breakdown-empty {
-  color: var(--on-surface-dim);
-  font-size: 0.875rem;
-}
-
 .icon {
   width: 2rem;
   height: 2rem;
@@ -770,7 +739,6 @@ textarea + label {
 .text-muted { color: var(--on-surface-dim); font-weight: 400; }
 .font-bold { font-weight: 700; }
 .font-medium { font-weight: 500; }
-.grow { flex: 1; }
 
 .empty-state {
   text-align: center;

server/static/layout.css

@@ -108,11 +108,21 @@ main {
 
 .main-content {
   padding: var(--space-md);
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-md);
+  align-content: start;
+}
+
+.main-content > .horizontal-group {
+  grid-column: 1 / -1;
+}
+
+#orders-results {
+  grid-column: 1 / -1;
   display: flex;
   flex-direction: column;
   gap: var(--space-md);
-  min-height: 0;
-  flex: 1;
 }
 
 @media (max-width: 64em) {

server/static/order.js

@@ -265,7 +265,7 @@ function toggleCakeTagFilter(btn) {
     activeCakeTags.push(tag);
     btn.classList.add('active');
   }
-  var rows = document.querySelectorAll('#cakes-table tbody tr');
+  var rows = document.querySelectorAll('#cakes-card tbody tr');
   for (var i = 0; i < rows.length; i++) {
     if (activeCakeTags.length === 0) { rows[i].classList.remove('hide'); continue; }
     var rowTags = (rows[i].getAttribute('data-tags') || '').split(',');