fix: re-add missing header gradient styles (#1787)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Style**
* Enhanced header banner styling: centered, non-repeating cover images
with layered gradient overlays and adjusted user-profile banner
positioning for improved layout.
* **Bug Fixes**
* Banner display logic updated so "image" is treated like "yes" for
showing banner images.
* **Tests**
  * Added unit tests covering banner/theme display behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

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;
+}

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"
     />
 

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(' ');