chore(admin-ui): Standardize form grids

packages/admin-ui/src/lib/catalog/src/components/collection-detail/collection-detail.component.html

@@ -61,13 +61,7 @@
         <vdr-page-block *ngIf="entity$ | async as entity"
             ><nav role="navigation">
                 <ul class="collection-breadcrumbs">
-                    <li
-                        *ngFor="
-                            let breadcrumb of entity.breadcrumbs;
-                            let isFirst = first;
-                            let isLast = last
-                        "
-                    >
+                    <li *ngFor="let breadcrumb of entity.breadcrumbs; let isFirst = first; let isLast = last">
                         <a [routerLink]="['/catalog/collections']" *ngIf="isFirst">{{
                             'catalog.root-collection' | translate
                         }}</a>
@@ -84,33 +78,39 @@
 
         <vdr-page-block>
             <vdr-card>
-                <vdr-form-field [label]="'common.name' | translate" for="name">
-                    <input
-                        id="name"
-                        type="text"
-                        formControlName="name"
-                        [readonly]="!(updatePermission | hasPermission)"
-                        (input)="updateSlug($event.target.value)"
-                    />
-                </vdr-form-field>
-                <vdr-form-field
-                    [label]="'catalog.slug' | translate"
-                    for="slug"
-                    [errors]="{ pattern: ('catalog.slug-pattern-error' | translate) }"
-                >
-                    <input
-                        id="slug"
-                        type="text"
-                        formControlName="slug"
-                        [readonly]="!(updatePermission | hasPermission)"
-                    />
-                </vdr-form-field>
-                <vdr-form-field class="card-span" [label]="'common.description' | translate" for="slug">
-                    <vdr-rich-text-editor
-                        formControlName="description"
-                        [readonly]="!(updatePermission | hasPermission)"
-                    ></vdr-rich-text-editor>
-                </vdr-form-field>
+                <div class="form-grid">
+                    <vdr-form-field [label]="'common.name' | translate" for="name">
+                        <input
+                            id="name"
+                            type="text"
+                            formControlName="name"
+                            [readonly]="!(updatePermission | hasPermission)"
+                            (input)="updateSlug($event.target.value)"
+                        />
+                    </vdr-form-field>
+                    <vdr-form-field
+                        [label]="'catalog.slug' | translate"
+                        for="slug"
+                        [errors]="{ pattern: ('catalog.slug-pattern-error' | translate) }"
+                    >
+                        <input
+                            id="slug"
+                            type="text"
+                            formControlName="slug"
+                            [readonly]="!(updatePermission | hasPermission)"
+                        />
+                    </vdr-form-field>
+                    <vdr-form-field
+                        class="form-grid-span"
+                        [label]="'common.description' | translate"
+                        for="slug"
+                    >
+                        <vdr-rich-text-editor
+                            formControlName="description"
+                            [readonly]="!(updatePermission | hasPermission)"
+                        ></vdr-rich-text-editor>
+                    </vdr-form-field>
+                </div>
             </vdr-card>
             <vdr-card
                 formGroupName="customFields"
@@ -120,7 +120,7 @@
                 <vdr-tabbed-custom-fields
                     entityName="Collection"
                     [customFields]="customFields"
-                    [customFieldsFormGroup]="detailForm.get(['customFields'])"
+                    [customFieldsFormGroup]="detailForm.get('customFields')"
                     [readonly]="!(updatePermission | hasPermission)"
                 ></vdr-tabbed-custom-fields>
             </vdr-card>
@@ -131,7 +131,6 @@
             ></vdr-custom-detail-component-host>
             <vdr-card [title]="'catalog.assets' | translate">
                 <vdr-assets
-                    class="card-span"
                     [assets]="entity?.assets"
                     [featuredAsset]="entity?.featuredAsset"
                     [updatePermissions]="updatePermission"
@@ -140,7 +139,6 @@
             </vdr-card>
             <vdr-card [title]="'catalog.filters' | translate">
                 <vdr-form-field
-                    class="card-span"
                     [label]="'catalog.filter-inheritance' | translate"
                     for="inheritFilters"
                 >
@@ -162,7 +160,7 @@
                         </label>
                     </clr-toggle-wrapper>
                 </vdr-form-field>
-                <div formArrayName="filters" class="card-span">
+                <div formArrayName="filters">
                     <ng-container *ngFor="let filter of filters; index as i; trackBy: trackByFn">
                         <vdr-configurable-input
                             (remove)="removeFilter(i)"
@@ -197,7 +195,6 @@
 
             <vdr-card [title]="'common.contents' | translate" [paddingX]="false">
                 <vdr-collection-contents
-                    class="card-span"
                     [collectionId]="id"
                     [parentId]="parentId$ | async"
                     [updatedFilters]="updatedFilters$ | async"

packages/admin-ui/src/lib/catalog/src/components/facet-detail/facet-detail.component.html

@@ -60,29 +60,31 @@
         </vdr-page-detail-sidebar>
         <vdr-page-block>
             <vdr-card formGroupName="facet">
-                <vdr-form-field [label]="'common.name' | translate" for="name">
-                    <input
-                        id="name"
-                        type="text"
-                        formControlName="name"
-                        [readonly]="!(updatePermission | hasPermission)"
-                        (input)="updateCode(entity?.code, $event.target.value)"
-                    />
-                </vdr-form-field>
-                <vdr-form-field [label]="'common.code' | translate" for="code">
-                    <input
-                        id="code"
-                        type="text"
-                        [readonly]="!(updatePermission | hasPermission)"
-                        formControlName="code"
-                    />
-                </vdr-form-field>
+                <div class="form-grid">
+                    <vdr-form-field [label]="'common.name' | translate" for="name">
+                        <input
+                            id="name"
+                            type="text"
+                            formControlName="name"
+                            [readonly]="!(updatePermission | hasPermission)"
+                            (input)="updateCode(entity?.code, $event.target.value)"
+                        />
+                    </vdr-form-field>
+                    <vdr-form-field [label]="'common.code' | translate" for="code">
+                        <input
+                            id="code"
+                            type="text"
+                            [readonly]="!(updatePermission | hasPermission)"
+                            formControlName="code"
+                        />
+                    </vdr-form-field>
+                </div>
             </vdr-card>
             <vdr-card [title]="'common.custom-fields' | translate" *ngIf="customFields.length">
                 <vdr-tabbed-custom-fields
                     entityName="Facet"
                     [customFields]="customFields"
-                    [customFieldsFormGroup]="detailForm.get(['facet', 'customFields'])"
+                    [customFieldsFormGroup]="detailForm.get('facet.customFields')"
                     [readonly]="!(updatePermission | hasPermission)"
                 />
             </vdr-card>
@@ -99,7 +101,7 @@
                 [paddingX]="false"
             >
                 <table
-                    class="facet-values-list table card-span"
+                    class="facet-values-list table"
                     formArrayName="values"
                     *ngIf="0 < getValuesFormArray().length"
                 >
@@ -170,7 +172,7 @@
                 <div>
                     <button
                         type="button"
-                        class="btn btn-secondary"
+                        class="button m-3"
                         *vdrIfPermissions="['CreateCatalog', 'CreateFacet']"
                         (click)="addFacetValue()"
                     >

packages/admin-ui/src/lib/catalog/src/components/product-detail/product-detail.component.html

@@ -36,8 +36,7 @@
 
 <form class="form" [formGroup]="detailForm">
     <vdr-page-detail-layout>
-        <vdr-page-detail-sidebar
-        >
+        <vdr-page-detail-sidebar>
             <vdr-card>
                 <vdr-form-field [label]="'catalog.visibility' | translate" for="visibility">
                     <clr-toggle-wrapper *vdrIfPermissions="updatePermissions">
@@ -84,11 +83,7 @@
                     </vdr-chip>
                 </div>
                 <div>
-                    <a
-                        [routerLink]="['options']"
-                        class="button"
-                        *vdrIfPermissions="updatePermissions"
-                    >
+                    <a [routerLink]="['options']" class="button" *vdrIfPermissions="updatePermissions">
                         <clr-icon shape="pencil"></clr-icon>
                         {{ 'catalog.edit-options' | translate }}
                     </a>
@@ -122,55 +117,59 @@
         <vdr-page-block>
             <button type="submit" hidden x-data="prevents enter key from triggering other buttons"></button>
             <vdr-card>
-                <vdr-form-field [label]="'catalog.product-name' | translate" for="name">
-                    <input
-                        id="name"
-                        type="text"
-                        formControlName="name"
-                        [readonly]="!(updatePermissions | hasPermission)"
-                        (input)="updateSlug($event.target.value)"
-                    />
-                </vdr-form-field>
-                <div *ngIf="(isNew$ | async) === false && detailForm.get(['name'])?.dirty">
-                    <clr-checkbox-wrapper>
+                <div class="form-grid">
+                    <div>
+                        <vdr-form-field [label]="'catalog.product-name' | translate" for="name">
+                            <input
+                                id="name"
+                                type="text"
+                                formControlName="name"
+                                [readonly]="!(updatePermissions | hasPermission)"
+                                (input)="updateSlug($event.target.value)"
+                            />
+                        </vdr-form-field>
+                        <div *ngIf="(isNew$ | async) === false && detailForm.get(['name'])?.dirty">
+                            <clr-checkbox-wrapper>
+                                <input
+                                    clrCheckbox
+                                    type="checkbox"
+                                    id="auto-update"
+                                    formControlName="autoUpdateVariantNames"
+                                />
+                                <label>{{ 'catalog.auto-update-product-variant-name' | translate }}</label>
+                            </clr-checkbox-wrapper>
+                        </div>
+                    </div>
+                    <vdr-form-field
+                        [label]="'catalog.slug' | translate"
+                        for="slug"
+                        [errors]="{ pattern: 'catalog.slug-pattern-error' | translate }"
+                    >
                         <input
-                            clrCheckbox
-                            type="checkbox"
-                            id="auto-update"
-                            formControlName="autoUpdateVariantNames"
+                            id="slug"
+                            type="text"
+                            formControlName="slug"
+                            [readonly]="!(updatePermissions | hasPermission)"
                         />
-                        <label>{{ 'catalog.auto-update-product-variant-name' | translate }}</label>
-                    </clr-checkbox-wrapper>
+                    </vdr-form-field>
+                    <vdr-form-field
+                        class="form-grid-span"
+                        [label]="'common.description' | translate"
+                        for="slug"
+                        [errors]="{ pattern: 'catalog.slug-pattern-error' | translate }"
+                    >
+                        <vdr-rich-text-editor
+                            formControlName="description"
+                            [readonly]="!(updatePermissions | hasPermission)"
+                        ></vdr-rich-text-editor>
+                    </vdr-form-field>
                 </div>
-                <vdr-form-field
-                    [label]="'catalog.slug' | translate"
-                    for="slug"
-                    [errors]="{ pattern: 'catalog.slug-pattern-error' | translate }"
-                >
-                    <input
-                        id="slug"
-                        type="text"
-                        formControlName="slug"
-                        [readonly]="!(updatePermissions | hasPermission)"
-                    />
-                </vdr-form-field>
-                <vdr-form-field
-                    [label]="'common.description' | translate"
-                    for="slug"
-                    [errors]="{ pattern: 'catalog.slug-pattern-error' | translate }"
-                    class="card-span"
-                >
-                    <vdr-rich-text-editor
-                        formControlName="description"
-                        [readonly]="!(updatePermissions | hasPermission)"
-                    ></vdr-rich-text-editor>
-                </vdr-form-field>
             </vdr-card>
             <vdr-card [title]="'common.custom-fields' | translate" *ngIf="customFields.length">
                 <vdr-tabbed-custom-fields
                     entityName="Product"
                     [customFields]="customFields"
-                    [customFieldsFormGroup]="detailForm.get(['customFields'])"
+                    [customFieldsFormGroup]="detailForm.get('customFields')"
                     [readonly]="!(updatePermissions | hasPermission)"
                 ></vdr-tabbed-custom-fields>
             </vdr-card>
@@ -181,7 +180,6 @@
             ></vdr-custom-detail-component-host>
             <vdr-card [title]="'catalog.assets' | translate">
                 <vdr-assets
-                    class="card-span"
                     [assets]="assetChanges.assets || entity?.assets"
                     [featuredAsset]="assetChanges.featuredAsset || entity?.featuredAsset"
                     [updatePermissions]="updatePermissions"
@@ -190,24 +188,22 @@
             </vdr-card>
 
             <vdr-card [title]="'catalog.product-variants' | translate" [paddingX]="isNew$ | async">
