- improved UI for sessions page

src/components/SessionForm/HitSearchCard.tsx

@@ -9,38 +9,36 @@ const SessionCard = () => {
   const { dispatch } = useAlertHitContext();
 
   return (
-    <Card className="p-4">
+    <Card className="p-4 col-span-5">
       <CardHeader title={"Hit Search"} />
       <div className="flex flex-col gap-4 px-2">
+        <label htmlFor="VRM" className="font-medium whitespace-nowrap md:w-1/2 text-left">
+          VRM (Min 2 letters)
+        </label>
         <FormGroup>
-          <label
-            htmlFor="VRM"
-            className="font-medium whitespace-nowrap md:w-1/2 text-left"
-          >
-            VRM (Min 2 letters)
-          </label>
-          <div className="flex-1 flex justify-end md:w-2/3">
+          <div className="flex flex-row justify-between md:w-full space-x-3">
             <input
               id="VRMSelect"
               name="VRMSelect"
               type="text"
-              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
+              className="p-2 border border-gray-400 rounded-lg w-full max-w-[70%] focus:border-emerald-400 focus:outline-none focus:ring-2 focus:ring-emerald-400/30"
               placeholder="Enter VRM"
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
             />
+
+            <button
+              className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-[30%] mx-3"
+              onClick={() => dispatch({ type: "SEARCH", payload: searchTerm })}
+              disabled={searchTerm.trim().length < 2}
+            >
+              Search Hit list
+            </button>
           </div>
         </FormGroup>
-        <button
-          className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full mx-auto"
-          onClick={() => dispatch({ type: "SEARCH", payload: searchTerm })}
-          disabled={searchTerm.trim().length < 2}
-        >
-          Search Hit list
-        </button>
         {searchTerm && (
           <button
-            className="bg-gray-300 text-gray-900 px-4 py-2 rounded hover:bg-gray-700 transition w-full mx-auto"
+            className="bg-gray-300 text-gray-900 px-4 py-2 rounded hover:bg-gray-700 transition w-[30%] "
             onClick={() => {
               setSearchTerm("");
               dispatch({ type: "SEARCH", payload: "" });