From 115e600ad405c81720aa1a050e2a24fecea1aec6 Mon Sep 17 00:00:00 2001
From: Keisuke Minami <lastshogun13@gmail.com>
Date: Sat, 26 Jul 2025 15:22:31 +0700
Subject: [PATCH 1/5] Fixed an issue where the gear button could not be clicked
 if the email address was long.
 https://github.com/aws-samples/generative-ai-use-cases/issues/1173

---
 packages/web/src/components/DrawerBase.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/web/src/components/DrawerBase.tsx b/packages/web/src/components/DrawerBase.tsx
index ce3a0d0b6..39d894bb4 100644
--- a/packages/web/src/components/DrawerBase.tsx
+++ b/packages/web/src/components/DrawerBase.tsx
@@ -41,16 +41,16 @@ const DrawerBase: React.FC<Props> = (props) => {
         <div className="flex h-full flex-col">
           {props.children}
           <div className="flex flex-none items-center justify-between gap-x-2 border-t border-gray-400 px-3 py-2">
-            {settingShowEmail && <div className="text-sm">{email}</div>}
-            <div className="grow" />
-            <Link to="/stats" title={t('stat.title')}>
-              <PiChartBar className="text-lg" />
-            </Link>
             <Link to={settingUrl}>
               <IconWithDot showDot={hasUpdate}>
                 <PiGear className="text-lg" />
               </IconWithDot>
             </Link>
+            <Link to="/stats" title={t('stat.title')}>
+              <PiChartBar className="text-lg" />
+            </Link>
+            {settingShowEmail && <div className="text-xs">{email}</div>}
+            <div className="grow" />
           </div>
         </div>
       </nav>

From 098414b2daf6206309445fe0d368658d2b5fac1a Mon Sep 17 00:00:00 2001
From: Keisuke Minami <lastshogun13@gmail.com>
Date: Mon, 28 Jul 2025 19:26:33 +0700
Subject: [PATCH 2/5] truncate at 23 bytes.

---
 packages/web/src/components/DrawerBase.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/web/src/components/DrawerBase.tsx b/packages/web/src/components/DrawerBase.tsx
index 39d894bb4..e9808fefd 100644
--- a/packages/web/src/components/DrawerBase.tsx
+++ b/packages/web/src/components/DrawerBase.tsx
@@ -49,7 +49,11 @@ const DrawerBase: React.FC<Props> = (props) => {
             <Link to="/stats" title={t('stat.title')}>
               <PiChartBar className="text-lg" />
             </Link>
-            {settingShowEmail && <div className="text-xs">{email}</div>}
+            {settingShowEmail && (
+              <div className="text-xs">
+                {email.length > 23 ? `${email.slice(0, 23)}...` : email}
+              </div>
+            )}
             <div className="grow" />
           </div>
         </div>

From d62a00a5d4b9932cb8e6c844472c31c47b19eba7 Mon Sep 17 00:00:00 2001
From: Keisuke Minami <lastshogun13@gmail.com>
Date: Thu, 31 Jul 2025 08:58:51 +0700
Subject: [PATCH 3/5] revert icon position

---
 packages/web/src/components/DrawerBase.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/web/src/components/DrawerBase.tsx b/packages/web/src/components/DrawerBase.tsx
index e9808fefd..0a9312c2e 100644
--- a/packages/web/src/components/DrawerBase.tsx
+++ b/packages/web/src/components/DrawerBase.tsx
@@ -41,6 +41,12 @@ const DrawerBase: React.FC<Props> = (props) => {
         <div className="flex h-full flex-col">
           {props.children}
           <div className="flex flex-none items-center justify-between gap-x-2 border-t border-gray-400 px-3 py-2">
+            {settingShowEmail && (
+              <div className="text-xs">
+                {email.length > 23 ? `${email.slice(0, 23)}...` : email}
+              </div>
+            )}
+            <div className="grow" />
             <Link to={settingUrl}>
               <IconWithDot showDot={hasUpdate}>
                 <PiGear className="text-lg" />
@@ -49,12 +55,6 @@ const DrawerBase: React.FC<Props> = (props) => {
             <Link to="/stats" title={t('stat.title')}>
               <PiChartBar className="text-lg" />
             </Link>
-            {settingShowEmail && (
-              <div className="text-xs">
-                {email.length > 23 ? `${email.slice(0, 23)}...` : email}
-              </div>
-            )}
-            <div className="grow" />
           </div>
         </div>
       </nav>

From 986956dea9ae1a679c9488aa163f143b28f86f3e Mon Sep 17 00:00:00 2001
From: Keisuke Minami <lastshogun13@gmail.com>
Date: Fri, 1 Aug 2025 12:27:53 +0700
Subject: [PATCH 4/5] use truncate class on tailwind

---
 packages/web/src/components/DrawerBase.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/web/src/components/DrawerBase.tsx b/packages/web/src/components/DrawerBase.tsx
index 0a9312c2e..41490d923 100644
--- a/packages/web/src/components/DrawerBase.tsx
+++ b/packages/web/src/components/DrawerBase.tsx
@@ -42,9 +42,7 @@ const DrawerBase: React.FC<Props> = (props) => {
           {props.children}
           <div className="flex flex-none items-center justify-between gap-x-2 border-t border-gray-400 px-3 py-2">
             {settingShowEmail && (
-              <div className="text-xs">
-                {email.length > 23 ? `${email.slice(0, 23)}...` : email}
-              </div>
+              <div className="truncate text-xs">{email}</div>
             )}
             <div className="grow" />
             <Link to={settingUrl}>

From 0d78922220845f1e42a162f68c3a2ae1929001a2 Mon Sep 17 00:00:00 2001
From: Keisuke Minami <lastshogun13@gmail.com>
Date: Fri, 1 Aug 2025 12:35:16 +0700
Subject: [PATCH 5/5] fix icon position

---
 packages/web/src/components/DrawerBase.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/web/src/components/DrawerBase.tsx b/packages/web/src/components/DrawerBase.tsx
index 41490d923..22ff8a83e 100644
--- a/packages/web/src/components/DrawerBase.tsx
+++ b/packages/web/src/components/DrawerBase.tsx
@@ -45,14 +45,14 @@ const DrawerBase: React.FC<Props> = (props) => {
               <div className="truncate text-xs">{email}</div>
             )}
             <div className="grow" />
+            <Link to="/stats" title={t('stat.title')}>
+              <PiChartBar className="text-lg" />
+            </Link>
             <Link to={settingUrl}>
               <IconWithDot showDot={hasUpdate}>
                 <PiGear className="text-lg" />
               </IconWithDot>
             </Link>
-            <Link to="/stats" title={t('stat.title')}>
-              <PiChartBar className="text-lg" />
-            </Link>
           </div>
         </div>
       </nav>