-                <div class="card-span">
-                    <div *ngIf="isNew$ | async; else variantList">
-                        <vdr-generate-product-variants
-                            (variantsChange)="createVariantsConfig = $event"
-                        ></vdr-generate-product-variants>
-                    </div>
-                    <ng-template #variantList>
-                        <vdr-product-variant-list
-                            [productId]="this.id"
-                            [hideLanguageSelect]="true"
-                        ></vdr-product-variant-list>
-                    </ng-template>
-                    <div class="mx-3" *ngIf="(isNew$ | async) === false">
-                        <a class="button" [routerLink]="['manage-variants']">
-                            <clr-icon shape="add-text"></clr-icon>
-                            {{ 'catalog.manage-variants' | translate }}</a
-                        >
-                    </div>
+                <div *ngIf="isNew$ | async; else variantList">
+                    <vdr-generate-product-variants
+                        (variantsChange)="createVariantsConfig = $event"
+                    ></vdr-generate-product-variants>
+                </div>
+                <ng-template #variantList>
+                    <vdr-product-variant-list
+                        [productId]="this.id"
+                        [hideLanguageSelect]="true"
+                    ></vdr-product-variant-list>
+                </ng-template>
+                <div class="mx-3" *ngIf="(isNew$ | async) === false">
+                    <a class="button" [routerLink]="['manage-variants']">
+                        <clr-icon shape="add-text"></clr-icon>
+                        {{ 'catalog.manage-variants' | translate }}</a
+                    >
                 </div>
             </vdr-card>
         </vdr-page-block>

packages/admin-ui/src/lib/catalog/src/components/product-options-editor/product-options-editor.component.html

@@ -41,23 +41,25 @@
                 [formArrayName]="i"
                 [title]="optionGroup.value.code"
             >
-                <vdr-page-entity-info class="card-span" [entity]="optionGroup.value"></vdr-page-entity-info>
-                <vdr-form-field [label]="'common.name' | translate" for="name">
-                    <input
-                        [id]="'name-' + i"
-                        type="text"
-                        formControlName="name"
-                        [readonly]="!(updatePermission | hasPermission)"
-                    />
-                </vdr-form-field>
-                <vdr-form-field [label]="'common.code' | translate" for="code">
-                    <input
-                        [id]="'code-' + i"
-                        type="text"
-                        [readonly]="!(updatePermission | hasPermission)"
-                        formControlName="code"
-                    />
-                </vdr-form-field>
+                <vdr-page-entity-info [entity]="optionGroup.value"></vdr-page-entity-info>
+                <div class="form-grid">
+                    <vdr-form-field [label]="'common.name' | translate" for="name">
+                        <input
+                            [id]="'name-' + i"
+                            type="text"
+                            formControlName="name"
+                            [readonly]="!(updatePermission | hasPermission)"
+                        />
+                    </vdr-form-field>
+                    <vdr-form-field [label]="'common.code' | translate" for="code">
+                        <input
+                            [id]="'code-' + i"
+                            type="text"
+                            [readonly]="!(updatePermission | hasPermission)"
+                            formControlName="code"
+                        />
+                    </vdr-form-field>
+                </div>
                 <ng-container formGroupName="customFields" *ngIf="optionGroupCustomFields.length">
                     <vdr-tabbed-custom-fields
                         entityName="ProductOptionGroup"
@@ -68,7 +70,6 @@
                 </ng-container>
 
                 <vdr-data-table-2
-                    class="card-span"
                     id="edit-options-list"
                     *ngIf="getOptions(optionGroup) as options"
                     [items]="options"

packages/admin-ui/src/lib/catalog/src/components/product-variant-detail/product-variant-detail.component.html

@@ -98,22 +98,24 @@
         <vdr-page-block>
             <button type="submit" hidden x-data="prevents enter key from triggering other buttons"></button>
             <vdr-card>
-                <vdr-form-field [label]="'common.name' | translate" for="name">
-                    <input
-                        id="name"
-                        type="text"
-                        formControlName="name"
-                        [readonly]="!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)"
-                    />
-                </vdr-form-field>
-                <vdr-form-field [label]="'catalog.sku' | translate" for="sku">
-                    <input
-                        id="sku"
-                        type="text"
-                        formControlName="sku"
-                        [readonly]="!(updatePermissions | hasPermission)"
-                    />
-                </vdr-form-field>
+                <div class="form-grid">
+                    <vdr-form-field [label]="'common.name' | translate" for="name">
+                        <input
+                            id="name"
+                            type="text"
+                            formControlName="name"
+                            [readonly]="!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)"
+                        />
+                    </vdr-form-field>
+                    <vdr-form-field [label]="'catalog.sku' | translate" for="sku">
+                        <input
+                            id="sku"
+                            type="text"
+                            formControlName="sku"
+                            [readonly]="!(updatePermissions | hasPermission)"
+                        />
+                    </vdr-form-field>
+                </div>
             </vdr-card>
             <vdr-card [title]="'common.custom-fields' | translate" *ngIf="customFields.length">
                 <vdr-tabbed-custom-fields
@@ -137,114 +139,124 @@
                 />
             </vdr-card>
             <vdr-card [title]="'catalog.price-and-tax' | translate">
-                <vdr-form-field [label]="'catalog.tax-category' | translate" for="taxCategory">
-                    <select name="taxCategory" formControlName="taxCategoryId">
-                        <option *ngFor="let taxCategory of taxCategories$ | async" [value]="taxCategory.id">
-                            {{ taxCategory.name }}
-                        </option>
-                    </select>
-                </vdr-form-field>
-                <vdr-form-field [label]="'catalog.price' | translate" for="sku">
-                    <vdr-currency-input
-                        *ngIf="!(channelPriceIncludesTax$ | async)"
-                        [currencyCode]="variant.currencyCode"
-                        [readonly]="!(updatePermissions | hasPermission)"
-                        formControlName="price"
-                    />
-                    <vdr-currency-input
-                        *ngIf="channelPriceIncludesTax$ | async"
+                <div class="form-grid">
+                    <vdr-form-field [label]="'catalog.tax-category' | translate" for="taxCategory">
+                        <select name="taxCategory" formControlName="taxCategoryId">
+                            <option
+                                *ngFor="let taxCategory of taxCategories$ | async"
+                                [value]="taxCategory.id"
+                            >
+                                {{ taxCategory.name }}
+                            </option>
+                        </select>
+                    </vdr-form-field>
+                    <vdr-form-field [label]="'catalog.price' | translate" for="sku">
+                        <vdr-currency-input
+                            *ngIf="!(channelPriceIncludesTax$ | async)"
+                            [currencyCode]="variant.currencyCode"
+                            [readonly]="!(updatePermissions | hasPermission)"
+                            formControlName="price"
+                        />
+                        <vdr-currency-input
+                            *ngIf="channelPriceIncludesTax$ | async"
+                            [currencyCode]="variant.currencyCode"
+                            [readonly]="!(updatePermissions | hasPermission)"
+                            formControlName="priceWithTax"
+                        />
+                    </vdr-form-field>
+                    <vdr-variant-price-detail
+                        [price]="detailForm.get('price')!.value"
                         [currencyCode]="variant.currencyCode"
-                        [readonly]="!(updatePermissions | hasPermission)"
-                        formControlName="priceWithTax"
+                        [priceIncludesTax]="channelPriceIncludesTax$ | async"
+                        [taxCategoryId]="detailForm.get('taxCategoryId')!.value"
                     />
-                </vdr-form-field>
-                <vdr-variant-price-detail
-                    [price]="detailForm.get('price')!.value"
-                    [currencyCode]="variant.currencyCode"
-                    [priceIncludesTax]="channelPriceIncludesTax$ | async"
-                    [taxCategoryId]="detailForm.get('taxCategoryId')!.value"
-                />
+                </div>
             </vdr-card>
             <vdr-card [title]="'catalog.stock-levels' | translate">
-                <vdr-form-field
-                    for="track-inventory"
-                    [label]="'catalog.track-inventory' | translate"
-                    [tooltip]="'catalog.track-inventory-tooltip' | translate"
-                >
-                    <select
-                        name="track-inventory"
-                        formControlName="trackInventory"
-                        [disabled]="!(updatePermissions | hasPermission)"
+                <div class="form-grid">
+                    <vdr-form-field
+                        for="track-inventory"
+                        [label]="'catalog.track-inventory' | translate"
+                        [tooltip]="'catalog.track-inventory-tooltip' | translate"
                     >
-                        <option [value]="GlobalFlag.TRUE">
-                            {{ 'catalog.track-inventory-true' | translate }}
-                        </option>
-                        <option [value]="GlobalFlag.FALSE">
-                            {{ 'catalog.track-inventory-false' | translate }}
-                        </option>
-                        <option [value]="GlobalFlag.INHERIT">
-                            {{ 'catalog.track-inventory-inherit' | translate }}
-                        </option>
-                    </select>
-                </vdr-form-field>
-
-                <vdr-form-item
-                    [label]="'catalog.out-of-stock-threshold' | translate"
-                    [tooltip]="'catalog.out-of-stock-threshold-tooltip' | translate"
-                >
-                    <input
-                        type="number"
-                        formControlName="outOfStockThreshold"
-                        [readonly]="!(updatePermissions | hasPermission)"
-                        [vdrDisabled]="
-                            detailForm.get('useGlobalOutOfStockThreshold')?.value !== false ||
-                            inventoryIsNotTracked(detailForm)
-                        "
-                    />
-                    <clr-toggle-wrapper>
-                        <input
-                            type="checkbox"
-                            clrToggle
-                            name="useGlobalOutOfStockThreshold"
-                            formControlName="useGlobalOutOfStockThreshold"
-                            [vdrDisabled]="
-                                !(updatePermissions | hasPermission) || inventoryIsNotTracked(detailForm)
-                            "
-                        />
-                        <label
-                            >{{ 'catalog.use-global-value' | translate }} ({{
-                                globalOutOfStockThreshold
-                            }})</label
+                        <select
+                            name="track-inventory"
+                            formControlName="trackInventory"
+                            [disabled]="!(updatePermissions | hasPermission)"
                         >
-                    </clr-toggle-wrapper>
-                </vdr-form-item>
+                            <option [value]="GlobalFlag.TRUE">
+                                {{ 'catalog.track-inventory-true' | translate }}
+                            </option>
+                            <option [value]="GlobalFlag.FALSE">
+                                {{ 'catalog.track-inventory-false' | translate }}
+                            </option>
+                            <option [value]="GlobalFlag.INHERIT">
+                                {{ 'catalog.track-inventory-inherit' | translate }}
+                            </option>
+                        </select>
+                    </vdr-form-field>
 
-                <ng-container *ngFor="let stockLevel of stockLevelsForm.controls" [formGroup]="stockLevel">
-                    <vdr-form-field
-                        [label]="
-                            stockLevel.get('stockLocationName')?.value +
-                            ': ' +
-                            ('catalog.stock-on-hand' | translate)
-                        "
-                        [for]="'stockOnHand_' + stockLevel.get('stockLocationId')?.value"
+                    <vdr-form-item
+                        [label]="'catalog.out-of-stock-threshold' | translate"
+                        [tooltip]="'catalog.out-of-stock-threshold-tooltip' | translate"
                     >
                         <input
-                            [id]="'stockOnHand_' + stockLevel.get('stockLocationId')?.value"
                             type="number"
-                            formControlName="stockOnHand"
+                            formControlName="outOfStockThreshold"
                             [readonly]="!(updatePermissions | hasPermission)"
+                            [vdrDisabled]="
+                                detailForm.get('useGlobalOutOfStockThreshold')?.value !== false ||
+                                inventoryIsNotTracked(detailForm)
+                            "
                         />
-                    </vdr-form-field>
-                    <vdr-form-item
-                        [label]="
-                            stockLevel.get('stockLocationName')?.value +
-                            ': ' +
-                            ('catalog.stock-allocated' | translate)
-                        "
-                    >
-                        {{ stockLevel.get('stockAllocated')?.value }}
+                        <clr-toggle-wrapper>
+                            <input
+                                type="checkbox"
+                                clrToggle
+                                name="useGlobalOutOfStockThreshold"
+                                formControlName="useGlobalOutOfStockThreshold"
+                                [vdrDisabled]="
+                                    !(updatePermissions | hasPermission) || inventoryIsNotTracked(detailForm)
+                                "
+                            />
+                            <label
+                                >{{ 'catalog.use-global-value' | translate }} ({{
+                                    globalOutOfStockThreshold
+                                }})</label
+                            >
+                        </clr-toggle-wrapper>
                     </vdr-form-item>
