FIX - align configurator tables to left

frontend/src/components/AdminConfigValueEditor.vue

@@ -173,6 +173,20 @@ function blankCollectionValue(kind: ValueKind, siblings: unknown[]): unknown {
   return template === undefined ? blankValue(kind) : blankLike(template)
 }
 
+function isStructuredValue(
+  value: unknown,
+  structure?: AdminConfiguratorStructure,
+): boolean {
+  if (
+    structure?.kind === 'list' ||
+    structure?.kind === 'map' ||
+    structure?.kind === 'table' ||
+    structure?.kind === 'vector'
+  )
+    return true
+  return value !== null && typeof value === 'object'
+}
+
 function blankFromStructure(structure: AdminConfiguratorStructure): unknown {
   if (structure.kind === 'optionalString') return ''
   if (structure.kind === 'value') return blankValue(structure.valueType)
@@ -431,6 +445,12 @@ function mapEntryStructure(
         v-for="(row, index) in listValue"
         :key="index"
         class="config-structured-editor__row"
+        :class="{
+          'has-structured-value': isStructuredValue(
+            row,
+            listStructure?.items[index],
+          ),
+        }"
       >
         <span class="config-structured-editor__index">{{ index + 1 }}</span>
         <AdminConfigValueEditor
@@ -496,6 +516,12 @@ function mapEntryStructure(
         v-for="(entry, index) in mapEntries"
         :key="`${entry.keyType}:${entry.key}`"
         class="config-structured-editor__property is-map"
+        :class="{
+          'has-structured-value': isStructuredValue(
+            entry.value,
+            mapEntryStructure(entry),
+          ),
+        }"
       >
         <span class="config-structured-editor__index">{{ index + 1 }}</span>
         <span class="config-structured-editor__map-key">
@@ -541,6 +567,12 @@ function mapEntryStructure(
         v-for="([key, value], index) in tableEntries"
         :key="key"
         class="config-structured-editor__property"
+        :class="{
+          'has-structured-value': isStructuredValue(
+            value,
+            tableFieldStructure(key),
+          ),
+        }"
       >
         <span class="config-structured-editor__index">{{ index + 1 }}</span>
         <strong>{{ key }}</strong>
@@ -789,6 +821,49 @@ function mapEntryStructure(
   grid-template-columns: 24px minmax(105px, 0.42fr) minmax(150px, 1fr) 27px;
 }
 
+.config-structured-editor__row.has-structured-value,
+.config-structured-editor__property.has-structured-value {
+  align-items: start;
+}
+
+.config-structured-editor__row.has-structured-value > .config-structured-editor,
+.config-structured-editor__property.has-structured-value
+  > .config-structured-editor {
+  grid-column: 1 / -1;
+  grid-row: 2;
+  width: calc(100% + 12px);
+  margin-inline: -6px;
+}
+
+.config-structured-editor__row.has-structured-value
+  > .config-structured-editor__index,
+.config-structured-editor__property.has-structured-value
+  > .config-structured-editor__index {
+  grid-column: 1;
+  grid-row: 1;
+  align-self: center;
+}
+
+.config-structured-editor__property.has-structured-value > strong,
+.config-structured-editor__property.is-map.has-structured-value
+  > .config-structured-editor__map-key {
+  grid-column: 2 / 4;
+  grid-row: 1;
+  align-self: center;
+}
+
+.config-structured-editor__row.has-structured-value
+  > .config-structured-editor__remove {
+  grid-column: 3;
+  grid-row: 1;
+}
+
+.config-structured-editor__property.has-structured-value
+  > .config-structured-editor__remove {
+  grid-column: 4;
+  grid-row: 1;
+}
+
 .config-structured-editor__map-key {
   min-width: 0;
   display: grid;

frontend/src/components/AdminPanel.contract.test.ts

@@ -287,6 +287,11 @@ describe('standalone admin panel contracts', () => {
     expect(configuratorValueEditor).toContain('function isFixedTableField(')
     expect(configuratorValueEditor).toContain('function blankCollectionValue(')
     expect(configuratorValueEditor).toContain('function blankFromStructure(')
+    expect(source).toContain("'is-structured': field.type === 'json'")
+    expect(configuratorValueEditor).toContain('function isStructuredValue(')
+    expect(configuratorValueEditor).toContain(
+      '.config-structured-editor__property.has-structured-value',
+    )
     expect(configuratorValueEditor).not.toContain('<textarea')
   })
 })

frontend/src/components/AdminPanel.vue

@@ -1319,6 +1319,7 @@ onBeforeUnmount(() => {
                     :key="configuratorFieldKey(field)"
                     class="admin-panel-config-field"
                     :class="{
+                      'is-structured': field.type === 'json',
                       'is-dirty': Object.prototype.hasOwnProperty.call(
                         configuratorDrafts,
                         configuratorFieldKey(field),
@@ -3575,6 +3576,12 @@ button:disabled {
   background: #121412;
 }
 
+.admin-panel-config-field.is-structured {
+  grid-template-columns: minmax(0, 1fr);
+  align-items: stretch;
+  gap: 7px;
+}
+
 .admin-panel-config-field:hover {
   background: var(--admin-row-hover);
 }