From d8f166947c6eec24bbaeeb4aae7b2ae3ce544f04 Mon Sep 17 00:00:00 2001
From: sumona-banerjeee <sumobanerjee2000@gmail.com>
Date: Wed, 11 Feb 2026 18:10:49 +0530
Subject: [PATCH] Modal overflow changed

---
 app/create-location/page.tsx | 192 ++++++++++++++++-------------------
 app/create-package/page.tsx  |  72 +++++++------
 app/create-project/page.tsx  |  85 ++++++++--------
 app/globals.css              |  11 ++
 components/ui/select.tsx     |   6 +-
 5 files changed, 179 insertions(+), 187 deletions(-)

diff --git a/app/create-location/page.tsx b/app/create-location/page.tsx
index 9bc1640..07f4d21 100644
--- a/app/create-location/page.tsx
+++ b/app/create-location/page.tsx
@@ -290,7 +290,10 @@ export default function CreateLocationPage() {
 
             {/* Modal Dialog */}
             <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
-                <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
+                <DialogContent
+                    className="max-w-2xl"
+                    onOpenAutoFocus={(e) => e.preventDefault()}
+                >
                     <DialogHeader>
                         <DialogTitle className="flex items-center gap-2">
                             <MapPin className="h-5 w-5 text-blue-500" />
@@ -321,12 +324,12 @@ export default function CreateLocationPage() {
 
                     <form onSubmit={handleSubmit} className="space-y-6">
                         {/* Step 1: Select Project */}
-                        <div className="p-4 rounded-xl bg-gradient-to-r from-blue-50/50 to-indigo-50/40 dark:from-blue-950/20 dark:to-indigo-950/20 border border-blue-100 dark:border-blue-900/50">
-                            <div className="flex items-center gap-2 mb-3">
-                                <div className="w-6 h-6 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center">
-                                    <span className="text-white text-xs font-bold">1</span>
+                        <div className="p-3 rounded-xl bg-blue-50/80 dark:bg-blue-900/40 border border-blue-200 dark:border-blue-800 shadow-sm">
+                            <div className="flex items-center gap-2 mb-2">
+                                <div className="w-5 h-5 rounded-full bg-blue-600 flex items-center justify-center">
+                                    <span className="text-white text-[10px] font-bold">1</span>
                                 </div>
-                                <p className="text-sm font-bold text-blue-700 dark:text-blue-400">Select Project</p>
+                                <p className="text-xs font-bold text-blue-700 dark:text-blue-400">Select Project</p>
                             </div>
                             <Select value={selectedProjectId} onValueChange={setSelectedProjectId}>
                                 <SelectTrigger className="h-11 bg-white dark:bg-gray-800 border-blue-200 dark:border-blue-800 focus:border-blue-400">
@@ -343,25 +346,19 @@ export default function CreateLocationPage() {
                                     {projects.map(project => (
                                         <SelectItem key={project.id} value={project.id}>
                                             <span className="font-medium">{project.name}</span>
-                                            {project.state && <span className="text-gray-400 ml-2">({project.state})</span>}
                                         </SelectItem>
                                     ))}
                                 </SelectContent>
                             </Select>
-                            {selectedProject && (
-                                <div className="mt-2 px-3 py-1.5 rounded-lg bg-blue-100/50 dark:bg-blue-900/20 text-xs text-blue-600 dark:text-blue-400">
-                                    Selected: <span className="font-semibold">{selectedProject.name}</span>
-                                </div>
-                            )}
                         </div>
 
                         {/* Step 2: Select Package */}
-                        <div className={`p-4 rounded-xl bg-gradient-to-r from-blue-50/50 to-indigo-50/40 dark:from-blue-950/20 dark:to-indigo-950/20 border border-blue-100 dark:border-blue-900/50 transition-opacity duration-300 ${selectedProjectId ? 'opacity-100' : 'opacity-40 pointer-events-none'}`}>
-                            <div className="flex items-center gap-2 mb-3">
-                                <div className={`w-6 h-6 rounded-full flex items-center justify-center ${selectedProjectId ? 'bg-gradient-to-br from-blue-500 to-indigo-600' : 'bg-gray-300 dark:bg-gray-600'}`}>
-                                    <span className="text-white text-xs font-bold">2</span>
+                        <div className={`p-3 rounded-xl bg-blue-50/80 dark:bg-blue-900/40 border border-blue-200 dark:border-blue-800 shadow-sm transition-opacity duration-300 ${selectedProjectId ? 'opacity-100' : 'opacity-40 pointer-events-none'}`}>
+                            <div className="flex items-center gap-2 mb-2">
+                                <div className={`w-5 h-5 rounded-full flex items-center justify-center ${selectedProjectId ? 'bg-blue-600' : 'bg-gray-300 dark:bg-gray-600'}`}>
+                                    <span className="text-white text-[10px] font-bold">2</span>
                                 </div>
-                                <p className="text-sm font-bold text-blue-700 dark:text-blue-400">Select Package</p>
+                                <p className="text-xs font-bold text-blue-700 dark:text-blue-400">Select Package</p>
                             </div>
                             <Select value={selectedPackageId} onValueChange={setSelectedPackageId} disabled={!selectedProjectId}>
                                 <SelectTrigger className="h-11 bg-white dark:bg-gray-800 border-blue-200 dark:border-blue-800 focus:border-blue-400">
@@ -378,116 +375,101 @@ export default function CreateLocationPage() {
                                     {packages.map(pkg => (
                                         <SelectItem key={pkg.id} value={pkg.id}>
                                             <span className="font-medium">{pkg.name}</span>
-                                            {pkg.region && <span className="text-gray-400 ml-2">({pkg.region})</span>}
                                         </SelectItem>
                                     ))}
                                 </SelectContent>
                             </Select>
-                            {selectedPackage && (
-                                <div className="mt-2 px-3 py-1.5 rounded-lg bg-blue-100/50 dark:bg-blue-900/20 text-xs text-blue-600 dark:text-blue-400">
-                                    Selected: <span className="font-semibold">{selectedPackage.name}</span>
-                                    {selectedPackage.region && ` • ${selectedPackage.region}`}
-                                </div>
-                            )}
                         </div>
 
                         {/* Step 3: Location Details */}
-                        <div className={`space-y-5 transition-opacity duration-300 ${selectedPackageId ? 'opacity-100' : 'opacity-40 pointer-events-none'}`}>
+                        <div className={`space-y-4 transition-opacity duration-300 ${selectedPackageId ? 'opacity-100' : 'opacity-40 pointer-events-none'}`}>
                             <div className="flex items-center gap-2">
-                                <div className={`w-6 h-6 rounded-full flex items-center justify-center ${selectedPackageId ? 'bg-gradient-to-br from-blue-500 to-indigo-600' : 'bg-gray-300 dark:bg-gray-600'}`}>
-                                    <span className="text-white text-xs font-bold">3</span>
+                                <div className={`w-5 h-5 rounded-full flex items-center justify-center ${selectedPackageId ? 'bg-blue-600' : 'bg-gray-300 dark:bg-gray-600'}`}>
+                                    <span className="text-white text-[10px] font-bold">3</span>
                                 </div>
-                                <p className="text-sm font-bold text-gray-700 dark:text-gray-300">Location Information</p>
+                                <p className="text-xs font-bold text-gray-700 dark:text-gray-300">Location Information</p>
                             </div>
 
-                            {/* Segment Name */}
-                            <div className="space-y-2">
-                                <Label htmlFor="segment" className="text-sm font-semibold flex items-center gap-1">
-                                    Segment Name <span className="text-red-500">*</span>
-                                </Label>
-                                <Input
-                                    id="segment"
-                                    value={segmentName}
-                                    onChange={(e) => setSegmentName(e.target.value)}
-                                    placeholder="e.g., KM 120 to KM 135"
-                                    className="h-11"
-                                    required
-                                />
-                            </div>
-
-                            {/* Chainage */}
-                            <div className="grid grid-cols-2 gap-4">
-                                <div className="space-y-2">
-                                    <Label htmlFor="ch-start" className="text-sm font-semibold flex items-center gap-1">
-                                        <Milestone className="h-3.5 w-3.5 text-gray-400" />
-                                        Chainage Start (km) <span className="text-gray-400 font-normal text-xs">(Opt)</span>
+                            {/* Segment Name & Chainage Row */}
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                <div className="space-y-1.5">
+                                    <Label htmlFor="segment" className="text-xs font-semibold flex items-center gap-1">
+                                        Segment Name <span className="text-red-500">*</span>
                                     </Label>
                                     <Input
-                                        id="ch-start"
-                                        type="number"
-                                        step="any"
-                                        min="0"
-                                        value={chainageStartKm}
-                                        onChange={(e) => setChainageStartKm(e.target.value)}
-                                        placeholder="0"
-                                        className="h-10 text-sm"
+                                        id="segment"
+                                        value={segmentName}
+                                        onChange={(e) => setSegmentName(e.target.value)}
+                                        placeholder="Location to Location"
+                                        className="h-9 text-sm"
+                                        required
                                     />
                                 </div>
-                                <div className="space-y-2">
-                                    <Label htmlFor="ch-end" className="text-sm font-semibold flex items-center gap-1">
-                                        <Milestone className="h-3.5 w-3.5 text-gray-400" />
-                                        Chainage End (km) <span className="text-gray-400 font-normal text-xs">(Opt)</span>
-                                    </Label>
-                                    <Input
-                                        id="ch-end"
-                                        type="number"
-                                        step="any"
-                                        min="0"
-                                        value={chainageEndKm}
-                                        onChange={(e) => setChainageEndKm(e.target.value)}
-                                        placeholder="0"
-                                        className="h-10 text-sm"
-                                    />
-                                </div>
-                            </div>
-
-                            {/* GPS Coordinates */}
-                            <div className="space-y-4">
-                                <div className="flex items-center gap-2">
-                                    <div className="p-1.5 rounded-lg bg-gradient-to-br from-blue-400 to-indigo-500 shadow-md shadow-blue-500/20">
-                                        <MapPin className="h-4 w-4 text-white" />
+                                <div className="grid grid-cols-2 gap-2">
+                                    <div className="space-y-1.5">
+                                        <Label htmlFor="ch-start" className="text-[10px] font-semibold flex items-center gap-1">
+                                            Start (km)
+                                        </Label>
+                                        <Input
+                                            id="ch-start"
+                                            type="number"
+                                            step="any"
+                                            min="0"
+                                            value={chainageStartKm}
+                                            onChange={(e) => setChainageStartKm(e.target.value)}
+                                            placeholder="0"
+                                            className="h-9 text-sm"
+                                        />
+                                    </div>
+                                    <div className="space-y-1.5">
+                                        <Label htmlFor="ch-end" className="text-[10px] font-semibold flex items-center gap-1">
+                                            End (km)
+                                        </Label>
+                                        <Input
+                                            id="ch-end"
+                                            type="number"
+                                            step="any"
+                                            min="0"
+                                            value={chainageEndKm}
+                                            onChange={(e) => setChainageEndKm(e.target.value)}
+                                            placeholder="0"
+                                            className="h-9 text-sm"
+                                        />
                                     </div>
-                                    <h3 className="text-sm font-bold text-gray-700 dark:text-gray-300">GPS Coordinates</h3>
-                                    <span className="text-xs text-red-500 font-medium">Required</span>
                                 </div>
+                            </div>
 
+                            {/* GPS Coordinates Grid */}
+                            <div className="grid grid-cols-2 gap-3">
                                 {/* Start Point */}
-                                <div className="p-4 rounded-xl bg-gradient-to-r from-blue-50/50 to-indigo-50/40 dark:from-blue-950/20 dark:to-indigo-950/20 border border-blue-100 dark:border-blue-900/50">
-                                    <p className="text-xs font-semibold text-blue-600 dark:text-blue-400 mb-3 uppercase tracking-wide">Start Point</p>
-                                    <div className="grid grid-cols-2 gap-3">
-                                        <div className="space-y-1.5">
-                                            <Label htmlFor="s-lat" className="text-xs text-gray-500">Latitude *</Label>
+                                <div className="p-3 rounded-xl bg-blue-50/50 dark:bg-blue-900/20 border border-blue-100 dark:border-blue-900/50">
+                                    <p className="text-[10px] font-bold text-blue-600 dark:text-blue-400 mb-2 uppercase tracking-wide flex items-center gap-1">
+                                        <MapPin className="h-3 w-3" /> Start Point
+                                    </p>
+                                    <div className="grid grid-cols-1 gap-2">
+                                        <div className="flex items-center gap-2">
+                                            <Label htmlFor="s-lat" className="text-[10px] text-gray-500 w-8">Lat</Label>
                                             <Input
                                                 id="s-lat"
                                                 type="number"
                                                 step="any"
                                                 value={startLat}
                                                 onChange={(e) => setStartLat(e.target.value)}
-                                                placeholder="-90 to 90"
-                                                className="h-10 text-sm"
+                                                placeholder="Lat"
+                                                className="h-8 text-[11px]"
                                                 required
                                             />
                                         </div>
-                                        <div className="space-y-1.5">
-                                            <Label htmlFor="s-lng" className="text-xs text-gray-500">Longitude *</Label>
+                                        <div className="flex items-center gap-2">
+                                            <Label htmlFor="s-lng" className="text-[10px] text-gray-500 w-8">Lng</Label>
                                             <Input
                                                 id="s-lng"
                                                 type="number"
                                                 step="any"
                                                 value={startLng}
                                                 onChange={(e) => setStartLng(e.target.value)}
-                                                placeholder="-180 to 180"
-                                                className="h-10 text-sm"
+                                                placeholder="Lng"
+                                                className="h-8 text-[11px]"
                                                 required
                                             />
                                         </div>
@@ -495,32 +477,34 @@ export default function CreateLocationPage() {
                                 </div>
 
                                 {/* End Point */}
-                                <div className="p-4 rounded-xl bg-gradient-to-r from-blue-50/50 to-indigo-50/40 dark:from-blue-950/20 dark:to-indigo-950/20 border border-blue-100 dark:border-blue-900/50">
-                                    <p className="text-xs font-semibold text-blue-600 dark:text-blue-400 mb-3 uppercase tracking-wide">End Point</p>
-                                    <div className="grid grid-cols-2 gap-3">
-                                        <div className="space-y-1.5">
-                                            <Label htmlFor="e-lat" className="text-xs text-gray-500">Latitude *</Label>
+                                <div className="p-3 rounded-xl bg-blue-50/50 dark:bg-blue-900/20 border border-blue-100 dark:border-blue-900/50">
+                                    <p className="text-[10px] font-bold text-blue-600 dark:text-blue-400 mb-2 uppercase tracking-wide flex items-center gap-1">
+                                        <MapPin className="h-3 w-3" /> End Point
+                                    </p>
+                                    <div className="grid grid-cols-1 gap-2">
+                                        <div className="flex items-center gap-2">
+                                            <Label htmlFor="e-lat" className="text-[10px] text-gray-500 w-8">Lat</Label>
                                             <Input
                                                 id="e-lat"
                                                 type="number"
                                                 step="any"
                                                 value={endLat}
                                                 onChange={(e) => setEndLat(e.target.value)}
-                                                placeholder="-90 to 90"
-                                                className="h-10 text-sm"
+                                                placeholder="Lat"
+                                                className="h-8 text-[11px]"
                                                 required
                                             />
                                         </div>
-                                        <div className="space-y-1.5">
-                                            <Label htmlFor="e-lng" className="text-xs text-gray-500">Longitude *</Label>
+                                        <div className="flex items-center gap-2">
+                                            <Label htmlFor="e-lng" className="text-[10px] text-gray-500 w-8">Lng</Label>
                                             <Input
                                                 id="e-lng"
                                                 type="number"
                                                 step="any"
                                                 value={endLng}
                                                 onChange={(e) => setEndLng(e.target.value)}
-                                                placeholder="-180 to 180"
-                                                className="h-10 text-sm"
+                                                placeholder="Lng"
+                                                className="h-8 text-[11px]"
                                                 required
                                             />
                                         </div>
diff --git a/app/create-package/page.tsx b/app/create-package/page.tsx
index b41b19b..1109e74 100644
--- a/app/create-package/page.tsx
+++ b/app/create-package/page.tsx
@@ -211,7 +211,10 @@ export default function CreatePackagePage() {
 
             {/* Modal Dialog */}
             <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
-                <DialogContent className="max-w-2xl">
+                <DialogContent
+                    className="max-w-2xl"
+                    onOpenAutoFocus={(e) => e.preventDefault()}
+                >
                     <DialogHeader>
                         <DialogTitle className="flex items-center gap-2">
                             <Package className="h-5 w-5 text-blue-500" />
@@ -240,11 +243,11 @@ export default function CreatePackagePage() {
                         </div>
                     )}
 
-                    <form onSubmit={handleSubmit} className="space-y-6">
+                    <form onSubmit={handleSubmit} className="space-y-8">
                         {/* Step 1: Select Project */}
-                        <div className="p-4 rounded-xl bg-gradient-to-r from-blue-50/50 to-indigo-50/40 dark:from-blue-950/20 dark:to-indigo-950/20 border border-blue-100 dark:border-blue-900/50">
+                        <div className="p-4 rounded-xl bg-blue-50/80 dark:bg-blue-900/40 border border-blue-200 dark:border-blue-800 shadow-sm">
                             <div className="flex items-center gap-2 mb-3">
-                                <div className="w-6 h-6 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center">
+                                <div className="w-6 h-6 rounded-full bg-blue-600 flex items-center justify-center">
                                     <span className="text-white text-xs font-bold">1</span>
                                 </div>
                                 <p className="text-sm font-bold text-blue-700 dark:text-blue-400">Select Project</p>
@@ -264,54 +267,49 @@ export default function CreatePackagePage() {
                                     {projects.map(project => (
                                         <SelectItem key={project.id} value={project.id}>
                                             <span className="font-medium">{project.name}</span>
-                                            {project.state && <span className="text-gray-400 ml-2">({project.state})</span>}
                                         </SelectItem>
                                     ))}
                                 </SelectContent>
                             </Select>
-                            {selectedProject && (
-                                <div className="mt-2 px-3 py-1.5 rounded-lg bg-blue-100/50 dark:bg-blue-900/20 text-xs text-blue-600 dark:text-blue-400">
-                                    Selected: <span className="font-semibold">{selectedProject.name}</span>
-                                    {selectedProject.corridor_name && ` • ${selectedProject.corridor_name}`}
-                                </div>
-                            )}
                         </div>
 
                         {/* Step 2: Package Info */}
                         <div className={`space-y-4 transition-opacity duration-300 ${selectedProjectId ? 'opacity-100' : 'opacity-40 pointer-events-none'}`}>
                             <div className="flex items-center gap-2">
-                                <div className={`w-6 h-6 rounded-full flex items-center justify-center ${selectedProjectId ? 'bg-gradient-to-br from-blue-500 to-indigo-600' : 'bg-gray-300 dark:bg-gray-600'}`}>
+                                <div className={`w-6 h-6 rounded-full flex items-center justify-center ${selectedProjectId ? 'bg-blue-600' : 'bg-gray-300 dark:bg-gray-600'}`}>
                                     <span className="text-white text-xs font-bold">2</span>
                                 </div>
                                 <p className="text-sm font-bold text-gray-700 dark:text-gray-300">Package Information</p>
                             </div>
 
-                            <div className="space-y-2">
-                                <Label htmlFor="pkg-name" className="text-sm font-semibold flex items-center gap-1">
-                                    Package Name <span className="text-red-500">*</span>
-                                </Label>
-                                <Input
-                                    id="pkg-name"
-                                    value={name}
-                                    onChange={(e) => setName(e.target.value)}
-                                    placeholder="e.g., Package A - Section 1"
-                                    className="h-11"
-                                    required
-                                />
-                            </div>
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                <div className="space-y-2">
+                                    <Label htmlFor="pkg-name" className="text-sm font-semibold flex items-center gap-1">
+                                        Package Name <span className="text-red-500">*</span>
+                                    </Label>
+                                    <Input
+                                        id="pkg-name"
+                                        value={name}
+                                        onChange={(e) => setName(e.target.value)}
+                                        placeholder="Package Name"
+                                        className="h-10 text-sm"
+                                        required
+                                    />
+                                </div>
 
-                            <div className="space-y-2">
-                                <Label htmlFor="region" className="text-sm font-semibold flex items-center gap-1">
-                                    <Globe className="h-3.5 w-3.5 text-gray-400" />
-                                    Region <span className="text-gray-400 font-normal text-xs">(Optional)</span>
-                                </Label>
-                                <Input
-                                    id="region"
-                                    value={region}
-                                    onChange={(e) => setRegion(e.target.value)}
-                                    placeholder="e.g., Delhi, Haryana, Punjab"
-                                    className="h-11"
-                                />
+                                <div className="space-y-2">
+                                    <Label htmlFor="region" className="text-sm font-semibold flex items-center gap-1">
+                                        <Globe className="h-3.5 w-3.5 text-gray-400" />
+                                        Region <span className="text-gray-400 font-normal text-xs">(Optional)</span>
+                                    </Label>
+                                    <Input
+                                        id="region"
+                                        value={region}
+                                        onChange={(e) => setRegion(e.target.value)}
+                                        placeholder="Region"
+                                        className="h-10 text-sm"
+                                    />
+                                </div>
                             </div>
                         </div>
 
diff --git a/app/create-project/page.tsx b/app/create-project/page.tsx
index b3dbcff..994deb9 100644
--- a/app/create-project/page.tsx
+++ b/app/create-project/page.tsx
@@ -183,8 +183,11 @@ export default function CreateProjectPage() {
             </main>
 
             {/* Modal Dialog */}
-            <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
-                <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
+            <Dialog open={isModalOpen} onOpenChange={(open) => { if (!open) { setIsModalOpen(false); resetForm(); } else { setIsModalOpen(true); } }}>
+                <DialogContent
+                    className="max-w-2xl"
+                    onOpenAutoFocus={(e) => e.preventDefault()}
+                >
                     <DialogHeader>
                         <DialogTitle className="flex items-center gap-2">
                             <FolderPlus className="h-5 w-5 text-blue-500" />
@@ -215,7 +218,7 @@ export default function CreateProjectPage() {
 
                     <form onSubmit={handleSubmit} className="space-y-6">
                         {/* Project Name */}
-                        <div className="space-y-2">
+                        <div className="space-y-1.5">
                             <Label htmlFor="name" className="text-sm font-semibold flex items-center gap-1">
                                 Project Name <span className="text-red-500">*</span>
                             </Label>
@@ -223,15 +226,15 @@ export default function CreateProjectPage() {
                                 id="name"
                                 value={name}
                                 onChange={(e) => setName(e.target.value)}
-                                placeholder="e.g., Delhi-Chandigarh Highway"
-                                className="h-11"
+                                placeholder="Project Name"
+                                className="h-10 text-sm"
                                 required
                             />
                         </div>
 
                         {/* State & Corridor Row */}
                         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                            <div className="space-y-2">
+                            <div className="space-y-1.5">
                                 <Label htmlFor="state" className="text-sm font-semibold">
                                     State <span className="text-gray-400 font-normal text-xs">(Optional)</span>
                                 </Label>
@@ -239,11 +242,11 @@ export default function CreateProjectPage() {
                                     id="state"
                                     value={state}
                                     onChange={(e) => setState(e.target.value)}
-                                    placeholder="e.g., Haryana"
-                                    className="h-11"
+                                    placeholder="State"
+                                    className="h-10 text-sm"
                                 />
                             </div>
-                            <div className="space-y-2">
+                            <div className="space-y-1.5">
                                 <Label htmlFor="corridor" className="text-sm font-semibold flex items-center gap-1">
                                     <Route className="h-3.5 w-3.5 text-gray-400" />
                                     Corridor Name <span className="text-gray-400 font-normal text-xs">(Optional)</span>
@@ -252,79 +255,75 @@ export default function CreateProjectPage() {
                                     id="corridor"
                                     value={corridorName}
                                     onChange={(e) => setCorridorName(e.target.value)}
-                                    placeholder="e.g., National Highway 44"
-                                    className="h-11"
+                                    placeholder="Corridor Name"
+                                    className="h-10 text-sm"
                                 />
                             </div>
                         </div>
 
-                        {/* GPS Coordinates Section */}
-                        <div className="space-y-4">
-                            <div className="flex items-center gap-2">
-                                <div className="p-1.5 rounded-lg bg-gradient-to-br from-blue-400 to-indigo-500 shadow-md shadow-blue-500/20">
-                                    <MapPin className="h-4 w-4 text-white" />
-                                </div>
-                                <h3 className="text-sm font-bold text-gray-700 dark:text-gray-300">GPS Coordinates</h3>
-                                <span className="text-xs text-gray-400">(Optional)</span>
-                            </div>
-
+                        {/* GPS Coordinates Grid */}
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                             {/* Start Point */}
-                            <div className="p-4 rounded-xl bg-gradient-to-r from-blue-50/50 to-indigo-50/50 dark:from-blue-950/20 dark:to-indigo-950/20 border border-blue-100 dark:border-blue-900/50">
-                                <p className="text-xs font-semibold text-blue-600 dark:text-blue-400 mb-3 uppercase tracking-wide">Start Point</p>
-                                <div className="grid grid-cols-2 gap-3">
-                                    <div className="space-y-1.5">
-                                        <Label htmlFor="start-lat" className="text-xs text-gray-500">Latitude</Label>
+                            <div className="p-3 rounded-xl bg-blue-50/80 dark:bg-blue-900/40 border border-blue-200 dark:border-blue-800 shadow-sm">
+                                <p className="text-[10px] font-bold text-blue-600 dark:text-blue-400 mb-2 uppercase tracking-wide flex items-center gap-1">
+                                    <MapPin className="h-3 w-3" /> Start Point
+                                </p>
+                                <div className="grid grid-cols-2 gap-2">
+                                    <div className="space-y-1">
+                                        <Label htmlFor="start-lat" className="text-[10px] text-gray-500">Lat</Label>
                                         <Input
                                             id="start-lat"
                                             type="number"
                                             step="any"
                                             value={startLat}
                                             onChange={(e) => setStartLat(e.target.value)}
-                                            placeholder="-90 to 90"
-                                            className="h-10 text-sm"
+                                            placeholder="Lat"
+                                            className="h-8 text-[11px]"
                                         />
                                     </div>
-                                    <div className="space-y-1.5">
-                                        <Label htmlFor="start-lng" className="text-xs text-gray-500">Longitude</Label>
+                                    <div className="space-y-1">
+                                        <Label htmlFor="start-lng" className="text-[10px] text-gray-500">Lng</Label>
                                         <Input
                                             id="start-lng"
                                             type="number"
                                             step="any"
                                             value={startLng}
                                             onChange={(e) => setStartLng(e.target.value)}
-                                            placeholder="-180 to 180"
-                                            className="h-10 text-sm"
+                                            placeholder="Lng"
+                                            className="h-8 text-[11px]"
                                         />
                                     </div>
                                 </div>
                             </div>
 
                             {/* End Point */}
-                            <div className="p-4 rounded-xl bg-gradient-to-r from-blue-50/50 to-indigo-50/50 dark:from-blue-950/20 dark:to-indigo-950/20 border border-blue-100 dark:border-blue-900/50">
-                                <p className="text-xs font-semibold text-blue-600 dark:text-blue-400 mb-3 uppercase tracking-wide">End Point</p>
-                                <div className="grid grid-cols-2 gap-3">
-                                    <div className="space-y-1.5">
-                                        <Label htmlFor="end-lat" className="text-xs text-gray-500">Latitude</Label>
+                            <div className="p-3 rounded-xl bg-blue-50/80 dark:bg-blue-900/40 border border-blue-200 dark:border-blue-800 shadow-sm">
+                                <p className="text-[10px] font-bold text-blue-600 dark:text-blue-400 mb-2 uppercase tracking-wide flex items-center gap-1">
+                                    <MapPin className="h-3 w-3" /> End Point
+                                </p>
+                                <div className="grid grid-cols-2 gap-2">
+                                    <div className="space-y-1">
+                                        <Label htmlFor="end-lat" className="text-[10px] text-gray-500">Lat</Label>
                                         <Input
                                             id="end-lat"
                                             type="number"
                                             step="any"
                                             value={endLat}
                                             onChange={(e) => setEndLat(e.target.value)}
-                                            placeholder="-90 to 90"
-                                            className="h-10 text-sm"
+                                            placeholder="Lat"
+                                            className="h-8 text-[11px]"
                                         />
                                     </div>
-                                    <div className="space-y-1.5">
-                                        <Label htmlFor="end-lng" className="text-xs text-gray-500">Longitude</Label>
+                                    <div className="space-y-1">
+                                        <Label htmlFor="end-lng" className="text-[10px] text-gray-500">Lng</Label>
                                         <Input
                                             id="end-lng"
                                             type="number"
                                             step="any"
                                             value={endLng}
                                             onChange={(e) => setEndLng(e.target.value)}
-                                            placeholder="-180 to 180"
-                                            className="h-10 text-sm"
+                                            placeholder="Lng"
+                                            className="h-8 text-[11px]"
                                         />
                                     </div>
                                 </div>
diff --git a/app/globals.css b/app/globals.css
index 1113553..e7a18c7 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -362,4 +362,15 @@
     animation: logo-spin-reverse-slow 8s linear infinite;
   }
 
+}
+
+/* Prevent layout shift when Dialog locks body scroll */
+html {
+  overflow-y: scroll;
+  /* always show scrollbar to prevent width jump */
+}
+
+body[data-scroll-locked] {
+  overflow: hidden;
+  padding-right: var(--removed-body-scroll-bar-size, 0px) !important;
 }
\ No newline at end of file
diff --git a/components/ui/select.tsx b/components/ui/select.tsx
index 5db0bca..773b75a 100644
--- a/components/ui/select.tsx
+++ b/components/ui/select.tsx
@@ -37,7 +37,7 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-full items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm overflow-hidden shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:min-w-0 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}
@@ -63,7 +63,7 @@ function SelectContent({
         className={cn(
           'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
           position === 'popper' &&
-            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
           className,
         )}
         position={position}
@@ -74,7 +74,7 @@ function SelectContent({
           className={cn(
             'p-1',
             position === 'popper' &&
-              'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1',
+            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1',
           )}
         >
           {children}