Fixed modal background detection

Author: Stefan Ernst

frontend/src/lib/dialogs/RequestFormModal.svelte

@@ -2,7 +2,7 @@
   import { api } from '../api.js';
   import { authStore } from '../stores';
   import { portalAuthStore } from '../stores/portalAuth.svelte.js';
-  import { portalStore, gradients, iconMap } from '../stores/portal.svelte.js';
+  import { portalStore, iconMap } from '../stores/portal.svelte.js';
   import Button from '../components/Button.svelte';
   import CustomFieldRenderer from '../features/items/CustomFieldRenderer.svelte';
   import Spinner from '../components/Spinner.svelte';
@@ -49,11 +49,6 @@
   let isLastStep = $derived(currentStep === Math.max(...steps));
   let isFirstStep = $derived(currentStep === Math.min(...steps));
 
-  // Get gradient - use portal gradient or fallback
-  let gradientValue = $derived(
-    gradients[portalStore.selectedGradient]?.value ||
-    gradients[0].value
-  );
 
   // Load fields when modal opens
   $effect(() => {
@@ -260,7 +255,7 @@
     <!-- Gradient Header with Integrated Stepper -->
     <div
       class="px-8 pt-8 pb-6 text-white text-center relative"
-      style="background: {gradientValue};"
+      style="{portalStore.headerBackgroundStyle}"
     >
       <!-- Close button -->
       <button

frontend/src/lib/portal/PortalLoginModal.svelte

@@ -1,6 +1,6 @@
 <script>
   import { X, Mail, User, Lock, Building2 } from 'lucide-svelte';
-  import { portalStore, gradients } from '../stores/portal.svelte.js';
+  import { portalStore } from '../stores/portal.svelte.js';
   import { portalAuthStore } from '../stores/portalAuth.svelte.js';
   import { authStore } from '../stores';
   import { t } from '../stores/i18n.svelte.js';
@@ -80,19 +80,6 @@
     }
   }
 
-  // Compute background style - image takes priority over gradient (same logic as PortalHero)
-  const headerBackgroundStyle = $derived(() => {
-    if (portalStore.backgroundImageUrl) {
-      return `background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url(${portalStore.backgroundImageUrl}) center/cover no-repeat;`;
-    }
-    // Use selected gradient, or fall back to first gradient with a value
-    const gradientValue = gradients[portalStore.selectedGradient]?.value;
-    if (gradientValue) {
-      return `background: ${gradientValue};`;
-    }
-    // Fall back to first gradient with a value (index 1 = "Blue to Purple")
-    return `background: ${gradients[1].value};`;
-  });
 </script>
 
 <svelte:window onkeydown={handleKeydown} />
@@ -115,7 +102,7 @@
         <!-- Email Sent Confirmation - Gradient Header -->
         <div
           class="px-8 py-12 text-white text-center relative"
-          style="{headerBackgroundStyle()}"
+          style="{portalStore.headerBackgroundStyle}"
         >
           <div class="absolute top-4 right-4">
             <button
@@ -154,7 +141,7 @@
         <!-- Magic Link Login Form - Gradient Header -->
         <div
           class="px-8 py-12 text-white text-center relative"
-          style="{headerBackgroundStyle()}"
+          style="{portalStore.headerBackgroundStyle}"
         >
           <div class="absolute top-4 right-4">
             <button
@@ -240,7 +227,7 @@
         <!-- Internal Login Form - Gradient Header -->
         <div
           class="px-8 py-12 text-white text-center relative"
-          style="{headerBackgroundStyle()}"
+          style="{portalStore.headerBackgroundStyle}"
         >
           <div class="absolute top-4 right-4">
             <button

frontend/src/lib/stores/portal.svelte.js

@@ -918,6 +918,18 @@ export const portalStore = {
   get selectedBackgroundCategory() { return selectedBackgroundCategory; },
   get hasBackgroundImage() { return backgroundImageUrl !== null && backgroundImageUrl !== ''; },
   get hasGradient() { return !backgroundImageUrl && selectedGradient > 0 && gradients[selectedGradient]?.value; },
+  // Computed header background style - image takes priority over gradient
+  get headerBackgroundStyle() {
+    if (backgroundImageUrl) {
+      return `background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url(${backgroundImageUrl}) center/cover no-repeat;`;
+    }
+    const gradientValue = gradients[selectedGradient]?.value;
+    if (gradientValue) {
+      return `background: ${gradientValue};`;
+    }
+    // Fall back to first gradient with a value (index 1 = "Blue to Purple")
+    return `background: ${gradients[1].value};`;
+  },
 
   // Getters for logo state
   get logoUrl() { return logoUrl; },