From 6ff09ef06649c0a4b5ca95b8f803279c34a4112f Mon Sep 17 00:00:00 2001
From: Patrick Erber <patrick.erber@gmail.com>
Date: Thu, 19 Jun 2025 20:12:04 +0200
Subject: [PATCH] fix: the size of sidebar in the mobile mode

---
 ui/leafwiki-ui/src/features/search/Search.tsx   |  2 +-
 ui/leafwiki-ui/src/features/sidebar/Sidebar.tsx | 12 ++++++++----
 ui/leafwiki-ui/src/features/tree/TreeNode.tsx   |  4 ++--
 ui/leafwiki-ui/src/features/tree/TreeView.tsx   |  8 +++-----
 ui/leafwiki-ui/src/layout/AppLayout.tsx         |  8 ++------
 5 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/ui/leafwiki-ui/src/features/search/Search.tsx b/ui/leafwiki-ui/src/features/search/Search.tsx
index 675ca0f78..fe4c77075 100644
--- a/ui/leafwiki-ui/src/features/search/Search.tsx
+++ b/ui/leafwiki-ui/src/features/search/Search.tsx
@@ -46,7 +46,7 @@ export default function Search() {
   }
 
   return (
-    <div className="h-full">
+    <div className="ml-4 mr-4 mt-4">
       <div className="relative mb-2">
         <input
           autoFocus
diff --git a/ui/leafwiki-ui/src/features/sidebar/Sidebar.tsx b/ui/leafwiki-ui/src/features/sidebar/Sidebar.tsx
index 35d2ae999..9a795b035 100644
--- a/ui/leafwiki-ui/src/features/sidebar/Sidebar.tsx
+++ b/ui/leafwiki-ui/src/features/sidebar/Sidebar.tsx
@@ -14,8 +14,8 @@ export default function Sidebar() {
   ]
 
   return (
-    <aside key={'sidebar'} className="h-full">
-      <div className="mb-4 flex border-b text-sm">
+    <aside key={'sidebar'} className="flex flex-1 flex-col pb-2">
+      <div className="flex border-b pb-2 pl-4 pt-1 text-sm">
         {tabs.map((tab) => (
           <button
             key={tab.id}
@@ -33,10 +33,14 @@ export default function Sidebar() {
       </div>
 
       {/* Content */}
-      <div className={sidebarMode === 'tree' ? 'block h-full' : 'hidden'}>
+      <div
+        className={sidebarMode === 'tree' ? 'flex flex-1 flex-col' : 'hidden'}
+      >
         <TreeView />
       </div>
-      <div className={sidebarMode === 'search' ? 'block h-full' : 'hidden'}>
+      <div
+        className={sidebarMode === 'search' ? 'flex flex-1 flex-col' : 'hidden'}
+      >
         <Search />
       </div>
     </aside>
diff --git a/ui/leafwiki-ui/src/features/tree/TreeNode.tsx b/ui/leafwiki-ui/src/features/tree/TreeNode.tsx
index 98a689699..7305de064 100644
--- a/ui/leafwiki-ui/src/features/tree/TreeNode.tsx
+++ b/ui/leafwiki-ui/src/features/tree/TreeNode.tsx
@@ -43,7 +43,7 @@ export const TreeNode = React.memo(function TreeNode({
   )
 
   return (
-    <div>
+    <>
       <div
         className={`flex cursor-pointer items-center rounded-lg pb-1 pt-1 text-base transition-all duration-200 ease-in-out ${
           isActive
@@ -120,6 +120,6 @@ export const TreeNode = React.memo(function TreeNode({
             <TreeNode key={child.id} node={child} level={level + 1} />
           ))}
       </div>
-    </div>
+    </>
   )
 })
diff --git a/ui/leafwiki-ui/src/features/tree/TreeView.tsx b/ui/leafwiki-ui/src/features/tree/TreeView.tsx
index 7781d699a..53862513e 100644
--- a/ui/leafwiki-ui/src/features/tree/TreeView.tsx
+++ b/ui/leafwiki-ui/src/features/tree/TreeView.tsx
@@ -44,9 +44,9 @@ export default function TreeView() {
 
   return (
     <>
-      <div className="mt-4 h-full space-y-1">
+      <div className="ml-4 mr-4 mt-4">
         {!readOnlyMode && (
-          <div className="flex">
+          <div className="mb-1 flex">
             <TreeViewActionButton
               icon={
                 <Plus
@@ -71,9 +71,7 @@ export default function TreeView() {
             )}
           </div>
         )}
-        <div className="h-full">
-          {tree?.children.map((node) => <TreeNode key={node.id} node={node} />)}
-        </div>
+        {tree?.children.map((node) => <TreeNode key={node.id} node={node} />)}
       </div>
     </>
   )
diff --git a/ui/leafwiki-ui/src/layout/AppLayout.tsx b/ui/leafwiki-ui/src/layout/AppLayout.tsx
index 800f209f0..d8eac4c62 100644
--- a/ui/leafwiki-ui/src/layout/AppLayout.tsx
+++ b/ui/leafwiki-ui/src/layout/AppLayout.tsx
@@ -66,15 +66,11 @@ export default function AppLayout({ children }: { children: React.ReactNode }) {
       </header>
       <div className="flex h-[calc(100vh-85px)] transition-all duration-200">
         <div
-          className={`z-20 h-full overflow-hidden border-r border-gray-200 bg-white transition-all duration-200 max-sm:fixed ${
+          className={`z-20 h-full overflow-auto border-r border-gray-200 bg-white transition-all duration-200 max-sm:fixed max-sm:h-[calc(100vh-85px)] ${
             sidebarVisible ? 'w-96' : 'w-0'
           }`}
         >
-          <div className="h-full w-96 overflow-auto">
-            <div className="p-4">
-              <Sidebar />
-            </div>
-          </div>
+          <Sidebar />
         </div>
 
         <main