Restructure settings form into sidebar + 2-col grid layout for Poster/Backdrop/Logo/Episode

web/src/components/RenderSettingsForm.vue

@@ -471,7 +471,8 @@ function toggleExclude(key: string, checked: boolean) {
 </script>
 
 <template>
-  <div class="space-y-4">
+  <div class="grid grid-cols-1 lg:grid-cols-[300px_1fr] gap-6 items-start">
+    <div class="space-y-4 lg:sticky lg:top-4">
     <div class="flex items-center gap-2">
       <p class="text-sm font-semibold">Image Settings</p>
       <span
@@ -550,6 +551,39 @@ function toggleExclude(key: string, checked: boolean) {
       </div>
     </div>
 
+    <div class="flex items-center gap-3 pt-1 min-h-[32px]">
+      <Button
+        v-if="resetSettings && !currentSettings.is_default"
+        variant="outline"
+        size="sm"
+        :disabled="saving"
+        @click="handleReset"
+      >
+        Reset to defaults
+      </Button>
+      <Transition
+        enter-active-class="transition duration-200 ease-out"
+        enter-from-class="opacity-0"
+        enter-to-class="opacity-100"
+        leave-active-class="transition duration-150 ease-in"
+        leave-from-class="opacity-100"
+        leave-to-class="opacity-0"
+      >
+        <span v-if="saving" class="flex items-center gap-1.5 text-sm text-muted-foreground">
+          <Loader2 class="size-4 animate-spin" />
+          Saving...
+        </span>
+        <span v-else-if="showCheck" class="flex items-center gap-1.5 text-sm text-green-500">
+          <Check class="size-4" />
+          Saved
+        </span>
+      </Transition>
+      <span v-if="error" class="text-sm text-destructive">{{ error }}</span>
+    </div>
+    </div>
+
+    <div class="space-y-4">
+
     <!-- Preview by real ID -->
     <div class="rounded-md border p-4 space-y-3">
       <p class="text-sm font-semibold">Preview with real content</p>
@@ -575,6 +609,7 @@ function toggleExclude(key: string, checked: boolean) {
       </div>
     </div>
 
+    <div class="grid grid-cols-1 xl:grid-cols-2 gap-4">
     <!-- Section 2: Poster -->
     <div class="rounded-md border p-4 space-y-3">
       <p class="text-sm font-semibold">Poster</p>
@@ -1255,33 +1290,7 @@ function toggleExclude(key: string, checked: boolean) {
     </div>
 
     <div class="flex items-center gap-3 pt-1 min-h-[32px]">
-      <Button
-        v-if="resetSettings && !currentSettings.is_default"
-        variant="outline"
-        size="sm"
-        :disabled="saving"
-        @click="handleReset"
-      >
-        Reset to defaults
-      </Button>
-      <Transition
-        enter-active-class="transition duration-200 ease-out"
-        enter-from-class="opacity-0"
-        enter-to-class="opacity-100"
-        leave-active-class="transition duration-150 ease-in"
-        leave-from-class="opacity-100"
-        leave-to-class="opacity-0"
-      >
-        <span v-if="saving" class="flex items-center gap-1.5 text-sm text-muted-foreground">
-          <Loader2 class="size-4 animate-spin" />
-          Saving...
-        </span>
-        <span v-else-if="showCheck" class="flex items-center gap-1.5 text-sm text-green-500">
-          <Check class="size-4" />
-          Saved
-        </span>
-      </Transition>
-      <span v-if="error" class="text-sm text-destructive">{{ error }}</span>
     </div>
-  </div>
+    </div>
+    </div>
 </template>