From 8e88bde7efca7e64fd5d387a82401ce7b33ef01d Mon Sep 17 00:00:00 2001
From: perf3ct <jonfuller2012@gmail.com>
Date: Mon, 16 Jun 2025 21:01:02 +0000
Subject: [PATCH] feat(client): give more space to the quick search bar

---
 .../GlobalSearchBar/GlobalSearchBar.tsx          | 16 +++++++++-------
 frontend/src/components/Layout/AppLayout.tsx     |  5 +++--
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/GlobalSearchBar/GlobalSearchBar.tsx b/frontend/src/components/GlobalSearchBar/GlobalSearchBar.tsx
index d38abfc..fb77792 100644
--- a/frontend/src/components/GlobalSearchBar/GlobalSearchBar.tsx
+++ b/frontend/src/components/GlobalSearchBar/GlobalSearchBar.tsx
@@ -142,7 +142,7 @@ const GlobalSearchBar: React.FC<GlobalSearchBarProps> = ({ sx, ...props }) => {
         query: searchQuery.trim(),
         limit: 5, // Show only top 5 results in global search
         include_snippets: true, // Include snippets for context
-        snippet_length: 100, // Shorter snippets for quick search
+        snippet_length: 200, // Longer snippets for better context in quick search
         search_mode: searchQuery.length < 4 ? 'fuzzy' : 'simple', // Use fuzzy for short queries (substring matching)
       };
 
@@ -364,8 +364,9 @@ const GlobalSearchBar: React.FC<GlobalSearchBarProps> = ({ sx, ...props }) => {
               ),
             }}
             sx={{
-              minWidth: 320,
-              maxWidth: 420,
+              width: '100%',
+              minWidth: 600,
+              maxWidth: 1200,
               '& .MuiOutlinedInput-root': {
                 background: theme.palette.mode === 'light'
                   ? 'linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(248,250,252,0.90) 100%)'
@@ -698,17 +699,18 @@ const GlobalSearchBar: React.FC<GlobalSearchBarProps> = ({ sx, ...props }) => {
                                     variant="caption" 
                                     color="text.secondary"
                                     sx={{
-                                      display: 'block',
+                                      display: '-webkit-box',
                                       overflow: 'hidden',
-                                      textOverflow: 'ellipsis',
-                                      whiteSpace: 'nowrap',
+                                      WebkitBoxOrient: 'vertical',
+                                      WebkitLineClamp: 2,
                                       fontSize: '0.7rem',
                                       fontStyle: 'italic',
                                       maxWidth: '100%',
                                       flex: 1,
+                                      lineHeight: 1.3,
                                     }}
                                   >
-                                    {highlightText(doc.snippets[0]?.text?.substring(0, 80) + '...' || '', query)}
+                                    {highlightText(doc.snippets[0]?.text?.substring(0, 150) + '...' || '', query)}
                                   </Typography>
                                 )}
                               </Box>
diff --git a/frontend/src/components/Layout/AppLayout.tsx b/frontend/src/components/Layout/AppLayout.tsx
index 65a1fa9..01fd62d 100644
--- a/frontend/src/components/Layout/AppLayout.tsx
+++ b/frontend/src/components/Layout/AppLayout.tsx
@@ -363,7 +363,8 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
           
           <Typography variant="h6" noWrap component="div" sx={{ 
             fontWeight: 700, 
-            mr: 2,
+            mr: 1,
+            fontSize: '1.1rem',
             background: theme.palette.mode === 'light'
               ? 'linear-gradient(135deg, #1e293b 0%, #6366f1 100%)'
               : 'linear-gradient(135deg, #f8fafc 0%, #a855f7 100%)',
@@ -376,7 +377,7 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
           </Typography>
 
           {/* Global Search Bar */}
-          <Box sx={{ flexGrow: 1, display: 'flex', justifyContent: 'center', mr: 3 }}>
+          <Box sx={{ flexGrow: 1, display: 'flex', justifyContent: 'center', mx: 2 }}>
             <GlobalSearchBar />
           </Box>