From f73f9b4f4147616abd02fb350b7b1f2029a058e6 Mon Sep 17 00:00:00 2001
From: Eli Bosley <ekbosley@gmail.com>
Date: Fri, 14 Nov 2025 14:19:14 -0500
Subject: [PATCH 1/4] fix: re-add missing header gradient styles

---
 web/src/assets/main.css | 39 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/web/src/assets/main.css b/web/src/assets/main.css
index a4221aec12..dea0c1086f 100644
--- a/web/src/assets/main.css
+++ b/web/src/assets/main.css
@@ -156,3 +156,42 @@ iframe#progressFrame {
   background-color: var(--background-color);
   color-scheme: light;
 }
+
+/* Header banner compatibility tweaks */
+#header.image {
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.has-banner-gradient #header.image {
+  position: relative;
+  overflow: hidden;
+}
+
+.has-banner-gradient #header.image::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background-repeat: no-repeat;
+  background-position: left center, right center;
+  background-size: min(30%, 320px) 100%, min(30%, 320px) 100%;
+  background-image:
+    linear-gradient(
+      90deg,
+      var(--color-header-gradient-end, rgba(0, 0, 0, 0.7)) 0%,
+      var(--color-header-gradient-start, rgba(0, 0, 0, 0)) 100%
+    ),
+    linear-gradient(
+      270deg,
+      var(--color-header-gradient-end, rgba(0, 0, 0, 0.7)) 0%,
+      var(--color-header-gradient-start, rgba(0, 0, 0, 0)) 100%
+    );
+  z-index: 0;
+}
+
+.has-banner-gradient #header.image > * {
+  position: relative;
+  z-index: 1;
+}

From fdedf4081bb19eabf4535adc54b247031ce43aa5 Mon Sep 17 00:00:00 2001
From: Eli Bosley <ekbosley@gmail.com>
Date: Mon, 17 Nov 2025 10:39:59 -0500
Subject: [PATCH 2/4] fix: update banner image logic and improve user profile
 styles

