Merge pull request #28 from SudharsanSaravanan/fix/search-bar-graph-mobile

Fix search bar responsiveness on mobile, closes #27

Author: CipherYuvraj

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'