From 2cf39a6679577bb86269dc69498a3e08ba27eb27 Mon Sep 17 00:00:00 2001
From: Sudharsana Saravanan S <sudharsansaravanan2623@gmail.com>
Date: Sat, 4 Oct 2025 00:12:19 +0530
Subject: [PATCH] Fix search bar responsiveness on mobile, closes #27

---
 frontend/src/pages/GraphVisualizer.jsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/src/pages/GraphVisualizer.jsx b/frontend/src/pages/GraphVisualizer.jsx
index 5b365c0..f3e9482 100644
--- a/frontend/src/pages/GraphVisualizer.jsx
+++ b/frontend/src/pages/GraphVisualizer.jsx
@@ -549,26 +549,26 @@ const GraphVisualizer = ({ darkMode, setDarkMode }) => {
             : 'bg-white/20 border-white/50'
         }`}>
           <div className="bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 p-6">
-            <div className="flex justify-between items-center">
-              <div className="flex-1">
-                <h1 className="text-4xl font-bold mb-2 text-white">
+            <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 sm:gap-0">
+              <div className="w-full sm:flex-1">
+                <h1 className="text-2xl sm:text-4xl font-bold mb-2 text-white">
                   Graph Algorithm Visualizer
                 </h1>
-                <p className="text-blue-100">
+                <p className="text-sm sm:text-base text-blue-100">
                   Interactive graph algorithm visualization platform
                 </p>
               </div>
               
-              <div className="flex items-center space-x-4">
+              <div className="flex items-center space-x-2 sm:space-x-4 w-full sm:w-auto justify-start sm:justify-end">
                 {/* Search Bar */}
-                <div className="relative">
+                <div className="relative flex-1 sm:flex-none">
                   <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
                   <input
                     type="text"
                     placeholder="Search algorithms..."
                     value={searchTerm}
                     onChange={(e) => setSearchTerm(e.target.value)}
-                    className={`pl-10 pr-4 py-2 rounded-lg backdrop-blur-md border transition-all ${
+                    className={`w-full sm:w-auto pl-10 pr-4 py-2 rounded-lg backdrop-blur-md border transition-all ${
                       darkMode 
                         ? 'bg-gray-800/50 border-gray-600 text-white' 
                         : 'bg-white/50 border-white/30 text-gray-800'