From 5db4e619567526490b08448b90c6c1313948822c Mon Sep 17 00:00:00 2001
From: jeradrutnam <jeradrutnam@outlook.com>
Date: Wed, 6 Dec 2023 09:47:12 +0530
Subject: [PATCH 1/4] Add a fix for logo positioning

---
 .../src/features/core/components/header.tsx   | 68 +++++++------------
 .../themes/default/elements/header.overrides  |  1 +
 2 files changed, 27 insertions(+), 42 deletions(-)

diff --git a/apps/console/src/features/core/components/header.tsx b/apps/console/src/features/core/components/header.tsx
index 902e312ec45..953b5a32940 100644
--- a/apps/console/src/features/core/components/header.tsx
+++ b/apps/console/src/features/core/components/header.tsx
@@ -406,53 +406,37 @@ export const Header: FunctionComponent<HeaderPropsInterface> = (
         return true;
     };
 
+    const LOGO_IMAGE = () => {
+        return (
+            <Image
+                src={ resolveAppLogoFilePath(
+                    window[ "AppUtils" ].getConfig().ui.appLogoPath,
+                    `${ window[ "AppUtils" ].getConfig().clientOrigin
+                    }/` +
+                    `${ StringUtils.removeSlashesFromPath(
+                        window[ "AppUtils" ].getConfig()
+                            .appBase
+                    ) !== ""
+                        ? StringUtils.removeSlashesFromPath(
+                            window[ "AppUtils" ].getConfig()
+                                .appBase
+                        ) + "/"
+                        : ""
+                    }libs/themes/` +
+                    config.ui.theme.name
+                ) }
+                alt="logo"
+            />
+        )
+    }
+
     return (
         <OxygenHeader
             className="is-header"
             brand={ {
                 logo: {
-                    desktop: (
-                        <Image
-                            src={ resolveAppLogoFilePath(
-                                window[ "AppUtils" ].getConfig().ui.appLogoPath,
-                                `${ window[ "AppUtils" ].getConfig().clientOrigin
-                                }/` +
-                                `${ StringUtils.removeSlashesFromPath(
-                                    window[ "AppUtils" ].getConfig()
-                                        .appBase
-                                ) !== ""
-                                    ? StringUtils.removeSlashesFromPath(
-                                        window[ "AppUtils" ].getConfig()
-                                            .appBase
-                                    ) + "/"
-                                    : ""
-                                }libs/themes/` +
-                                config.ui.theme.name
-                            ) }
-                            alt="logo"
-                        />
-                    ),
-                    mobile: (
-                        <Image
-                            src={ resolveAppLogoFilePath(
-                                window[ "AppUtils" ].getConfig().ui.appLogoPath,
-                                `${ window[ "AppUtils" ].getConfig().clientOrigin
-                                }/` +
-                                `${ StringUtils.removeSlashesFromPath(
-                                    window[ "AppUtils" ].getConfig()
-                                        .appBase
-                                ) !== ""
-                                    ? StringUtils.removeSlashesFromPath(
-                                        window[ "AppUtils" ].getConfig()
-                                            .appBase
-                                    ) + "/"
-                                    : ""
-                                }libs/themes/` +
-                                config.ui.theme.name
-                            ) }
-                            alt="logo"
-                        />
-                    )
+                    desktop: (<LOGO_IMAGE />),
+                    mobile: (<LOGO_IMAGE />)
                 },
                 onClick: () => history.push(config.deployment.appHomePath),
                 title: config.ui.appName
diff --git a/modules/theme/src/themes/default/elements/header.overrides b/modules/theme/src/themes/default/elements/header.overrides
index 5faf0390061..d1c4901e484 100644
--- a/modules/theme/src/themes/default/elements/header.overrides
+++ b/modules/theme/src/themes/default/elements/header.overrides
@@ -84,6 +84,7 @@ h6.ui.header .sub.header {
 .is-header {
     &.oxygen-header .oxygen-brand {
         width: auto;
+        min-width: var(--oxygen-customComponents-Navbar-properties-width);
     }
 
     &.oxygen-header .oxygen-brand-logo {

From d00bb8bd40f1f54ccb9ccc6981e9b5a4931ef044 Mon Sep 17 00:00:00 2001
From: jeradrutnam <jeradrutnam@outlook.com>
Date: Mon, 11 Dec 2023 17:52:22 +0530
Subject: [PATCH 2/4] Fix logo misalignment issue when size changes

---
 modules/theme/src/themes/default/elements/header.overrides | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/modules/theme/src/themes/default/elements/header.overrides b/modules/theme/src/themes/default/elements/header.overrides
index d1c4901e484..3ff36500d87 100644
--- a/modules/theme/src/themes/default/elements/header.overrides
+++ b/modules/theme/src/themes/default/elements/header.overrides
@@ -84,7 +84,7 @@ h6.ui.header .sub.header {
 .is-header {
     &.oxygen-header .oxygen-brand {
         width: auto;
-        min-width: var(--oxygen-customComponents-Navbar-properties-width);
+        min-width: calc(var(--oxygen-customComponents-Navbar-properties-width) - 90px);
     }
 
     &.oxygen-header .oxygen-brand-logo {
@@ -105,5 +105,6 @@ h6.ui.header .sub.header {
 
     &.oxygen-header.with-hamburger .oxygen-header-toolbar .oxygen-brand {
         margin-left: 0 !important;
+        margin-right: 18px;
     }
 }

From 9b4c61b72fb370bba7230d3f6d3a18a53a79d70d Mon Sep 17 00:00:00 2001
From: jeradrutnam <jeradrutnam@outlook.com>
Date: Mon, 11 Dec 2023 17:58:34 +0530
Subject: [PATCH 3/4] =?UTF-8?q?Add=20changeset=20=F0=9F=A6=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .changeset/yellow-singers-accept.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/yellow-singers-accept.md

diff --git a/.changeset/yellow-singers-accept.md b/.changeset/yellow-singers-accept.md
new file mode 100644
index 00000000000..1d21fa47365
--- /dev/null
+++ b/.changeset/yellow-singers-accept.md
@@ -0,0 +1,6 @@
+---
+"@wso2is/console": patch
+"@wso2is/theme": patch
+---
+
+Fix logo misalignment

From efce4dbd1634bd7439e923a98ed3a72d604f3d93 Mon Sep 17 00:00:00 2001
From: jeradrutnam <jeradrutnam@outlook.com>
Date: Mon, 11 Dec 2023 18:03:21 +0530
Subject: [PATCH 4/4] Fix lint errors

---
 apps/console/src/features/core/components/header.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/console/src/features/core/components/header.tsx b/apps/console/src/features/core/components/header.tsx
index 953b5a32940..fdbf8b3998d 100644
--- a/apps/console/src/features/core/components/header.tsx
+++ b/apps/console/src/features/core/components/header.tsx
@@ -427,8 +427,8 @@ export const Header: FunctionComponent<HeaderPropsInterface> = (
                 ) }
                 alt="logo"
             />
-        )
-    }
+        );
+    };
 
     return (
         <OxygenHeader