From b42e38b153456c88219a1fe32bfeb4622a6f19f4 Mon Sep 17 00:00:00 2001
From: Supertiger <saawalkhn@googlemail.com>
Date: Sat, 14 Dec 2024 15:25:02 +0000
Subject: [PATCH] expand banner to the edge in profile pane

---
 src/components/profile-pane/ProfilePane.tsx | 22 +++++++++++----------
 src/components/ui/Banner.tsx                |  2 ++
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/components/profile-pane/ProfilePane.tsx b/src/components/profile-pane/ProfilePane.tsx
index 9a329818..6d4d181a 100644
--- a/src/components/profile-pane/ProfilePane.tsx
+++ b/src/components/profile-pane/ProfilePane.tsx
@@ -194,21 +194,23 @@ export default function ProfilePane() {
     <>
       <MetaTitle>{!user() ? "Profile" : user()?.username}</MetaTitle>
       <Show when={user()}>
+        <Banner
+          maxHeight={320}
+          animate
+          margin={0}
+          hexColor={user()?.hexColor}
+          url={bannerUrl(user()!)}
+          class={css`
+            z-index: 111;
+            margin: 4px;
+          `}
+          style={isVisible() ? { "margin-right": "10px" } : {}}
+        />
         <div
           class={styles.profilePane}
           style={isVisible() ? { "margin-right": "10px" } : {}}
         >
           <div class={classNames(styles.topArea)}>
-            <Banner
-              maxHeight={250}
-              animate
-              margin={0}
-              hexColor={user()?.hexColor}
-              url={bannerUrl(user()!)}
-              class={css`
-                z-index: 111;
-              `}
-            />
             <FlexColumn class={styles.topAreaContent}>
               <FlexRow>
                 <Avatar
diff --git a/src/components/ui/Banner.tsx b/src/components/ui/Banner.tsx
index 3d17c538..5c69c42a 100644
--- a/src/components/ui/Banner.tsx
+++ b/src/components/ui/Banner.tsx
@@ -53,6 +53,7 @@ export function Banner(props: {
   maxHeight?: number;
   animate?: boolean;
   children?: JSXElement;
+  style?: JSX.CSSProperties;
 }) {
   const { hasFocus } = useWindowProperties();
 
@@ -76,6 +77,7 @@ export function Banner(props: {
   const getStyles = () => {
     const styles: JSX.CSSProperties = {
       flex: "1",
+      ...props.style,
     };
 
     if (props.maxHeight !== undefined) {