-                </ng-container>
+
+                    <ng-container
+                        *ngFor="let stockLevel of stockLevelsForm.controls"
+                        [formGroup]="stockLevel"
+                    >
+                        <vdr-form-field
+                            [label]="
+                                stockLevel.get('stockLocationName')?.value +
+                                ': ' +
+                                ('catalog.stock-on-hand' | translate)
+                            "
+                            [for]="'stockOnHand_' + stockLevel.get('stockLocationId')?.value"
+                        >
+                            <input
+                                [id]="'stockOnHand_' + stockLevel.get('stockLocationId')?.value"
+                                type="number"
+                                formControlName="stockOnHand"
+                                [readonly]="!(updatePermissions | hasPermission)"
+                            />
+                        </vdr-form-field>
+                        <vdr-form-item
+                            [label]="
+                                stockLevel.get('stockLocationName')?.value +
+                                ': ' +
+                                ('catalog.stock-allocated' | translate)
+                            "
+                        >
+                            {{ stockLevel.get('stockAllocated')?.value }}
+                        </vdr-form-item>
+                    </ng-container>
+                </div>
             </vdr-card>
         </vdr-page-block>
     </vdr-page-detail-layout>

packages/admin-ui/src/lib/catalog/src/components/product-variants-editor/product-variants-editor.component.html

@@ -1,6 +1,6 @@
 <vdr-page-block>
     <vdr-card>
-        <div *ngFor="let group of optionGroups; index as i" class="option-groups card-span">
+        <div *ngFor="let group of optionGroups; index as i" class="option-groups">
             <vdr-form-field [label]="'catalog.option' | translate">
                 <input clrInput [(ngModel)]="group.name" name="name" [readonly]="!group.isNew" />
             </vdr-form-field>
@@ -15,31 +15,24 @@
                 ></vdr-option-value-input>
             </vdr-form-field>
             <div>
-                <button
-
-                    class="button-small mt-4"
-                    (click)="removeOptionGroup(group)"
-                >
+                <button class="button-small mt-4" (click)="removeOptionGroup(group)">
                     <clr-icon shape="trash"></clr-icon>
                 </button>
             </div>
         </div>
-        <div class="card-span">
-            <button class="btn btn-primary-outline btn-sm" (click)="addOptionGroup()">
-                <clr-icon shape="plus"></clr-icon>
-                {{ 'catalog.create-product-option-group' | translate }}
-            </button>
-        </div>
+        <button class="button mt-1" (click)="addOptionGroup()">
+            <clr-icon shape="plus"></clr-icon>
+            {{ 'catalog.create-product-option-group' | translate }}
+        </button>
     </vdr-card>
     <vdr-card [paddingX]="false">
-        <div class="card-span mx-3">
+        <div class="mx-3">
             <button class="button" (click)="createNewVariant()">
                 <clr-icon shape="plus"></clr-icon>
                 {{ 'catalog.create-product-variant' | translate }}
             </button>
         </div>
         <vdr-data-table-2
-            class="card-span"
             id="manage-product-variant-list"
             [items]="variants$ | async"
             [itemsPerPage]="itemsPerPage"

packages/admin-ui/src/lib/core/src/shared/components/address-form/address-form.component.html

@@ -40,7 +40,6 @@
         <section
             formGroupName="customFields"
             *ngIf="formGroup.get('customFields') as customFieldsGroup"
-            class="card-span"
         >
             <vdr-tabbed-custom-fields
                 entityName="Address"

packages/admin-ui/src/lib/core/src/shared/components/asset-gallery/asset-gallery.component.html

@@ -11,7 +11,7 @@
                 [disabled]="true"
                 [hiddenWhenOff]="true"
             ></vdr-select-toggle>
-            <img class="asset-thumb" [src]="asset | assetPreview: 'thumb'" />
+            <img class="asset-thumb" [src]="asset | assetPreview : 'thumb'" />
         </div>
         <div class="detail">
             <vdr-entity-info
@@ -45,29 +45,31 @@
                     ><clr-icon shape="tag" class="mr2"></clr-icon> {{ tag.value }}</vdr-chip
                 >
                 <div>
-                    <button (click)="previewAsset(lastSelected())" class="btn btn-link">
+                    <a [routerLink]="['./', lastSelected().id]" class="button-ghost">
+                        <clr-icon shape="pencil"></clr-icon> {{ 'common.edit' | translate }}
+                        <clr-icon shape="arrow right"></clr-icon>
+                    </a>
+                </div>
+                <div>
+                    <button (click)="previewAsset(lastSelected())" class="button-small mt-1">
                         <clr-icon shape="eye"></clr-icon> {{ 'asset.preview' | translate }}
                     </button>
                 </div>
-                <div>
-                    <vdr-asset-preview-links class="" [asset]="lastSelected()"></vdr-asset-preview-links>
+                <div *ngIf="canDelete">
+                    <button (click)="deleteAssets.emit(selectionManager.selection)" class="button-small mt-1">
+                        <clr-icon shape="trash" class="is-danger"></clr-icon>
+                        {{ 'common.delete' | translate }}
+                    </button>
                 </div>
-                <div>
-                    <a [routerLink]="['./', lastSelected().id]" class="btn btn-link">
-                        <clr-icon shape="pencil"></clr-icon> {{ 'common.edit' | translate }}
-                    </a>
+                <div class="mt-1">
+                    <vdr-asset-preview-links class="" [asset]="lastSelected()"></vdr-asset-preview-links>
                 </div>
             </ng-container>
-            <div *ngIf="canDelete">
-                <button (click)="deleteAssets.emit(selectionManager.selection)" class="btn btn-link">
-                    <clr-icon shape="trash" class="is-danger"></clr-icon> {{ 'common.delete' | translate }}
-                </button>
-            </div>
         </div>
     </div>
     <div class="card stack" [class.visible]="selectionManager.selection.length > 1"></div>
     <div class="selection-count" [class.visible]="selectionManager.selection.length > 1">
-        {{ 'asset.assets-selected-count' | translate: { count: selectionManager.selection.length } }}
+        {{ 'asset.assets-selected-count' | translate : { count: selectionManager.selection.length } }}
         <ul>
             <li *ngFor="let asset of selectionManager.selection">{{ asset.name }}</li>
         </ul>

packages/admin-ui/src/lib/core/src/shared/components/asset-preview-links/asset-preview-links.component.html

@@ -1,17 +1,20 @@
 <vdr-dropdown>
-    <button class="btn btn-link" vdrDropdownTrigger>
-        <clr-icon shape="link"></clr-icon> {{ 'catalog.asset-preview-links' | translate }}<clr-icon shape="caret" dir="down"></clr-icon>
+    <button class="button" vdrDropdownTrigger>
+        <clr-icon shape="link"></clr-icon> {{ 'catalog.asset-preview-links' | translate
+        }}<clr-icon shape="ellipsis-vertical"></clr-icon>
     </button>
     <vdr-dropdown-menu vdrPosition="bottom-left">
         <a
             *ngFor="let size of sizes"
-            [href]="asset | assetPreview: size"
-            [title]="asset | assetPreview: size"
+            [href]="asset | assetPreview : size"
+            [title]="asset | assetPreview : size"
             target="_blank"
             class="asset-preview-link"
             vdrDropdownItem
         >
-            <vdr-chip><clr-icon shape="link"></clr-icon> {{ 'asset.preview' | translate }}: {{ size }}</vdr-chip>
+            <vdr-chip
+                ><clr-icon shape="link"></clr-icon> {{ 'asset.preview' | translate }}: {{ size }}</vdr-chip
+            >
         </a>
     </vdr-dropdown-menu></vdr-dropdown
 >

packages/admin-ui/src/lib/core/src/shared/components/card/card.component.scss

@@ -38,28 +38,9 @@
     margin-top: calc(var(--space-unit) * 2);
 }
 
-.contents {
+/*.contents {
     display: grid;
     gap: calc(var(--space-unit) * 4);
     grid-template-columns: 1fr 1fr;
+}*/
 
-    ::ng-deep .card-span {
-        grid-column: span 2;
-    }
-}
-
-
-@container (max-width: 700px) {
-    .contents {
-        gap: calc(var(--space-unit) * 2);
-    }
-}
-@container (max-width: 500px) {
-    .contents {
-        grid-template-columns: 1fr;
-
-        ::ng-deep .card-span {
-               grid-column: initial;
-           }
-    }
-}

packages/admin-ui/src/lib/core/src/shared/components/currency-input/currency-input.component.scss

