From f1adf7e125b5bca81f905f4fd7df1cb6ede109e9 Mon Sep 17 00:00:00 2001
From: satof3 <satof.design@gmail.com>
Date: Wed, 29 Jan 2025 05:10:28 +0000
Subject: [PATCH] Fix layout when using custom logo

---
 .../Sidebar/AppTitle/AppTitle.module.scss     | 15 ---------------
 .../Sidebar/SidebarBrandLogo.module.scss      | 19 +++++++++++++++++++
 .../components/Sidebar/SidebarBrandLogo.tsx   |  4 +++-
 .../Sidebar/SidebarHead/SidebarHead.tsx       |  2 +-
 4 files changed, 23 insertions(+), 17 deletions(-)
 create mode 100644 apps/app/src/client/components/Sidebar/SidebarBrandLogo.module.scss

diff --git a/apps/app/src/client/components/Sidebar/AppTitle/AppTitle.module.scss b/apps/app/src/client/components/Sidebar/AppTitle/AppTitle.module.scss
index 102c9a8df64..8f4a61e390d 100644
--- a/apps/app/src/client/components/Sidebar/AppTitle/AppTitle.module.scss
+++ b/apps/app/src/client/components/Sidebar/AppTitle/AppTitle.module.scss
@@ -5,21 +5,6 @@
 
 // GROWI Logo
 .grw-app-title :global {
-  .grw-logo {
-    $width: var.$grw-sidebar-nav-width;
-    $height: var.$grw-sidebar-nav-width; // declare $height with the same value as the sidebar nav width
-    $logomark-width: 27.7px;
-    $logomark-height: 24px;
-
-    width: $width;
-
-    svg {
-      width: $width;
-      height: $height;
-      padding: (($height - $logomark-height) / 2) (($width - $logomark-width) / 2);
-    }
-  }
-
   .confidential-tooltip {
     max-width: 180px;
   }
diff --git a/apps/app/src/client/components/Sidebar/SidebarBrandLogo.module.scss b/apps/app/src/client/components/Sidebar/SidebarBrandLogo.module.scss
new file mode 100644
index 00000000000..ebb31f26bff
--- /dev/null
+++ b/apps/app/src/client/components/Sidebar/SidebarBrandLogo.module.scss
@@ -0,0 +1,19 @@
+@use '~/styles/variables' as var;
+
+// GROWI Logo
+.grw-logo {
+  $width: var.$grw-sidebar-nav-width;
+  $height: var.$grw-sidebar-nav-width;
+  $logomark-width: 27.7px;
+  $logomark-height: 24px;
+
+  width: $width;
+
+  :global {
+    svg {
+      width: $width;
+      height: $height;
+      padding: (($height - $logomark-height) / 2) (($width - $logomark-width) / 2);
+    }
+  }
+}
diff --git a/apps/app/src/client/components/Sidebar/SidebarBrandLogo.tsx b/apps/app/src/client/components/Sidebar/SidebarBrandLogo.tsx
index f53aa0ed08c..ddc8b621977 100644
--- a/apps/app/src/client/components/Sidebar/SidebarBrandLogo.tsx
+++ b/apps/app/src/client/components/Sidebar/SidebarBrandLogo.tsx
@@ -2,6 +2,8 @@ import { memo } from 'react';
 
 import GrowiLogo from '../../../components/Common/GrowiLogo';
 
+import styles from './SidebarBrandLogo.module.scss';
+
 type SidebarBrandLogoProps = {
   isDefaultLogo?: boolean
 }
@@ -10,7 +12,7 @@ export const SidebarBrandLogo = memo((props: SidebarBrandLogoProps) => {
   const { isDefaultLogo } = props;
 
   return isDefaultLogo
-    ? <GrowiLogo />
+    ? <div className={styles['grw-logo']}><GrowiLogo /></div>
     // eslint-disable-next-line @next/next/no-img-element
     : (<div><img src="/attachment/brand-logo" alt="custom logo" className="picture picture-lg p-2" id="settingBrandLogo" /></div>);
 });
diff --git a/apps/app/src/client/components/Sidebar/SidebarHead/SidebarHead.tsx b/apps/app/src/client/components/Sidebar/SidebarHead/SidebarHead.tsx
index eba9d31145c..cef45d17b12 100644
--- a/apps/app/src/client/components/Sidebar/SidebarHead/SidebarHead.tsx
+++ b/apps/app/src/client/components/Sidebar/SidebarHead/SidebarHead.tsx
@@ -23,7 +23,7 @@ export const SidebarHead: FC = memo(() => {
       {editorMode === EditorMode.Editor ? (
         <Link
           href="/"
-          className="grw-editor-logo p-2"
+          className="grw-editor-logo"
           data-testid="btn-brand-logo"
         >
           <SidebarBrandLogo isDefaultLogo={isDefaultLogo} />