Fix Logo Swap UI issues

- Scale logo containers to 256px (w-64) for better visibility
- Add gap-8 between logos and separator for better spacing
- Fix background section empty state copy for logo-swap format
- Add shrink-0 to separator to prevent flex compression

Author: peelar

apps/app/src/components/layouts/LogoSwap.tsx

@@ -86,7 +86,7 @@ function LogoSwapComponent({
     if (separatorStyle === "none") return null;
 
     return (
-      <div className="flex items-center justify-center px-4">
+      <div className="flex shrink-0 items-center justify-center">
         {separatorStyle === "dash" && (
           <div className="h-[2px] w-10 rounded-full bg-white/25" />
         )}
@@ -153,16 +153,16 @@ function LogoSwapComponent({
         data-export-element
         data-element="container"
       >
-        <div className="flex items-center">
+        <div className="flex items-center gap-8">
           {/* Left logo */}
-          <div className="flex h-40 w-40 items-center justify-center">
+          <div className="flex h-64 w-64 items-center justify-center">
             {renderLogo(leftLogoAsset, "left")}
           </div>
 
           {renderSeparator()}
 
           {/* Right logo */}
-          <div className="flex h-40 w-40 items-center justify-center">
+          <div className="flex h-64 w-64 items-center justify-center">
             {renderLogo(rightLogoAsset, "right")}
           </div>
         </div>

apps/app/src/components/sidebar/background-section.tsx

@@ -26,6 +26,7 @@ import { track } from "@/lib/analytics";
 import type { BackgroundConfig, ColorToken } from "@/domain/layout/types";
 import type { BackgroundSelection, PersonalBackground } from "@/domain/backgrounds/types";
 import type { Asset } from "@/domain/asset/types";
+import { getLayoutFormat } from "@/domain/layout-def/definitions";
 
 interface BackgroundSectionProps {
   variant?: "default" | "inline";
@@ -204,10 +205,15 @@ export function BackgroundSection({ variant = "default" }: BackgroundSectionProp
     [totalPages],
   );
 
+  const isLogoSwapFormat = getLayoutFormat(config.layoutId) === "logo-swap";
+  const emptyStateMessage = isLogoSwapFormat
+    ? "Upload logos to generate backgrounds."
+    : "Upload a screenshot to generate backgrounds.";
+
   const emptyState = (
     <div className="rounded-lg border border-border/60 bg-muted/30 px-3 py-3">
       <div className="text-xs text-muted-foreground">
-        Upload a screenshot to generate backgrounds.
+        {emptyStateMessage}
       </div>
     </div>
   );