Restructure Backdrop fields into two flex columns aligned with preview box

web/src/components/RenderSettingsForm.vue

@@ -813,18 +813,146 @@ function toggleExclude(key: string, checked: boolean) {
     <div v-if="fetchBackdropPreview" class="rounded-md border p-4 space-y-3">
       <p class="text-sm font-semibold">Backdrop (series/movie)</p>
       <div class="flex gap-4 flex-wrap">
-        <div class="relative w-[280px]" :style="backdropPreview.size ? { aspectRatio: `${backdropPreview.size.w} / ${backdropPreview.size.h}` } : undefined">
-          <img
-            v-show="backdropPreview.src && !backdropPreview.error"
-            :src="backdropPreview.src"
-            alt="Backdrop preview"
-            class="rounded border w-full"
-            @load="(e: Event) => onPreviewLoad(backdropPreview, e)"
-            @error="backdropPreview.loading = false; backdropPreview.error = true"
-          />
-          <p v-if="backdropPreview.error && !backdropPreview.loading" class="text-sm text-muted-foreground py-4">Failed</p>
-          <div v-if="backdropPreview.loading" class="absolute inset-0 flex items-center justify-center rounded">
-            <Loader2 class="size-5 animate-spin text-white drop-shadow-md" />
+        <div class="w-[280px] space-y-3">
+          <div class="relative w-[280px]" :style="backdropPreview.size ? { aspectRatio: `${backdropPreview.size.w} / ${backdropPreview.size.h}` } : undefined">
+            <img
+              v-show="backdropPreview.src && !backdropPreview.error"
+              :src="backdropPreview.src"
+              alt="Backdrop preview"
+              class="rounded border w-full"
+              @load="(e: Event) => onPreviewLoad(backdropPreview, e)"
+              @error="backdropPreview.loading = false; backdropPreview.error = true"
+            />
+            <p v-if="backdropPreview.error && !backdropPreview.loading" class="text-sm text-muted-foreground py-4">Failed</p>
+            <div v-if="backdropPreview.loading" class="absolute inset-0 flex items-center justify-center rounded">
+              <Loader2 class="size-5 animate-spin text-white drop-shadow-md" />
+            </div>
+          </div>
+          <div class="grid grid-cols-2 gap-3">
+            <div class="space-y-3">
+              <div class="space-y-2">
+                <Label :for="inputId('backdrop-label-style')">Label style</Label>
+                <Select
+                  :model-value="editBackdropLabelStyle"
+                  @update:model-value="editBackdropLabelStyle = $event as string"
+                >
+                  <SelectTrigger :id="inputId('backdrop-label-style')" class="max-w-xs" data-testid="backdrop-label-style-select">
+                    <SelectValue placeholder="Select style" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="t">Text</SelectItem>
+                    <SelectItem value="i">Icon</SelectItem>
+                    <SelectItem value="o">Official</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div class="space-y-2">
+                <Label :for="inputId('backdrop-badge-shape')">Badge shape</Label>
+                <Select
+                  :model-value="editBackdropBadgeShape"
+                  @update:model-value="editBackdropBadgeShape = $event as string"
+                >
+                  <SelectTrigger :id="inputId('backdrop-badge-shape')" class="max-w-xs" data-testid="backdrop-badge-shape-select">
+                    <SelectValue placeholder="Select shape" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="r">Rounded</SelectItem>
+                    <SelectItem value="p">Pill</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div class="space-y-2">
+                <Label :for="inputId('backdrop-position')">Position</Label>
+                <Select
+                  :model-value="editBackdropPosition"
+                  @update:model-value="editBackdropPosition = $event as string"
+                >
+                  <SelectTrigger :id="inputId('backdrop-position')" class="max-w-xs" data-testid="backdrop-position-select">
+                    <SelectValue placeholder="Select position" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="tl">Top Left</SelectItem>
+                    <SelectItem value="tc">Top Center</SelectItem>
+                    <SelectItem value="tr">Top Right</SelectItem>
+                    <SelectItem value="bl">Bottom Left</SelectItem>
+                    <SelectItem value="bc">Bottom Center</SelectItem>
+                    <SelectItem value="br">Bottom Right</SelectItem>
+                    <SelectItem value="l">Left</SelectItem>
+                    <SelectItem value="r">Right</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div class="space-y-2">
+                <Label :for="inputId('backdrop-badge-direction')">Badge direction</Label>
+                <Select
+                  :model-value="editBackdropBadgeDirection"
+                  @update:model-value="editBackdropBadgeDirection = $event as string"
+                >
+                  <SelectTrigger :id="inputId('backdrop-badge-direction')" class="max-w-xs" data-testid="backdrop-badge-direction-select">
+                    <SelectValue placeholder="Select direction" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="d">Default</SelectItem>
+                    <SelectItem value="h">Horizontal</SelectItem>
+                    <SelectItem value="v">Vertical</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+            <div class="space-y-3">
+              <div class="space-y-2">
+                <Label :for="inputId('backdrop-badge-size')">Badge size</Label>
+                <Select
+                  :model-value="editBackdropBadgeSize"
+                  @update:model-value="editBackdropBadgeSize = $event as string"
+                >
+                  <SelectTrigger :id="inputId('backdrop-badge-size')" class="max-w-xs" data-testid="backdrop-badge-size-select">
+                    <SelectValue placeholder="Select size" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="xs">Extra Small</SelectItem>
+                    <SelectItem value="s">Small</SelectItem>
+                    <SelectItem value="m">Medium</SelectItem>
+                    <SelectItem value="l">Large</SelectItem>
+                    <SelectItem value="xl">Extra Large</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div class="space-y-2">
+                <Label :for="inputId('backdrop-badge-background')">Badge background</Label>
+                <Select
+                  :model-value="editBackdropBadgeBackground"
+                  @update:model-value="editBackdropBadgeBackground = $event as string"
+                >
+                  <SelectTrigger :id="inputId('backdrop-badge-background')" class="max-w-xs" data-testid="backdrop-badge-background-select">
+                    <SelectValue placeholder="Select background" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="d">Default</SelectItem>
+                    <SelectItem value="k">Dark</SelectItem>
+                    <SelectItem value="t">Transparent</SelectItem>
+                    <SelectItem value="n">None</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div class="space-y-2">
+                <Label :for="inputId('backdrop-badge-style')">Badge style</Label>
+                <Select
+                  :model-value="editBackdropBadgeStyle"
+                  :disabled="editBackdropBadgeShape === 'p'"
+                  @update:model-value="editBackdropBadgeStyle = $event as string"
+                >
+                  <SelectTrigger :id="inputId('backdrop-badge-style')" class="max-w-xs" data-testid="backdrop-badge-style-select">
+                    <SelectValue placeholder="Select style" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="h">Horizontal</SelectItem>
+                    <SelectItem value="v">Vertical</SelectItem>
+                  </SelectContent>
+                </Select>
+                <p v-if="editBackdropBadgeShape === 'p'" class="text-xs text-muted-foreground">Pills always render horizontally.</p>
+              </div>
+            </div>
           </div>
         </div>
         <div class="space-y-3 min-w-[180px]">
@@ -881,132 +1009,6 @@ function toggleExclude(key: string, checked: boolean) {
           </div>
         </div>
       </div>
-      <div class="flex gap-4 flex-wrap">
-        <div class="w-[280px] space-y-3">
-          <div class="space-y-2">
-            <Label :for="inputId('backdrop-label-style')">Label style</Label>
-            <Select
-              :model-value="editBackdropLabelStyle"
-              @update:model-value="editBackdropLabelStyle = $event as string"
-            >
-              <SelectTrigger :id="inputId('backdrop-label-style')" class="max-w-xs" data-testid="backdrop-label-style-select">
-                <SelectValue placeholder="Select style" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="t">Text</SelectItem>
-                <SelectItem value="i">Icon</SelectItem>
-                <SelectItem value="o">Official</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-          <div class="space-y-2">
-            <Label :for="inputId('backdrop-badge-shape')">Badge shape</Label>
-            <Select
-              :model-value="editBackdropBadgeShape"
-              @update:model-value="editBackdropBadgeShape = $event as string"
-            >
-              <SelectTrigger :id="inputId('backdrop-badge-shape')" class="max-w-xs" data-testid="backdrop-badge-shape-select">
-                <SelectValue placeholder="Select shape" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="r">Rounded</SelectItem>
-                <SelectItem value="p">Pill</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-          <div class="space-y-2">
-            <Label :for="inputId('backdrop-position')">Position</Label>
-            <Select
-              :model-value="editBackdropPosition"
-              @update:model-value="editBackdropPosition = $event as string"
-            >
-              <SelectTrigger :id="inputId('backdrop-position')" class="max-w-xs" data-testid="backdrop-position-select">
-                <SelectValue placeholder="Select position" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="tl">Top Left</SelectItem>
-                <SelectItem value="tc">Top Center</SelectItem>
-                <SelectItem value="tr">Top Right</SelectItem>
-                <SelectItem value="bl">Bottom Left</SelectItem>
-                <SelectItem value="bc">Bottom Center</SelectItem>
-                <SelectItem value="br">Bottom Right</SelectItem>
-                <SelectItem value="l">Left</SelectItem>
-                <SelectItem value="r">Right</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-          <div class="space-y-2">
-            <Label :for="inputId('backdrop-badge-direction')">Badge direction</Label>
-            <Select
-              :model-value="editBackdropBadgeDirection"
-              @update:model-value="editBackdropBadgeDirection = $event as string"
-            >
-              <SelectTrigger :id="inputId('backdrop-badge-direction')" class="max-w-xs" data-testid="backdrop-badge-direction-select">
-                <SelectValue placeholder="Select direction" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="d">Default</SelectItem>
-                <SelectItem value="h">Horizontal</SelectItem>
-                <SelectItem value="v">Vertical</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-        </div>
-        <div class="flex-1 min-w-[180px] space-y-3">
-          <div class="space-y-2">
-            <Label :for="inputId('backdrop-badge-size')">Badge size</Label>
-            <Select
-              :model-value="editBackdropBadgeSize"
-              @update:model-value="editBackdropBadgeSize = $event as string"
-            >
-              <SelectTrigger :id="inputId('backdrop-badge-size')" class="max-w-xs" data-testid="backdrop-badge-size-select">
-                <SelectValue placeholder="Select size" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="xs">Extra Small</SelectItem>
-                <SelectItem value="s">Small</SelectItem>
-                <SelectItem value="m">Medium</SelectItem>
-                <SelectItem value="l">Large</SelectItem>
-                <SelectItem value="xl">Extra Large</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-          <div class="space-y-2">
-            <Label :for="inputId('backdrop-badge-background')">Badge background</Label>
-            <Select
-              :model-value="editBackdropBadgeBackground"
-              @update:model-value="editBackdropBadgeBackground = $event as string"
-            >
-              <SelectTrigger :id="inputId('backdrop-badge-background')" class="max-w-xs" data-testid="backdrop-badge-background-select">
-                <SelectValue placeholder="Select background" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="d">Default</SelectItem>
-                <SelectItem value="k">Dark</SelectItem>
-                <SelectItem value="t">Transparent</SelectItem>
-                <SelectItem value="n">None</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-          <div class="space-y-2">
-            <Label :for="inputId('backdrop-badge-style')">Badge style</Label>
-            <Select
-              :model-value="editBackdropBadgeStyle"
-              :disabled="editBackdropBadgeShape === 'p'"
-              @update:model-value="editBackdropBadgeStyle = $event as string"
-            >
-              <SelectTrigger :id="inputId('backdrop-badge-style')" class="max-w-xs" data-testid="backdrop-badge-style-select">
-                <SelectValue placeholder="Select style" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="h">Horizontal</SelectItem>
-                <SelectItem value="v">Vertical</SelectItem>
-              </SelectContent>
-            </Select>
-            <p v-if="editBackdropBadgeShape === 'p'" class="text-xs text-muted-foreground">Pills always render horizontally.</p>
-          </div>
-        </div>
-      </div>
     </div>
 
     <!-- Section 4: Logo -->