@@ -4,7 +4,6 @@
 }
 
 input {
-    max-width: 96px;
     &[readonly] {
         background-color: transparent;
     }

packages/admin-ui/src/lib/core/src/shared/components/form-field/form-field.component.scss

@@ -33,6 +33,8 @@
     vdr-zone-selector,
     vdr-facet-value-selector,
     vdr-option-value-input,
+    vdr-affixed-input,
+    vdr-currency-input,
     vdr-rich-text-editor {
         width: 100%;
     }

packages/admin-ui/src/lib/core/src/shared/components/tabbed-custom-fields/tabbed-custom-fields.component.html

@@ -3,17 +3,18 @@
         <clr-tab *ngFor="let group of tabbedCustomFields">
             <button clrTabLink>
                 {{
-                group.tabName === defaultTabName
-                    ? ('common.general' | translate)
-                    : (group.tabName | translate)
+                    group.tabName === defaultTabName
+                        ? ('common.general' | translate)
+                        : (group.tabName | translate)
                 }}
             </button>
             <clr-tab-content *clrIfActive>
-                <div class="mt-2">
+                <div class="mt-2 form-grid">
                     <ng-container *ngFor="let customField of group.customFields">
                         <vdr-custom-field-control
                             *ngIf="customFieldIsSet(customField.name)"
                             [entityName]="entityName"
+                            [class.form-grid-span]="componentShouldSpanGrid(customField)"
                             [customFieldsFormGroup]="customFieldsFormGroup"
                             [customField]="customField"
                             [readonly]="readonly"
@@ -27,15 +28,18 @@
     </clr-tabs>
 </ng-container>
 <ng-template #singleGroup>
-    <ng-container *ngFor="let customField of tabbedCustomFields[0]?.customFields">
-        <vdr-custom-field-control
-            *ngIf="customFieldIsSet(customField.name)"
-            [entityName]="entityName"
-            [customFieldsFormGroup]="customFieldsFormGroup"
-            [customField]="customField"
-            [readonly]="readonly"
-            [compact]="compact"
-            [showLabel]="showLabel"
-        ></vdr-custom-field-control>
-    </ng-container>
+    <div class="form-grid">
+        <ng-container *ngFor="let customField of tabbedCustomFields[0]?.customFields">
+            <vdr-custom-field-control
+                *ngIf="customFieldIsSet(customField.name)"
+                [entityName]="entityName"
+                [class.form-grid-span]="componentShouldSpanGrid(customField)"
+                [customFieldsFormGroup]="customFieldsFormGroup"
+                [customField]="customField"
+                [readonly]="readonly"
+                [compact]="compact"
+                [showLabel]="showLabel"
+            ></vdr-custom-field-control>
+        </ng-container>
+    </div>
 </ng-template>

packages/admin-ui/src/lib/core/src/shared/components/tabbed-custom-fields/tabbed-custom-fields.component.ts

@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
 import { AbstractControl, FormGroup } from '@angular/forms';
+import { DefaultFormComponentId } from '@vendure/common/lib/shared-types';
 
 import { CustomFieldConfig } from '../../../common/generated-types';
 import { CustomFieldEntityName } from '../../../providers/custom-field-component/custom-field-component.service';
@@ -30,6 +31,23 @@ export class TabbedCustomFieldsComponent implements OnInit {
         return !!this.customFieldsFormGroup?.get(name);
     }
 
+    componentShouldSpanGrid(customField: CustomFieldConfig): boolean {
+        const smallComponents: DefaultFormComponentId[] = [
+            'boolean-form-input',
+            'currency-form-input',
+            'date-form-input',
+            'number-form-input',
+            'password-form-input',
+            'select-form-input',
+            'text-form-input',
+        ];
+        return (
+            customField.type === 'text' ||
+            customField.type === 'localeText' ||
+            (customField.ui?.component && !smallComponents.includes(customField.ui?.component))
+        );
+    }
+
     private groupByTabs(customFieldConfigs: CustomFieldConfig[]): GroupedCustomFields {
         const tabMap = new Map<string, CustomFieldConfig[]>();
         for (const field of customFieldConfigs) {

packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/relation-form-input/relation-card/relation-card.component.html

@@ -7,10 +7,10 @@
             <div class="pl3">
                 <ng-container *ngTemplateOutlet="detailTemplate; context: { entity: entity }"></ng-container>
             </div>
-            <button *ngIf="!readonly" class="btn btn-sm btn-link" (click)="select.emit()">
+            <button *ngIf="!readonly" class="button-small m-1" (click)="select.emit()">
                 <clr-icon shape="link"></clr-icon> {{ 'common.change-selection' | translate }}
             </button>
-            <button *ngIf="!readonly && removable" class="btn btn-sm btn-link" (click)="remove.emit()">
+            <button *ngIf="!readonly && removable" class="button-small m-1" (click)="remove.emit()">
                 <clr-icon shape="times"></clr-icon> {{ 'common.remove' | translate }}
             </button>
         </div>
@@ -23,7 +23,7 @@
         </div>
         <div class="detail">
             <div class="pl3 not-set">{{ 'common.not-set' | translate }}</div>
-            <button *ngIf="!readonly" class="btn btn-sm btn-link" (click)="select.emit()">
+            <button *ngIf="!readonly" class="button-small m-1" (click)="select.emit()">
                 <clr-icon shape="link"></clr-icon> {{ selectLabel }}
             </button>
         </div>

packages/admin-ui/src/lib/customer/src/components/customer-detail/customer-detail.component.html

@@ -51,11 +51,13 @@
                 >
             </div>
             <ng-template #noGroups>
+                <span class="color-weight-400">
                 {{ 'customer.not-a-member-of-any-groups' | translate }}
+                </span>
             </ng-template>
             <div>
                 <button
-                    class="btn btn-sm btn-secondary"
+                    class="button mt-1"
                     (click)="addToGroup()"
                     *vdrIfPermissions="'UpdateCustomerGroup'"
                 >
@@ -71,49 +73,51 @@
     <vdr-page-block>
         <form class="form" [formGroup]="detailForm.get('customer')">
             <vdr-card>
-                <vdr-form-field
-                    [label]="'customer.title' | translate"
-                    for="title"
-                    [readOnlyToggle]="!(isNew$ | async)"
-                >
-                    <input id="title" type="text" formControlName="title" />
-                </vdr-form-field>
-                <div><!-- spacer --></div>
-                <vdr-form-field
-                    [label]="'customer.first-name' | translate"
-                    for="firstName"
-                    [readOnlyToggle]="!(isNew$ | async)"
-                >
-                    <input id="firstName" type="text" formControlName="firstName" />
-                </vdr-form-field>
-                <vdr-form-field
-                    [label]="'customer.last-name' | translate"
-                    for="lastName"
-                    [readOnlyToggle]="!(isNew$ | async)"
-                >
-                    <input id="lastName" type="text" formControlName="lastName" />
-                </vdr-form-field>
-                <vdr-form-field
-                    [label]="'customer.email-address' | translate"
-                    for="emailAddress"
-                    [readOnlyToggle]="!(isNew$ | async)"
-                >
-                    <input id="emailAddress" type="text" formControlName="emailAddress" />
-                </vdr-form-field>
-                <vdr-form-field
-                    [label]="'customer.phone-number' | translate"
-                    for="phoneNumber"
-                    [readOnlyToggle]="!(isNew$ | async)"
-                >
-                    <input id="phoneNumber" type="text" formControlName="phoneNumber" />
-                </vdr-form-field>
-                <vdr-form-field
-                    [label]="'customer.password' | translate"
-                    for="password"
-                    *ngIf="isNew$ | async"
-                >
-                    <input id="password" type="password" formControlName="password" />
-                </vdr-form-field>
+                <div class="form-grid">
+                    <vdr-form-field
+                        [label]="'customer.title' | translate"
+                        for="title"
+                        [readOnlyToggle]="!(isNew$ | async)"
+                    >
+                        <input id="title" type="text" formControlName="title" />
+                    </vdr-form-field>
+                    <div><!-- spacer --></div>
+                    <vdr-form-field
+                        [label]="'customer.first-name' | translate"
+                        for="firstName"
+                        [readOnlyToggle]="!(isNew$ | async)"
+                    >
+                        <input id="firstName" type="text" formControlName="firstName" />
+                    </vdr-form-field>
+                    <vdr-form-field
+                        [label]="'customer.last-name' | translate"
+                        for="lastName"
+                        [readOnlyToggle]="!(isNew$ | async)"
+                    >
+                        <input id="lastName" type="text" formControlName="lastName" />
+                    </vdr-form-field>
+                    <vdr-form-field
+                        [label]="'customer.email-address' | translate"
+                        for="emailAddress"
+                        [readOnlyToggle]="!(isNew$ | async)"
+                    >
+                        <input id="emailAddress" type="text" formControlName="emailAddress" />
+                    </vdr-form-field>
+                    <vdr-form-field
+                        [label]="'customer.phone-number' | translate"
+                        for="phoneNumber"
+                        [readOnlyToggle]="!(isNew$ | async)"
+                    >
+                        <input id="phoneNumber" type="text" formControlName="phoneNumber" />
+                    </vdr-form-field>
+                    <vdr-form-field
+                        [label]="'customer.password' | translate"
+                        for="password"
+                        *ngIf="isNew$ | async"
+                    >
+                        <input id="password" type="password" formControlName="password" />
+                    </vdr-form-field>
+                </div>
             </vdr-card>
             <vdr-card
                 formGroupName="customFields"
@@ -123,7 +127,7 @@
                 <vdr-tabbed-custom-fields
                     entityName="Customer"
                     [customFields]="customFields"
-                    [customFieldsFormGroup]="detailForm.get(['customer', 'customFields'])"
+                    [customFieldsFormGroup]="detailForm.get('customer.customFields')"
                 ></vdr-tabbed-custom-fields>
             </vdr-card>
         </form>
@@ -150,20 +154,13 @@
                     (setAsDefaultShipping)="setDefaultShippingAddressId($event)"
                     (deleteAddress)="toggleDeleteAddress($event)"
                 ></vdr-address-card>
-                <div class="card-span">
-                    <button
-                        class="btn btn-secondary"
-                        (click)="addAddress()"
-                        *vdrIfPermissions="'UpdateCustomer'"
-                    >
-                        <clr-icon shape="plus"></clr-icon>
-                        {{ 'customer.create-new-address' | translate }}
-                    </button>
-                </div>
+                <button class="btn btn-secondary" (click)="addAddress()" *vdrIfPermissions="'UpdateCustomer'">
+                    <clr-icon shape="plus"></clr-icon>
+                    {{ 'customer.create-new-address' | translate }}
+                </button>
             </vdr-card>
             <vdr-card [title]="'customer.orders' | translate" [paddingX]="false">
                 <vdr-data-table-2
-                    class="card-span"
                     id="customer-order-list"
                     [items]="orders$ | async"
                     [itemsPerPage]="ordersPerPage"
@@ -216,13 +213,14 @@
                             {{ order.orderPlacedAt | localeDate : 'short' }}
                         </ng-template>
                     </vdr-dt2-column>
-                    <vdr-dt2-custom-field-column *ngFor="let customField of customFields" [customField]="customField" />
+                    <vdr-dt2-custom-field-column
+                        *ngFor="let customField of customFields"
+                        [customField]="customField"
+                    />
                 </vdr-data-table-2>
-
             </vdr-card>
             <vdr-card [title]="'customer.customer-history' | translate">
                 <vdr-customer-history
-                    class="card-span"
                     [customer]="entity$ | async"
                     [history]="history$ | async"
                     (addNote)="addNoteToCustomer($event)"

packages/admin-ui/src/lib/customer/src/components/customer-group-detail/customer-group-detail.component.html

@@ -34,12 +34,11 @@
         </vdr-page-detail-sidebar>
         <vdr-page-block>
             <vdr-card>
-                <vdr-form-field
-                    [label]="'common.name' | translate"
-                    for="name"
-                >
-                    <input id="name" type="text" formControlName="name" />
-                </vdr-form-field>
+                <div class="form-grid">
+                    <vdr-form-field [label]="'common.name' | translate" for="name">
+                        <input id="name" type="text" formControlName="name" />
+                    </vdr-form-field>
+                </div>
             </vdr-card>
             <vdr-card
                 formGroupName="customFields"
@@ -47,9 +46,9 @@
                 [title]="'common.custom-fields' | translate"
             >
                 <vdr-tabbed-custom-fields
-                    entityName="Customer"
+                    entityName="CustomerGroup"
                     [customFields]="customFields"
-                    [customFieldsFormGroup]="detailForm.get(['customer', 'customFields'])"
+                    [customFieldsFormGroup]="detailForm.get('customFields')"
                 ></vdr-tabbed-custom-fields>
             </vdr-card>
             <vdr-custom-detail-component-host

packages/admin-ui/src/lib/dashboard/src/components/dashboard-widget/dashboard-widget.component.html

@@ -2,7 +2,5 @@
     <ng-template vdrCardControls>
         <ng-content></ng-content>
     </ng-template>
-    <div class="card-span">
-        <ng-template #portal></ng-template>
-    </div>
+    <ng-template #portal></ng-template>
 </vdr-card>

packages/admin-ui/src/lib/marketing/src/components/promotion-detail/promotion-detail.component.html

@@ -50,47 +50,49 @@
         </vdr-page-detail-sidebar>
         <vdr-page-block>
             <vdr-card>
-                <vdr-form-field [label]="'common.name' | translate" for="name">
-                    <input
-                        id="name"
+                <div class="form-grid">
+                    <vdr-form-field [label]="'common.name' | translate" for="name">
+                        <input
+                            id="name"
+                            [readonly]="!('UpdatePromotion' | hasPermission)"
+                            type="text"
+                            formControlName="name"
+                        />
+                    </vdr-form-field>
+                    <vdr-rich-text-editor
+                        class="form-grid-span"
+                        formControlName="description"
                         [readonly]="!('UpdatePromotion' | hasPermission)"
-                        type="text"
-                        formControlName="name"
-                    />
-                </vdr-form-field>
-                <vdr-rich-text-editor
-                    class="card-span"
-                    formControlName="description"
-                    [readonly]="!('UpdatePromotion' | hasPermission)"
-                    [label]="'common.description' | translate"
-                ></vdr-rich-text-editor>
-                <vdr-form-field [label]="'marketing.starts-at' | translate" for="startsAt">
-                    <vdr-datetime-picker formControlName="startsAt"></vdr-datetime-picker>
-                </vdr-form-field>
-                <vdr-form-field [label]="'marketing.ends-at' | translate" for="endsAt">
-                    <vdr-datetime-picker formControlName="endsAt"></vdr-datetime-picker>
-                </vdr-form-field>
-                <vdr-form-field [label]="'marketing.coupon-code' | translate" for="couponCode">
-                    <input
-                        id="couponCode"
-                        [readonly]="!('UpdatePromotion' | hasPermission)"
-                        type="text"
-                        formControlName="couponCode"
-                    />
-                </vdr-form-field>
-                <vdr-form-field
-                    [label]="'marketing.per-customer-limit' | translate"
-                    for="perCustomerUsageLimit"
-                >
-                    <input
-                        id="perCustomerUsageLimit"
-                        [readonly]="!('UpdatePromotion' | hasPermission)"
-                        type="number"
-                        min="1"
-                        max="999"
-                        formControlName="perCustomerUsageLimit"
-                    />
-                </vdr-form-field>
+                        [label]="'common.description' | translate"
+                    ></vdr-rich-text-editor>
+                    <vdr-form-field [label]="'marketing.starts-at' | translate" for="startsAt">
+                        <vdr-datetime-picker formControlName="startsAt"></vdr-datetime-picker>
+                    </vdr-form-field>
+                    <vdr-form-field [label]="'marketing.ends-at' | translate" for="endsAt">
+                        <vdr-datetime-picker formControlName="endsAt"></vdr-datetime-picker>
+                    </vdr-form-field>
+                    <vdr-form-field [label]="'marketing.coupon-code' | translate" for="couponCode">
+                        <input
+                            id="couponCode"
+                            [readonly]="!('UpdatePromotion' | hasPermission)"
+                            type="text"
+                            formControlName="couponCode"
+                        />
+                    </vdr-form-field>
+                    <vdr-form-field
+                        [label]="'marketing.per-customer-limit' | translate"
+                        for="perCustomerUsageLimit"
+                    >
+                        <input
+                            id="perCustomerUsageLimit"
+                            [readonly]="!('UpdatePromotion' | hasPermission)"
+                            type="number"
+                            min="1"
+                            max="999"
+                            formControlName="perCustomerUsageLimit"
+                        />
+                    </vdr-form-field>
+                </div>
             </vdr-card>
             <vdr-card
                 [title]="'common.custom-fields' | translate"
@@ -112,7 +114,7 @@
             ></vdr-custom-detail-component-host>
 
             <vdr-card [title]="'marketing.conditions' | translate" formArrayName="conditions">
-                <div class="card-span" *ngFor="let condition of conditions; index as i">
+                <div *ngFor="let condition of conditions; index as i">
                     <vdr-configurable-input
                         (remove)="removeCondition($event)"
                         [position]="i"
@@ -143,7 +145,7 @@
                 </div>
             </vdr-card>
             <vdr-card [title]="'marketing.actions' | translate" formArrayName="actions">
-                <div class="card-span" *ngFor="let action of actions; index as i">
+                <div *ngFor="let action of actions; index as i">
                     <vdr-configurable-input
                         (remove)="removeAction($event)"
                         [position]="i"

packages/admin-ui/src/lib/order/src/components/order-data-table/order-data-table.component.html

@@ -112,6 +112,13 @@
                 </td>
                 <td [class.active]="activeIndex === i"><!-- column select --></td>
             </tr>
+            <ng-container>
+                <tr *ngIf="!items?.length">
+                    <td [attr.colspan]="visibleSortedColumns.length + (selectionManager ? 2 : 1)">
+                        <vdr-empty-placeholder [emptyStateLabel]="'order.order-is-empty' | translate"></vdr-empty-placeholder>
+                    </td>
+                </tr>
+            </ng-container>
             <tr class="surcharge" *ngFor="let surcharge of order.surcharges">
                 <td class="align-middle name left" colspan="2">{{ surcharge.description }}</td>
                 <td class="align-middle sku">{{ surcharge.sku }}</td>
@@ -125,7 +132,7 @@
             </tr>
             <ng-container *ngFor="let discount of order.discounts">
                 <tr class="order-adjustment" *ngIf="discount.type !== 'OTHER'">
-                    <td  [attr.colspan]="visibleSortedColumns.length" class="">
+                    <td [attr.colspan]="visibleSortedColumns.length" class="">
                         <a [routerLink]="getPromotionLink(discount)">{{ discount.description }}</a>
                         <vdr-chip *ngIf="getCouponCodeForAdjustment(order, discount) as couponCode">{{
                             couponCode
@@ -173,13 +180,6 @@
                 </td>
                 <td><!-- column select --></td>
             </tr>
-            <ng-container>
-                <tr *ngIf="!items?.length">
-                    <td [attr.colspan]="visibleSortedColumns.length + (selectionManager ? 2 : 1)">
-                        <vdr-empty-placeholder [emptyStateLabel]="emptyStateLabel"></vdr-empty-placeholder>
-                    </td>
-                </tr>
-            </ng-container>
         </tbody>
     </table>
 </div>

packages/admin-ui/src/lib/order/src/components/order-detail/order-detail.component.html

@@ -150,13 +150,12 @@
         ></vdr-seller-orders-card>
         <vdr-card [paddingX]="false">
             <vdr-order-table
-                class="card-span"
                 [order]="order"
                 [orderLineCustomFields]="orderLineCustomFields"
             ></vdr-order-table>
         </vdr-card>
         <vdr-card [title]="'order.tax-summary' | translate" [paddingX]="false">
-            <table class="table card-span">
+            <table class="table">
                 <thead>
                     <tr>
                         <th>{{ 'common.description' | translate }}</th>
@@ -179,20 +178,18 @@
             <vdr-tabbed-custom-fields
                 entityName="Order"
                 [customFields]="customFields"
-                [customFieldsFormGroup]="detailForm.get(['customFields'])"
+                [customFieldsFormGroup]="detailForm.get('customFields')"
                 [readonly]="!('UpdateOrder' | hasPermission)"
             />
-            <div class="card-span">
-                <button
-                    class="button primary"
-                    (click)="updateCustomFields()"
-                    [disabled]="
-                        detailForm.get('customFields')?.pristine || detailForm.get('customFields')?.invalid
-                    "
-                >
-                    {{ 'common.update' | translate }}
-                </button>
-            </div>
+            <button
+                class="button primary"
+                (click)="updateCustomFields()"
+                [disabled]="
+                    detailForm.get('customFields')?.pristine || detailForm.get('customFields')?.invalid
+                "
+            >
+                {{ 'common.update' | translate }}
+            </button>
         </vdr-card>
         <vdr-custom-detail-component-host
             locationId="order-detail"
@@ -202,7 +199,6 @@
 
         <vdr-card [title]="'order.order-history' | translate">
             <vdr-order-history
-                class="card-span"
                 [order]="order"
                 [history]="history$ | async"
                 (addNote)="addNote($event)"

packages/admin-ui/src/lib/settings/src/components/admin-detail/admin-detail.component.html

@@ -34,51 +34,54 @@
         </vdr-page-detail-sidebar>
         <vdr-page-block>
             <vdr-card>
-                <vdr-form-field
-                    [label]="'settings.email-address-or-identifier' | translate"
-                    for="emailAddress"
-                    class="card-span"
-                >
-                    <input
-                        id="emailAddress"
-                        type="text"
-                        formControlName="emailAddress"
-                        [readonly]="!(['CreateAdministrator', 'UpdateAdministrator'] | hasPermission)"
-                    />
-                </vdr-form-field>
-                <vdr-form-field [label]="'settings.first-name' | translate" for="firstName">
-                    <input
-                        id="firstName"
-                        type="text"
-                        formControlName="firstName"
-                        [readonly]="!(['CreateAdministrator', 'UpdateAdministrator'] | hasPermission)"
-                    />
-                </vdr-form-field>
-                <vdr-form-field [label]="'settings.last-name' | translate" for="lastName">
-                    <input
-                        id="lastName"
-                        type="text"
-                        formControlName="lastName"
-                        [readonly]="!(['CreateAdministrator', 'UpdateAdministrator'] | hasPermission)"
-                    />
-                </vdr-form-field>
-                <vdr-form-field
-                    *ngIf="isNew$ | async"
-                    [label]="'settings.password' | translate"
-                    for="password"
-                >
-                    <input id="password" type="password" formControlName="password" />
-                </vdr-form-field>
-                <vdr-form-field
-                    *ngIf="
-                        !(isNew$ | async) && (['CreateAdministrator', 'UpdateAdministrator'] | hasPermission)
-                    "
-                    [label]="'settings.password' | translate"
-                    for="password"
-                    [readOnlyToggle]="true"
-                >
-                    <input id="password" type="password" formControlName="password" />
-                </vdr-form-field>
+                <div class="form-grid">
+                    <vdr-form-field
+                        [label]="'settings.email-address-or-identifier' | translate"
+                        for="emailAddress"
+                        class="form-grid-span"
+                    >
+                        <input
+                            id="emailAddress"
+                            type="text"
+                            formControlName="emailAddress"
+                            [readonly]="!(['CreateAdministrator', 'UpdateAdministrator'] | hasPermission)"
+                        />
+                    </vdr-form-field>
+                    <vdr-form-field [label]="'settings.first-name' | translate" for="firstName">
+                        <input
+                            id="firstName"
+                            type="text"
+                            formControlName="firstName"
+                            [readonly]="!(['CreateAdministrator', 'UpdateAdministrator'] | hasPermission)"
+                        />
+                    </vdr-form-field>
+                    <vdr-form-field [label]="'settings.last-name' | translate" for="lastName">
+                        <input
+                            id="lastName"
+                            type="text"
+                            formControlName="lastName"
+                            [readonly]="!(['CreateAdministrator', 'UpdateAdministrator'] | hasPermission)"
+                        />
+                    </vdr-form-field>
+                    <vdr-form-field
+                        *ngIf="isNew$ | async"
+                        [label]="'settings.password' | translate"
+                        for="password"
+                    >
+                        <input id="password" type="password" formControlName="password" />
+                    </vdr-form-field>
+                    <vdr-form-field
+                        *ngIf="
+                            !(isNew$ | async) &&
+                            (['CreateAdministrator', 'UpdateAdministrator'] | hasPermission)
+                        "
+                        [label]="'settings.password' | translate"
+                        for="password"
+                        [readOnlyToggle]="true"
+                    >
+                        <input id="password" type="password" formControlName="password" />
+                    </vdr-form-field>
+                </div>
             </vdr-card>
 
             <vdr-card
@@ -87,9 +90,9 @@
                 [title]="'common.custom-fields' | translate"
             >
                 <vdr-tabbed-custom-fields
-                    entityName="Customer"
+                    entityName="Administrator"
                     [customFields]="customFields"
-                    [customFieldsFormGroup]="detailForm.get(['customFields'])"
+                    [customFieldsFormGroup]="detailForm.get('customFields')"
                 ></vdr-tabbed-custom-fields>
             </vdr-card>
             <vdr-custom-detail-component-host
@@ -102,7 +105,6 @@
     <vdr-page-block>
         <vdr-card [title]="'settings.roles' | translate">
             <ng-select
-                class="card-span"
                 [items]="allRoles$ | async"
                 [multiple]="true"
                 [hideSelected]="true"
@@ -111,7 +113,7 @@
                 bindLabel="description"
             ></ng-select>
 
-            <ul class="nav card-span" role="tablist">
+            <ul class="nav" role="tablist">
                 <li role="presentation" class="nav-item" *ngFor="let channel of getAvailableChannels()">
                     <button
                         [id]="channel.channelId"
@@ -126,7 +128,6 @@
                 </li>
             </ul>
             <vdr-permission-grid
-                class="card-span"
                 [activePermissions]="getPermissionsForSelectedChannel()"
                 [permissionDefinitions]="permissionDefinitions"
                 [readonly]="true"

packages/admin-ui/src/lib/settings/src/components/channel-detail/channel-detail.component.html

@@ -35,134 +35,122 @@
         </vdr-page-detail-sidebar>
         <vdr-page-block>
             <vdr-card>
-                <vdr-form-field [label]="'common.code' | translate" for="code">
-                    <input
-                        id="code"
-                        type="text"
-                        [readonly]="!(updatePermission | hasPermission)"
-                        formControlName="code"
-                    />
-                </vdr-form-field>
-                <vdr-form-field [label]="'settings.channel-token' | translate" for="token">
-                    <input
-                        id="token"
-                        type="text"
-                        [readonly]="!(updatePermission | hasPermission)"
-                        formControlName="token"
-                    />
-                </vdr-form-field>
-                <vdr-form-field [label]="'settings.currency' | translate" for="defaultTaxZoneId">
-                    <select
-                        name="currencyCode"
-                        formControlName="currencyCode"
-                        [vdrDisabled]="!(updatePermission | hasPermission)"
-                    >
-                        <option *ngFor="let code of currencyCodes" [value]="code">
-                            {{ code | localeCurrencyName }}
-                        </option>
-                    </select>
-                </vdr-form-field>
-                <vdr-form-field [label]="'common.default-language' | translate" for="defaultLanguage">
-                    <select
-                        name="defaultLanguageCode"
-                        formControlName="defaultLanguageCode"
-                        [vdrDisabled]="!(updatePermission | hasPermission)"
-                    >
-                        <option
-                            *ngFor="let languageCode of availableLanguageCodes$ | async"
-                            [value]="languageCode"
-                        >
-                            {{ languageCode | localeLanguageName }} ({{ languageCode | uppercase }})
-                        </option>
-                    </select>
-                </vdr-form-field>
-                <vdr-form-field [label]="'settings.prices-include-tax' | translate" for="pricesIncludeTax">
-                    <clr-toggle-wrapper>
+                <div class="form-grid">
+                    <vdr-form-field [label]="'common.code' | translate" for="code">
                         <input
-                            type="checkbox"
-                            clrToggle
-                            id="pricesIncludeTax"
-                            formControlName="pricesIncludeTax"
-                            [vdrDisabled]="!(updatePermission | hasPermission)"
+                            id="code"
+                            type="text"
+                            [readonly]="!(updatePermission | hasPermission)"
+                            formControlName="code"
+                        />
+                    </vdr-form-field>
+                    <vdr-form-field [label]="'settings.channel-token' | translate" for="token">
+                        <input
+                            id="token"
+                            type="text"
+                            [readonly]="!(updatePermission | hasPermission)"
+                            formControlName="token"
                         />
-                    </clr-toggle-wrapper>
-                </vdr-form-field>
-                <div>
-                    <vdr-form-field [label]="'settings.default-tax-zone' | translate" for="defaultTaxZoneId">
-                        <!--<select
-                            name="defaultTaxZoneId"
-                            formControlName="defaultTaxZoneId"
+                    </vdr-form-field>
+                    <vdr-form-field [label]="'settings.currency' | translate" for="defaultTaxZoneId">
+                        <select
+                            name="currencyCode"
+                            formControlName="currencyCode"
                             [vdrDisabled]="!(updatePermission | hasPermission)"
                         >
-                            <option selected value style="display: none"></option>
-                            <option *ngFor="let zone of zones$ | async" [value]="zone.id">
-                                {{ zone.name }}
+                            <option *ngFor="let code of currencyCodes" [value]="code">
+                                {{ code | localeCurrencyName }}
                             </option>
-                        </select>-->
-                        <vdr-zone-selector
-                            formControlName="defaultTaxZoneId"
+                        </select>
+                    </vdr-form-field>
+                    <vdr-form-field [label]="'common.default-language' | translate" for="defaultLanguage">
+                        <select
+                            name="defaultLanguageCode"
+                            formControlName="defaultLanguageCode"
                             [vdrDisabled]="!(updatePermission | hasPermission)"
-                        ></vdr-zone-selector>
+                        >
+                            <option
+                                *ngFor="let languageCode of availableLanguageCodes$ | async"
+                                [value]="languageCode"
+                            >
+                                {{ languageCode | localeLanguageName }} ({{ languageCode | uppercase }})
+                            </option>
+                        </select>
                     </vdr-form-field>
-                    <clr-alert
-                        *ngIf="detailForm.value.code && !detailForm.value.defaultTaxZoneId"
-                        clrAlertType="danger"
-                        [clrAlertClosable]="false"
-                    >
-                        <clr-alert-item>
-                            <span class="alert-text">
-                                {{ 'error.no-default-tax-zone-set' | translate }}
-                            </span>
-                        </clr-alert-item>
-                    </clr-alert>
-                </div>
-
-                <div>
                     <vdr-form-field
-                        [label]="'settings.default-shipping-zone' | translate"
-                        for="defaultShippingZoneId"
+                        [label]="'settings.prices-include-tax' | translate"
+                        for="pricesIncludeTax"
                     >
-                        <!--<select
-                            name="defaultShippingZoneId"
-                            formControlName="defaultShippingZoneId"
+                        <clr-toggle-wrapper>
+                            <input
+                                type="checkbox"
+                                clrToggle
+                                id="pricesIncludeTax"
+                                formControlName="pricesIncludeTax"
+                                [vdrDisabled]="!(updatePermission | hasPermission)"
+                            />
+                        </clr-toggle-wrapper>
+                    </vdr-form-field>
+                    <div>
+                        <vdr-form-field
+                            [label]="'settings.default-tax-zone' | translate"
+                            for="defaultTaxZoneId"
+                        >
+                            <vdr-zone-selector
+                                formControlName="defaultTaxZoneId"
+                                [vdrDisabled]="!(updatePermission | hasPermission)"
+                            ></vdr-zone-selector>
+                        </vdr-form-field>
+                        <clr-alert
+                            *ngIf="detailForm.value.code && !detailForm.value.defaultTaxZoneId"
+                            clrAlertType="danger"
+                            [clrAlertClosable]="false"
+                        >
+                            <clr-alert-item>
+                                <span class="alert-text">
+                                    {{ 'error.no-default-tax-zone-set' | translate }}
+                                </span>
+                            </clr-alert-item>
+                        </clr-alert>
+                    </div>
+
+                    <div>
+                        <vdr-form-field
+                            [label]="'settings.default-shipping-zone' | translate"
+                            for="defaultShippingZoneId"
+                        >
+                            <vdr-zone-selector
+                                name="defaultShippingZoneId"
+                                formControlName="defaultShippingZoneId"
+                                [vdrDisabled]="!(updatePermission | hasPermission)"
+                            ></vdr-zone-selector>
+                        </vdr-form-field>
+                        <clr-alert
+                            *ngIf="detailForm.value.code && !detailForm.value.defaultShippingZoneId"
+                            clrAlertType="warning"
+                            [clrAlertClosable]="false"
+                        >
+                            <clr-alert-item>
+                                <span class="alert-text">
+                                    {{ 'error.no-default-shipping-zone-set' | translate }}
+                                </span>
+                            </clr-alert-item>
+                        </clr-alert>
+                    </div>
+
+                    <vdr-form-field [label]="'common.seller' | translate" for="sellerId">
+                        <select
+                            name="sellerId"
+                            formControlName="sellerId"
                             [vdrDisabled]="!(updatePermission | hasPermission)"
                         >
                             <option selected value style="display: none"></option>
-                            <option *ngFor="let zone of zones$ | async" [value]="zone.id">
-                                {{ zone.name }}
+                            <option *ngFor="let seller of sellers$ | async" [value]="seller.id">
+                                {{ seller.name }}
                             </option>
-                        </select>-->
-                        <vdr-zone-selector
-                            name="defaultShippingZoneId"
-                            formControlName="defaultShippingZoneId"
-                            [vdrDisabled]="!(updatePermission | hasPermission)"
-                        ></vdr-zone-selector>
+                        </select>
                     </vdr-form-field>
-                    <clr-alert
-                        *ngIf="detailForm.value.code && !detailForm.value.defaultShippingZoneId"
-                        clrAlertType="warning"
-                        [clrAlertClosable]="false"
-                    >
-                        <clr-alert-item>
-                            <span class="alert-text">
-                                {{ 'error.no-default-shipping-zone-set' | translate }}
-                            </span>
-                        </clr-alert-item>
-                    </clr-alert>
                 </div>
-
-                <vdr-form-field [label]="'common.seller' | translate" for="sellerId">
-                    <select
-                        name="sellerId"
-                        formControlName="sellerId"
-                        [vdrDisabled]="!(updatePermission | hasPermission)"
-                    >
-                        <option selected value style="display: none"></option>
-                        <option *ngFor="let seller of sellers$ | async" [value]="seller.id">
-                            {{ seller.name }}
-                        </option>
-                    </select>
-                </vdr-form-field>
             </vdr-card>
             <vdr-card
                 formGroupName="customFields"
@@ -170,9 +158,9 @@
                 [title]="'common.custom-fields' | translate"
             >
                 <vdr-tabbed-custom-fields
-                    entityName="Customer"
+                    entityName="Channel"
                     [customFields]="customFields"
-                    [customFieldsFormGroup]="detailForm.get(['customFields'])"
+                    [customFieldsFormGroup]="detailForm.get('customFields')"
                 ></vdr-tabbed-custom-fields>
             </vdr-card>
             <vdr-custom-detail-component-host

packages/admin-ui/src/lib/settings/src/components/country-detail/country-detail.component.html

@@ -54,22 +54,24 @@
         </vdr-page-detail-sidebar>
         <vdr-page-block>
             <vdr-card>
-                <vdr-form-field [label]="'common.name' | translate" for="name">
-                    <input
-                        id="name"
-                        type="text"
-                        formControlName="name"
-                        [readonly]="!(updatePermission | hasPermission)"
-                    />
-                </vdr-form-field>
-                <vdr-form-field [label]="'common.code' | translate" for="code">
-                    <input
-                        id="code"
-                        type="text"
-                        formControlName="code"
-                        [readonly]="!(updatePermission | hasPermission)"
-                    />
-                </vdr-form-field>
+                <div class="form-grid">
+                    <vdr-form-field [label]="'common.name' | translate" for="name">
+                        <input
+                            id="name"
+                            type="text"
+                            formControlName="name"
+                            [readonly]="!(updatePermission | hasPermission)"
+                        />
+                    </vdr-form-field>
+                    <vdr-form-field [label]="'common.code' | translate" for="code">
+                        <input
+                            id="code"
+                            type="text"
+                            formControlName="code"
+                            [readonly]="!(updatePermission | hasPermission)"
+                        />
+                    </vdr-form-field>
+                </div>
             </vdr-card>
             <vdr-card
                 formGroupName="customFields"
@@ -77,9 +79,9 @@
                 [title]="'common.custom-fields' | translate"
             >
                 <vdr-tabbed-custom-fields
-                    entityName="Customer"
+                    entityName="Region"
                     [customFields]="customFields"
-                    [customFieldsFormGroup]="detailForm.get(['customFields'])"
+                    [customFieldsFormGroup]="detailForm.get('customFields')"
                 ></vdr-tabbed-custom-fields>
             </vdr-card>
             <vdr-custom-detail-component-host

packages/admin-ui/src/lib/settings/src/components/global-settings/global-settings.component.html

@@ -17,67 +17,77 @@
 <form class="form" [formGroup]="detailForm">
     <vdr-page-block>
         <vdr-card>
-            <vdr-form-field [label]="'common.available-languages' | translate" for="availableLanguages">
-                <ng-select
-                    [items]="languageCodes"
-                    [addTag]="false"
-                    [hideSelected]="true"
-                    multiple="true"
-                    appendTo="body"
-                    formControlName="availableLanguages"
+            <div class="form-grid">
+                <vdr-form-field [label]="'common.available-languages' | translate" for="availableLanguages">
+                    <ng-select
+                        [items]="languageCodes"
+                        [addTag]="false"
+                        [hideSelected]="true"
+                        multiple="true"
+                        appendTo="body"
+                        formControlName="availableLanguages"
+                    >
+                        <ng-template ng-label-tmp let-item="item" let-clear="clear">
+                            <span
+                                class="ng-value-icon left"
+                                (click)="clear.call(null, item)"
+                                aria-hidden="true"
+                            >
+                                ×
+                            </span>
+                            <span class="ng-value-label">{{ item | localeLanguageName }} ({{ item }})</span>
+                        </ng-template>
+                        <ng-template ng-option-tmp let-item="item">
+                            {{ item | localeLanguageName }} ({{ item }})
+                        </ng-template>
+                    </ng-select>
+                </vdr-form-field>
+                <vdr-form-field
+                    [label]="'settings.global-out-of-stock-threshold' | translate"
+                    for="outOfStockThreshold"
+                    [tooltip]="'settings.global-out-of-stock-threshold-tooltip' | translate"
                 >
-                    <ng-template ng-label-tmp let-item="item" let-clear="clear">
-                        <span class="ng-value-icon left" (click)="clear.call(null, item)" aria-hidden="true">
-                            ×
-                        </span>
-                        <span class="ng-value-label">{{ item | localeLanguageName }} ({{ item }})</span>
-                    </ng-template>
-                    <ng-template ng-option-tmp let-item="item">
-                        {{ item | localeLanguageName }} ({{ item }})
-                    </ng-template>
-                </ng-select>
-            </vdr-form-field>
-            <vdr-form-field
-                [label]="'settings.global-out-of-stock-threshold' | translate"
-                for="outOfStockThreshold"
-                [tooltip]="'settings.global-out-of-stock-threshold-tooltip' | translate"
-            >
-                <input
-                    id="outOfStockThreshold"
-                    type="number"
-                    formControlName="outOfStockThreshold"
-                    [readonly]="!(updatePermission | hasPermission)"
-                />
-            </vdr-form-field>
-            <vdr-form-field
-                [label]="'settings.track-inventory-default' | translate"
-                for="enabled"
-                [tooltip]="'catalog.track-inventory-tooltip' | translate"
-            >
-                <clr-toggle-wrapper>
                     <input
-                        type="checkbox"
-                        clrToggle
-                        name="enabled"
-                        formControlName="trackInventory"
-                        [vdrDisabled]="!(updatePermission | hasPermission)"
+                        id="outOfStockThreshold"
+                        type="number"
+                        formControlName="outOfStockThreshold"
+                        [readonly]="!(updatePermission | hasPermission)"
                     />
-                </clr-toggle-wrapper>
-            </vdr-form-field>
-            <section formGroupName="customFields" *ngIf="customFields.length">
-                <label>{{ 'common.custom-fields' | translate }}</label>
-                <vdr-tabbed-custom-fields
-                    entityName="GlobalSettings"
-                    [customFields]="customFields"
-                    [customFieldsFormGroup]="detailForm.get('customFields')"
-                    [readonly]="!(updatePermission | hasPermission)"
-                ></vdr-tabbed-custom-fields>
-            </section>
-            <vdr-custom-detail-component-host
-                locationId="global-settings-detail"
-                [entity$]="entity$"
-                [detailForm]="detailForm"
-            ></vdr-custom-detail-component-host>
+                </vdr-form-field>
+                <vdr-form-field
+                    [label]="'settings.track-inventory-default' | translate"
+                    for="enabled"
+                    [tooltip]="'catalog.track-inventory-tooltip' | translate"
+                >
+                    <clr-toggle-wrapper>
+                        <input
+                            type="checkbox"
+                            clrToggle
+                            name="enabled"
+                            formControlName="trackInventory"
+                            [vdrDisabled]="!(updatePermission | hasPermission)"
+                        />
+                    </clr-toggle-wrapper>
+                </vdr-form-field>
+            </div>
         </vdr-card>
+        <vdr-card
+            formGroupName="customFields"
+            *ngIf="customFields.length"
+            [title]="'common.custom-fields' | translate"
+        >
+            <vdr-tabbed-custom-fields
+                entityName="GlobalSettings"
+                [customFields]="customFields"
+                [customFieldsFormGroup]="detailForm.get('customFields')"
+                [readonly]="!(updatePermission | hasPermission)"
+            ></vdr-tabbed-custom-fields>
+        </vdr-card>
+
+        <vdr-custom-detail-component-host
+            locationId="global-settings-detail"
+            [entity$]="entity$"
+            [detailForm]="detailForm"
+        ></vdr-custom-detail-component-host>
     </vdr-page-block>
 </form>

packages/admin-ui/src/lib/settings/src/components/payment-method-detail/payment-method-detail.component.html

@@ -55,32 +55,35 @@
         </vdr-page-detail-sidebar>
         <vdr-page-block>
             <vdr-card>
-                <vdr-form-field [label]="'common.name' | translate" for="name">
-                    <input
-                        id="name"
-                        type="text"
-                        formControlName="name"
-                        [readonly]="!(updatePermission | hasPermission)"
-                        (input)="updateCode(entity?.code, $event.target.value)"
-                    />
-                </vdr-form-field>
-                <vdr-form-field
-                    [label]="'common.code' | translate"
-                    for="code"
-                    [readOnlyToggle]="updatePermission | hasPermission"
-                >
-                    <input
-                        id="code"
-                        type="text"
-                        formControlName="code"
+                <div class="form-grid">
+                    <vdr-form-field [label]="'common.name' | translate" for="name">
+                        <input
+                            id="name"
+                            type="text"
+                            formControlName="name"
+                            [readonly]="!(updatePermission | hasPermission)"
+                            (input)="updateCode(entity?.code, $event.target.value)"
+                        />
+                    </vdr-form-field>
+                    <vdr-form-field
+                        [label]="'common.code' | translate"
+                        for="code"
+                        [readOnlyToggle]="updatePermission | hasPermission"
+                    >
+                        <input
+                            id="code"
+                            type="text"
+                            formControlName="code"
+                            [readonly]="!(updatePermission | hasPermission)"
+                        />
+                    </vdr-form-field>
+                    <vdr-rich-text-editor
+                        class="form-grid-span"
+                        formControlName="description"
                         [readonly]="!(updatePermission | hasPermission)"
-                    />
-                </vdr-form-field>
-                <vdr-rich-text-editor
-                    formControlName="description"
-                    [readonly]="!(updatePermission | hasPermission)"
-                    [label]="'common.description' | translate"
-                ></vdr-rich-text-editor>
+                        [label]="'common.description' | translate"
+                    ></vdr-rich-text-editor>
+                </div>
             </vdr-card>
 
             <vdr-card
@@ -89,7 +92,7 @@
                 [title]="'common.custom-fields' | translate"
             >
                 <vdr-tabbed-custom-fields
-                    entityName="Customer"
+                    entityName="PaymentMethod"
                     [customFields]="customFields"
                     [customFieldsFormGroup]="detailForm.get('customFields')"
                 ></vdr-tabbed-custom-fields>
@@ -103,7 +106,6 @@
 
             <vdr-card [title]="'settings.payment-eligibility-checker' | translate">
                 <vdr-configurable-input
-                    class="card-span"
                     *ngIf="selectedChecker && selectedCheckerDefinition"
                     [operation]="selectedChecker"
                     [operationDefinition]="selectedCheckerDefinition"
@@ -132,7 +134,6 @@
             </vdr-card>
             <vdr-card [title]="'settings.payment-handler' | translate">
                 <vdr-configurable-input
-                    class="card-span"
                     *ngIf="selectedHandler && selectedHandlerDefinition"
                     [operation]="selectedHandler"
                     [operationDefinition]="selectedHandlerDefinition"

packages/admin-ui/src/lib/settings/src/components/profile/profile.component.html

@@ -23,29 +23,31 @@
         </vdr-page-detail-sidebar>
         <vdr-page-block>
             <vdr-card>
-                <vdr-form-field [label]="'settings.email-address' | translate" for="emailAddress">
-                    <input id="emailAddress" type="text" formControlName="emailAddress" />
-                </vdr-form-field>
-                <vdr-form-field [label]="'settings.first-name' | translate" for="firstName">
-                    <input id="firstName" type="text" formControlName="firstName" />
-                </vdr-form-field>
-                <vdr-form-field [label]="'settings.last-name' | translate" for="lastName">
-                    <input id="lastName" type="text" formControlName="lastName" />
-                </vdr-form-field>
-                <vdr-form-field
-                    *ngIf="isNew$ | async"
-                    [label]="'settings.password' | translate"
-                    for="password"
-                >
-                    <input id="password" type="password" formControlName="password" />
-                </vdr-form-field>
-                <vdr-form-field
-                    [label]="'settings.password' | translate"
-                    for="password"
-                    [readOnlyToggle]="true"
-                >
-                    <input id="password" type="password" formControlName="password" />
-                </vdr-form-field>
+                <div class="form-grid">
+                    <vdr-form-field [label]="'settings.email-address' | translate" for="emailAddress">
+                        <input id="emailAddress" type="text" formControlName="emailAddress" />
+                    </vdr-form-field>
+                    <vdr-form-field [label]="'settings.first-name' | translate" for="firstName">
+                        <input id="firstName" type="text" formControlName="firstName" />
+                    </vdr-form-field>
+                    <vdr-form-field [label]="'settings.last-name' | translate" for="lastName">
+                        <input id="lastName" type="text" formControlName="lastName" />
+                    </vdr-form-field>
+                    <vdr-form-field
+                        *ngIf="isNew$ | async"
+                        [label]="'settings.password' | translate"
+                        for="password"
+                    >
+                        <input id="password" type="password" formControlName="password" />
+                    </vdr-form-field>
+                    <vdr-form-field
+                        [label]="'settings.password' | translate"
+                        for="password"
+                        [readOnlyToggle]="true"
+                    >
+                        <input id="password" type="password" formControlName="password" />
+                    </vdr-form-field>
+                </div>
             </vdr-card>
             <vdr-card
                 formGroupName="customFields"
@@ -53,7 +55,7 @@
                 [title]="'common.custom-fields' | translate"
             >
                 <vdr-tabbed-custom-fields
-                    entityName="Customer"
+                    entityName="Administrator"
                     [customFields]="customFields"
                     [customFieldsFormGroup]="detailForm.get('customFields')"
                 ></vdr-tabbed-custom-fields>

packages/admin-ui/src/lib/settings/src/components/role-detail/role-detail.component.html

@@ -34,40 +34,41 @@
         </vdr-page-detail-sidebar>
         <vdr-page-block>
             <vdr-card>
-                <vdr-form-field [label]="'common.description' | translate" for="description">
-                    <input
-                        id="description"
-                        type="text"
-                        formControlName="description"
-                        [readonly]="!('UpdateAdministrator' | hasPermission)"
-                        (input)="updateCode($event.target.value)"
-                    />
-                </vdr-form-field>
-                <vdr-form-field
-                    [label]="'common.code' | translate"
-                    for="code"
-                    [readOnlyToggle]="'UpdateAdministrator' | hasPermission"
-                >
-                    <input
-                        id="code"
-                        type="text"
-                        formControlName="code"
-                        [readonly]="!('UpdateAdministrator' | hasPermission)"
-                    />
-                </vdr-form-field>
+                <div class="form-grid">
+                    <vdr-form-field [label]="'common.description' | translate" for="description">
+                        <input
+                            id="description"
+                            type="text"
+                            formControlName="description"
+                            [readonly]="!('UpdateAdministrator' | hasPermission)"
+                            (input)="updateCode($event.target.value)"
+                        />
+                    </vdr-form-field>
+                    <vdr-form-field
+                        [label]="'common.code' | translate"
+                        for="code"
+                        [readOnlyToggle]="'UpdateAdministrator' | hasPermission"
+                    >
+                        <input
+                            id="code"
+                            type="text"
+                            formControlName="code"
+                            [readonly]="!('UpdateAdministrator' | hasPermission)"
+                        />
+                    </vdr-form-field>
+                </div>
             </vdr-card>
         </vdr-page-block>
     </vdr-page-detail-layout>
     <vdr-page-block>
         <vdr-card [title]="'settings.permissions' | translate">
-            <vdr-form-field [label]="'settings.channel' | translate" class="card-span">
+            <vdr-form-field [label]="'settings.channel' | translate">
                 <vdr-channel-assignment-control
                     formControlName="channelIds"
                     [vdrDisabled]="!('UpdateAdministrator' | hasPermission)"
                 ></vdr-channel-assignment-control>
             </vdr-form-field>
             <vdr-permission-grid
-                class="card-span"
                 [permissionDefinitions]="permissionDefinitions"
                 [activePermissions]="detailForm.get('permissions')?.value"
                 (permissionChange)="setPermission($event)"

packages/admin-ui/src/lib/settings/src/components/seller-detail/seller-detail.component.html

@@ -35,14 +35,16 @@
         </vdr-page-detail-sidebar>
         <vdr-page-block>
             <vdr-card>
-                <vdr-form-field [label]="'common.name' | translate" for="name">
-                    <input
-                        id="name"
-                        type="text"
-                        [readonly]="!(updatePermission | hasPermission)"
-                        formControlName="name"
-                    />
-                </vdr-form-field>
+                <div class="form-grid">
+                    <vdr-form-field [label]="'common.name' | translate" for="name">
+                        <input
+                            id="name"
+                            type="text"
+                            [readonly]="!(updatePermission | hasPermission)"
+                            formControlName="name"
+                        />
+                    </vdr-form-field>
+                </div>
             </vdr-card>
             <vdr-card
                 formGroupName="customFields"
@@ -50,7 +52,7 @@
                 [title]="'common.custom-fields' | translate"
             >
                 <vdr-tabbed-custom-fields
-                    entityName="Customer"
+                    entityName="Seller"
                     [customFields]="customFields"
                     [customFieldsFormGroup]="detailForm.get('customFields')"
                 ></vdr-tabbed-custom-fields>

packages/admin-ui/src/lib/settings/src/components/shipping-method-detail/shipping-method-detail.component.html

@@ -46,44 +46,49 @@
         </vdr-page-detail-sidebar>
         <vdr-page-block>
             <vdr-card>
-                <vdr-form-field [label]="'common.name' | translate" for="name">
-                    <input
-                        id="name"
-                        type="text"
-                        formControlName="name"
-                        [readonly]="!(updatePermission | hasPermission)"
-                        (input)="updateCode(entity?.code, $event.target.value)"
-                    />
-                </vdr-form-field>
-                <vdr-form-field
-                    [label]="'common.code' | translate"
-                    for="code"
-                    [readOnlyToggle]="updatePermission | hasPermission"
-                >
-                    <input
-                        id="code"
-                        type="text"
-                        formControlName="code"
+                <div class="form-grid">
+                    <vdr-form-field [label]="'common.name' | translate" for="name">
+                        <input
+                            id="name"
+                            type="text"
+                            formControlName="name"
+                            [readonly]="!(updatePermission | hasPermission)"
+                            (input)="updateCode(entity?.code, $event.target.value)"
+                        />
+                    </vdr-form-field>
+                    <vdr-form-field
+                        [label]="'common.code' | translate"
+                        for="code"
+                        [readOnlyToggle]="updatePermission | hasPermission"
+                    >
+                        <input
+                            id="code"
+                            type="text"
+                            formControlName="code"
+                            [readonly]="!(updatePermission | hasPermission)"
+                        />
+                    </vdr-form-field>
+                    <vdr-rich-text-editor
+                        class="card-span"
+                        formControlName="description"
                         [readonly]="!(updatePermission | hasPermission)"
-                    />
-                </vdr-form-field>
-                <vdr-rich-text-editor
-                    class="card-span"
-                    formControlName="description"
-                    [readonly]="!(updatePermission | hasPermission)"
-                    [label]="'common.description' | translate"
-                ></vdr-rich-text-editor>
-                <vdr-form-field [label]="'settings.fulfillment-handler' | translate" for="fulfillmentHandler">
-                    <select
-                        name="fulfillmentHandler"
-                        formControlName="fulfillmentHandler"
-                        [vdrDisabled]="!(updatePermission | hasPermission)"
+                        [label]="'common.description' | translate"
+                    ></vdr-rich-text-editor>
+                    <vdr-form-field
+                        [label]="'settings.fulfillment-handler' | translate"
+                        for="fulfillmentHandler"
                     >
-                        <option *ngFor="let handler of fulfillmentHandlers" [value]="handler.code">
-                            {{ handler.code }}: {{ handler.description }}
-                        </option>
-                    </select>
-                </vdr-form-field>
+                        <select
+                            name="fulfillmentHandler"
+                            formControlName="fulfillmentHandler"
+                            [vdrDisabled]="!(updatePermission | hasPermission)"
+                        >
+                            <option *ngFor="let handler of fulfillmentHandlers" [value]="handler.code">
+                                {{ handler.code }}: {{ handler.description }}
+                            </option>
+                        </select>
+                    </vdr-form-field>
+                </div>
             </vdr-card>
 
             <vdr-card
@@ -92,7 +97,7 @@
                 [title]="'common.custom-fields' | translate"
             >
                 <vdr-tabbed-custom-fields
-                    entityName="Customer"
+                    entityName="ShippingMethod"
                     [customFields]="customFields"
                     [customFieldsFormGroup]="detailForm.get('customFields')"
                 ></vdr-tabbed-custom-fields>
@@ -167,8 +172,12 @@
                     class="card-span"
                     (orderLinesChange)="setTestOrderLines($event)"
                 ></vdr-test-order-builder>
-                <vdr-test-address-form (addressChange)="setTestAddress($event)"></vdr-test-address-form>
+                <vdr-test-address-form
+                    (addressChange)="setTestAddress($event)"
+                    class="mt-2"
+                ></vdr-test-address-form>
                 <vdr-shipping-method-test-result
+                    class="mt-2"
                     [currencyCode]="(activeChannel$ | async)?.currencyCode"
                     [okToRun]="allTestDataPresent() && testDataUpdated && detailForm.valid"
                     [testDataUpdated]="testDataUpdated"

packages/admin-ui/src/lib/settings/src/components/shipping-method-test-result/shipping-method-test-result.component.scss

@@ -1,3 +1,6 @@
+:host {
+    display: block;
+}
 .test-result {
     &.success .card-block {
         background-color: var(--color-success-100);

packages/admin-ui/src/lib/settings/src/components/tax-category-detail/tax-category-detail.component.html

@@ -33,34 +33,38 @@
             </vdr-card>
         </vdr-page-detail-sidebar>
         <vdr-page-block>
-            <vdr-form-field [label]="'common.name' | translate" for="name">
-                <input
-                    id="name"
-                    type="text"
-                    formControlName="name"
-                    [readonly]="!(updatePermission | hasPermission)"
-                />
-            </vdr-form-field>
-            <vdr-form-field [label]="'common.default-tax-category' | translate" for="isDefault">
-                <clr-toggle-wrapper>
-                    <input
-                        type="checkbox"
-                        clrToggle
-                        id="isDefault"
-                        [vdrDisabled]="!(updatePermission | hasPermission)"
-                        formControlName="isDefault"
-                    />
-                </clr-toggle-wrapper>
-            </vdr-form-field>
+            <vdr-card>
+                <div class="form-grid">
+                    <vdr-form-field [label]="'common.name' | translate" for="name">
+                        <input
+                            id="name"
+                            type="text"
+                            formControlName="name"
+                            [readonly]="!(updatePermission | hasPermission)"
+                        />
+                    </vdr-form-field>
+                    <vdr-form-field [label]="'common.default-tax-category' | translate" for="isDefault">
+                        <clr-toggle-wrapper>
+                            <input
+                                type="checkbox"
+                                clrToggle
+                                id="isDefault"
+                                [vdrDisabled]="!(updatePermission | hasPermission)"
+                                formControlName="isDefault"
+                            />
+                        </clr-toggle-wrapper>
+                    </vdr-form-field>
+                </div>
+            </vdr-card>
             <vdr-card
                 formGroupName="customFields"
                 *ngIf="customFields.length"
                 [title]="'common.custom-fields' | translate"
             >
                 <vdr-tabbed-custom-fields
-                    entityName="Customer"
+                    entityName="TaxCategory"
                     [customFields]="customFields"
-                    [customFieldsFormGroup]="detailForm.get(['customFields'])"
+                    [customFieldsFormGroup]="detailForm.get('customFields')"
                 ></vdr-tabbed-custom-fields>
             </vdr-card>
             <vdr-custom-detail-component-host

packages/admin-ui/src/lib/settings/src/components/tax-rate-detail/tax-rate-detail.component.html

@@ -48,44 +48,49 @@
         </vdr-page-detail-sidebar>
         <vdr-page-block>
             <vdr-card>
-                <vdr-form-field [label]="'common.name' | translate" for="name">
-                    <input
-                        id="name"
-                        type="text"
-                        formControlName="name"
-                        [readonly]="!(updatePermission | hasPermission)"
-                    />
-                </vdr-form-field>
-                <vdr-form-field [label]="'settings.rate' | translate" for="value">
-                    <vdr-affixed-input suffix="%">
+                <div class="form-grid">
+                    <vdr-form-field [label]="'common.name' | translate" for="name">
                         <input
-                            id="value"
-                            type="number"
-                            step="0.1"
-                            formControlName="value"
+                            id="name"
+                            type="text"
+                            formControlName="name"
                             [readonly]="!(updatePermission | hasPermission)"
                         />
-                    </vdr-affixed-input>
-                </vdr-form-field>
-                <vdr-form-field [label]="'settings.tax-category' | translate" for="taxCategoryId">
-                    <select
-                        name="taxCategoryId"
-                        formControlName="taxCategoryId"
-                        [vdrDisabled]="!(updatePermission | hasPermission)"
-                    >
-                        <option *ngFor="let taxCategory of taxCategories$ | async" [value]="taxCategory.id">
-                            {{ taxCategory.name }}
-                        </option>
-                    </select>
-                </vdr-form-field>
-                <vdr-form-field [label]="'settings.zone' | translate" for="zoneId">
-                    <vdr-zone-selector
-                        name="zoneId"
-                        formControlName="zoneId"
-                        [vdrDisabled]="!(updatePermission | hasPermission)"
-                    >
-                    </vdr-zone-selector>
-                </vdr-form-field>
+                    </vdr-form-field>
+                    <vdr-form-field [label]="'settings.rate' | translate" for="value">
+                        <vdr-affixed-input suffix="%">
+                            <input
+                                id="value"
+                                type="number"
+                                step="0.1"
+                                formControlName="value"
+                                [readonly]="!(updatePermission | hasPermission)"
+                            />
+                        </vdr-affixed-input>
+                    </vdr-form-field>
+                    <vdr-form-field [label]="'settings.tax-category' | translate" for="taxCategoryId">
+                        <select
+                            name="taxCategoryId"
+                            formControlName="taxCategoryId"
+                            [vdrDisabled]="!(updatePermission | hasPermission)"
+                        >
+                            <option
+                                *ngFor="let taxCategory of taxCategories$ | async"
+                                [value]="taxCategory.id"
+                            >
+                                {{ taxCategory.name }}
+                            </option>
+                        </select>
+                    </vdr-form-field>
+                    <vdr-form-field [label]="'settings.zone' | translate" for="zoneId">
+                        <vdr-zone-selector
+                            name="zoneId"
+                            formControlName="zoneId"
+                            [vdrDisabled]="!(updatePermission | hasPermission)"
+                        >
+                        </vdr-zone-selector>
+                    </vdr-form-field>
+                </div>
             </vdr-card>
             <vdr-card
                 formGroupName="customFields"
@@ -93,7 +98,7 @@
                 [title]="'common.custom-fields' | translate"
             >
                 <vdr-tabbed-custom-fields
-                    entityName="Customer"
+                    entityName="TaxRate"
                     [customFields]="customFields"
                     [customFieldsFormGroup]="detailForm.get('customFields')"
                 ></vdr-tabbed-custom-fields>

packages/admin-ui/src/lib/settings/src/components/test-address-form/test-address-form.component.html

@@ -3,7 +3,7 @@
         {{ 'settings.test-address' | translate }}
     </div>
     <div class="card-block">
-        <form [formGroup]="form">
+        <form [formGroup]="form" class="form-grid">
             <vdr-form-field [label]="'customer.city' | translate">
                 <input formControlName="city" type="text"  />
             </vdr-form-field>

packages/admin-ui/src/lib/settings/src/components/test-address-form/test-address-form.component.scss

@@ -1,3 +1,6 @@
+:host {
+    display: block;
+}
 clr-input-container {
     margin-bottom: 12px;
 }

packages/admin-ui/src/lib/settings/src/components/zone-detail/zone-detail.component.html

@@ -34,14 +34,16 @@
         </vdr-page-detail-sidebar>
         <vdr-page-block>
             <vdr-card>
-                <vdr-form-field [label]="'common.name' | translate" for="name">
-                    <input
-                        id="name"
-                        type="text"
-                        formControlName="name"
-                        [readonly]="!(updatePermission | hasPermission)"
-                    />
-                </vdr-form-field>
+                <div class="form-grid">
+                    <vdr-form-field [label]="'common.name' | translate" for="name">
+                        <input
+                            id="name"
+                            type="text"
+                            formControlName="name"
+                            [readonly]="!(updatePermission | hasPermission)"
+                        />
+                    </vdr-form-field>
+                </div>
             </vdr-card>
             <vdr-card
                 formGroupName="customFields"
@@ -49,9 +51,9 @@
                 [title]="'common.custom-fields' | translate"
             >
                 <vdr-tabbed-custom-fields
-                    entityName="Customer"
+                    entityName="Zone"
                     [customFields]="customFields"
-                    [customFieldsFormGroup]="detailForm.get(['customFields'])"
+                    [customFieldsFormGroup]="detailForm.get('customFields')"
                 ></vdr-tabbed-custom-fields>
             </vdr-card>
             <vdr-custom-detail-component-host

packages/admin-ui/src/lib/static/styles/global/_buttons.scss

@@ -42,7 +42,7 @@
 }
 
 .button-ghost {
-    display: flex;
+    display: inline-flex;
     white-space: nowrap;
     flex-direction: row;
     justify-content: flex-end;

packages/admin-ui/src/lib/static/styles/global/_forms.scss

@@ -12,7 +12,30 @@ form .form-block {
     margin: 0.5rem 0 1.5rem;
 }
 
-input:not([type="checkbox"]):not([type="radio"]),
+.form-grid {
+    display: grid;
+    gap: calc(var(--space-unit) * 4);
+    grid-template-columns: 1fr 1fr;
+    .form-grid-span {
+        grid-column: span 2;
+    }
+
+    @container (max-width: 500px) {
+        grid-template-columns: 1fr;
+    }
+    @container (max-width: 700px) {
+        gap: calc(var(--space-unit) * 2);
+    }
+    @container (max-width: 500px) {
+        grid-template-columns: 1fr;
+
+        .form-grid-span {
+            grid-column: initial;
+        }
+    }
+}
+
+input:not([type='checkbox']):not([type='radio']),
 select,
 textarea,
 .clr-input {
@@ -38,7 +61,7 @@ textarea,
     }
 }
 
-input:not([type="checkbox"]):not([type="radio"]),
+input:not([type='checkbox']):not([type='radio']),
 textarea,
 select {
     border-radius: var(--border-radius-input) !important;

packages/admin-ui/src/lib/static/styles/global/_utilities.scss

@@ -20,15 +20,6 @@
     flex: 1;
 }
 
-.form-grid {
-    display: grid;
-    gap: calc(var(--space-unit) * 4);
-    grid-template-columns: 1fr 1fr;
-    @container (max-width: 500px) {
-        grid-template-columns: 1fr;
-    }
-}
-
 .max-w-layout {
     max-width: var(--layout-content-max-width);
 }