Add product-area presentation to Views

webui/src/styles/views.css

@@ -175,12 +175,59 @@
   resize: vertical;
 }
 
+.views-product-area-section,
 .views-surface-section {
   margin-top: 22px;
   padding-top: 18px;
   border-top: var(--border-line);
 }
 
+.views-product-area-list {
+  overflow: hidden;
+  border: var(--border-line);
+  border-radius: var(--radius-sm);
+}
+
+.views-product-area-row {
+  display: grid;
+  grid-template-columns: minmax(180px, 1fr) minmax(180px, .8fr) auto auto;
+  align-items: center;
+  gap: 12px;
+  min-height: 62px;
+  padding: 8px 10px;
+  border-bottom: var(--border-line);
+}
+
+.views-product-area-row:last-child {
+  border-bottom: 0;
+}
+
+.views-product-area-row:hover {
+  background: var(--hover-tint-soft);
+}
+
+.views-product-area-copy {
+  min-width: 0;
+}
+
+.views-product-area-copy strong,
+.views-product-area-copy small {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.views-product-area-copy small {
+  margin-top: 3px;
+  color: var(--muted);
+}
+
+.views-product-area-order {
+  display: flex;
+  align-items: center;
+}
+
 .views-assignments-section {
   min-width: 0;
   padding-top: 18px;
@@ -337,6 +384,15 @@
     grid-template-columns: 1fr;
   }
 
+  .views-product-area-row {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+
+  .views-product-area-row > input {
+    grid-column: 1 / -1;
+    grid-row: 2;
+  }
+
   .views-editor-heading,
   .views-section-heading,
   .views-stale-surface-warning {