From b7394c98a44ad172317d7581b44265d92e159d56 Mon Sep 17 00:00:00 2001
From: Konv Suu <2583695112@qq.com>
Date: Fri, 1 Aug 2025 14:45:08 +0800
Subject: [PATCH] feat: add smooth transition animation to narrow mode toggle
 (#8740)

---
 .../src/pages/home/Messages/NarrowLayout.tsx  | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/renderer/src/pages/home/Messages/NarrowLayout.tsx b/src/renderer/src/pages/home/Messages/NarrowLayout.tsx
index 6431bb151c..7a7c641670 100644
--- a/src/renderer/src/pages/home/Messages/NarrowLayout.tsx
+++ b/src/renderer/src/pages/home/Messages/NarrowLayout.tsx
@@ -9,22 +9,23 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
 const NarrowLayout: FC<Props> = ({ children, ...props }) => {
   const { narrowMode } = useSettings()
 
-  if (narrowMode) {
-    return (
-      <Container className="narrow-mode" {...props}>
-        {children}
-      </Container>
-    )
-  }
-
-  return children
+  return (
+    <Container className={`narrow-mode ${narrowMode ? 'active' : ''}`} {...props}>
+      {children}
+    </Container>
+  )
 }
 
 const Container = styled.div`
-  max-width: 800px;
+  max-width: 100%;
   width: 100%;
   margin: 0 auto;
   position: relative;
+  transition: max-width 0.3s ease-in-out;
+
+  &.active {
+    max-width: 800px;
+  }
 `
 
 export default NarrowLayout