- Adjusted the logic for displaying the banner image to include 'image' as a valid option.
- Enhanced the UserProfile component styles for better layout and responsiveness.
- Added a class for handling banner gradients in the theme store.
---
 .../resolvers/customization/customization.service.ts     | 2 +-
 web/src/components/UserProfile.standalone.vue            | 4 ++--
 web/src/store/theme.ts                                   | 9 ++++++++-
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/api/src/unraid-api/graph/resolvers/customization/customization.service.ts b/api/src/unraid-api/graph/resolvers/customization/customization.service.ts
index be008c42a4..5b27356e81 100644
--- a/api/src/unraid-api/graph/resolvers/customization/customization.service.ts
+++ b/api/src/unraid-api/graph/resolvers/customization/customization.service.ts
@@ -458,7 +458,7 @@ export class CustomizationService implements OnModuleInit {
 
         return {
             name,
-            showBannerImage: banner === 'yes',
+            showBannerImage: banner === 'image' || banner === 'yes',
             showBannerGradient: bannerGradient === 'yes',
             headerBackgroundColor: this.addHashtoHexField(bgColor),
             headerPrimaryTextColor: this.addHashtoHexField(textColor),
diff --git a/web/src/components/UserProfile.standalone.vue b/web/src/components/UserProfile.standalone.vue
index 711d3bc0e4..609ab906cd 100644
--- a/web/src/components/UserProfile.standalone.vue
+++ b/web/src/components/UserProfile.standalone.vue
@@ -94,11 +94,11 @@ onMounted(() => {
 <template>
   <div
     id="UserProfile"
-    class="text-foreground absolute top-0 right-0 z-20 flex h-full flex-col gap-y-1 pt-2 pr-2"
+    class="text-foreground absolute top-0 right-0 z-20 flex h-full max-w-full flex-col items-end gap-y-1 pt-2 pr-2"
   >
     <div
       v-if="bannerGradient"
-      class="absolute top-0 right-0 bottom-0 z-0 w-full"
+      class="pointer-events-none absolute inset-y-0 right-0 left-0 z-0 w-full"
       :style="bannerGradient"
     />
 
diff --git a/web/src/store/theme.ts b/web/src/store/theme.ts
index 92c200cde3..ae7abfce2a 100644
--- a/web/src/store/theme.ts
+++ b/web/src/store/theme.ts
@@ -211,6 +211,7 @@ export const useThemeStore = defineStore(
           : 'var(--header-gradient-end)';
 
         dynamicVars['--banner-gradient'] = `linear-gradient(90deg, ${start} 0, ${end} 90%)`;
+        customClasses.push('has-banner-gradient');
       }
 
       requestAnimationFrame(() => {
@@ -222,7 +223,13 @@ export const useThemeStore = defineStore(
         const cleanClassList = (classList: string) =>
           classList
             .split(' ')
-            .filter((c) => !c.startsWith('theme-') && c !== 'dark' && !c.startsWith('has-custom-'))
+            .filter(
+              (c) =>
+                !c.startsWith('theme-') &&
+                c !== 'dark' &&
+                !c.startsWith('has-custom-') &&
+                c !== 'has-banner-gradient'
+            )
             .filter(Boolean)
             .join(' ');
 

From 53fef2cf7628a10c001d4584795dda3241d0d474 Mon Sep 17 00:00:00 2001
From: Eli Bosley <ekbosley@gmail.com>
Date: Mon, 17 Nov 2025 10:42:36 -0500
Subject: [PATCH 3/4] test: add unit tests for getTheme method in
 CustomizationService

- Introduced new tests to validate the behavior of the getTheme method, ensuring correct handling of banner image visibility based on display settings.
- Added scenarios to check the showBannerImage and showBannerGradient flags based on different banner configurations.
---
 .../customization.service.spec.ts             | 54 +++++++++++++++++++
 1 file changed, 54 insertions(+)

diff --git a/api/src/unraid-api/graph/resolvers/customization/customization.service.spec.ts b/api/src/unraid-api/graph/resolvers/customization/customization.service.spec.ts
index feae194caf..ce3dc6aec4 100644
--- a/api/src/unraid-api/graph/resolvers/customization/customization.service.spec.ts
+++ b/api/src/unraid-api/graph/resolvers/customization/customization.service.spec.ts
@@ -1182,4 +1182,58 @@ describe('CustomizationService - updateCfgFile', () => {
             writeError
         );
     });
+
+    describe('getTheme', () => {
+        const mockDynamix = getters.dynamix as unknown as vi.Mock;
+        const baseDisplay = {
+            theme: 'white',
+            banner: '',
+            showBannerGradient: 'no',
+            background: '123456',
+            headerdescription: 'yes',
+            headermetacolor: '789abc',
+            header: 'abcdef',
+        };
+
+        const setDisplay = (overrides: Partial<typeof baseDisplay>) => {
+            mockDynamix.mockReturnValue({
+                display: {
+                    ...baseDisplay,
+                    ...overrides,
+                },
+            });
+        };
+
+        it('reports showBannerImage when banner is "image"', async () => {
+            setDisplay({ banner: 'image' });
+
+            const theme = await service.getTheme();
+
+            expect(theme.showBannerImage).toBe(true);
+        });
+
+        it('reports showBannerImage when banner is "yes"', async () => {
+            setDisplay({ banner: 'yes' });
+
+            const theme = await service.getTheme();
+
+            expect(theme.showBannerImage).toBe(true);
+        });
+
+        it('disables showBannerImage when banner is empty', async () => {
+            setDisplay({ banner: '' });
+
+            const theme = await service.getTheme();
+
+            expect(theme.showBannerImage).toBe(false);
+        });
+
+        it('mirrors showBannerGradient flag from display settings', async () => {
+            setDisplay({ banner: 'image', showBannerGradient: 'yes' });
+            expect((await service.getTheme()).showBannerGradient).toBe(true);
+
+            setDisplay({ banner: 'image', showBannerGradient: 'no' });
+            expect((await service.getTheme()).showBannerGradient).toBe(false);
+        });
+    });
 });

From 080d95436a95acff0911a0e4cc1399a7f6aac1c5 Mon Sep 17 00:00:00 2001
From: Eli Bosley <ekbosley@gmail.com>
Date: Mon, 17 Nov 2025 10:47:40 -0500
Subject: [PATCH 4/4] refactor: update type casting for mockDynamix in
 CustomizationService tests

- Changed the type casting for mockDynamix from vi.Mock to Mock for improved type safety and clarity in the test suite.
---
 .../resolvers/customization/customization.service.spec.ts      | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/api/src/unraid-api/graph/resolvers/customization/customization.service.spec.ts b/api/src/unraid-api/graph/resolvers/customization/customization.service.spec.ts
index ce3dc6aec4..b719b0e60c 100644
--- a/api/src/unraid-api/graph/resolvers/customization/customization.service.spec.ts
+++ b/api/src/unraid-api/graph/resolvers/customization/customization.service.spec.ts
@@ -3,6 +3,7 @@ import { Test, TestingModule } from '@nestjs/testing';
 import * as fs from 'fs/promises';
 import * as path from 'path';
 
+import type { Mock } from 'vitest';
 import { plainToInstance } from 'class-transformer';
 import * as ini from 'ini';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
@@ -1184,7 +1185,7 @@ describe('CustomizationService - updateCfgFile', () => {
     });
 
     describe('getTheme', () => {
-        const mockDynamix = getters.dynamix as unknown as vi.Mock;
+        const mockDynamix = getters.dynamix as unknown as Mock;
         const baseDisplay = {
             theme: 'white',
             banner: '',