feat(ui): fix db url box

the box now surrounds the entire url and protocol

apps/web/src/components/navbar/DatabaseManagement/DatabaseSelector.tsx

@@ -134,7 +134,7 @@ export default function DatabaseSelector({}) {
             {session.databases.map((db) => (
               <div
                 key={db.Name}
-                className="flex justify-between items-center px-4 py-2 hover:bg-slate-200"
+                className="flex justify-between items-center px-4 py-2 hover:bg-slate-200 gap-2"
                 onClick={(e) => {
                   if (db.Name !== session.currentDatabase) {
                     e.preventDefault();
@@ -149,12 +149,12 @@ export default function DatabaseSelector({}) {
                 onMouseLeave={() => setHovered(null)}
                 title={`Connect to ${db.Name}`}
               >
-                <div className={`h-2 w-2 rounded-full mr-2 shrink-0 ${db.status ? 'bg-green-500' : 'bg-red-500'}`} />
-                <div className="w-full shrink min-w-0">
-                  <p className="ml-2 truncate w-full shrink-0 min-w-0">{db.Name}</p>
-                  <p className="ml-2 text-xs text-slate-400 truncate w-full shrink-0 min-w-0">
-                    <span className="border border-slate-300 px-1 ">{db.Protocol}</span>{' '}
-                    <span className="truncate w-full min-w-0">{db.URL}</span>
+                <div className={`h-[8px] w-[8px] rounded-full shrink-0 ${db.status ? 'bg-green-500' : 'bg-red-500'}`} />
+                <div className="w-full shrink min-w-0 flex flex-col">
+                  <p className="truncate w-full shrink-0 min-w-0">{db.Name}</p>
+                  <p className="text-xs text-slate-400 truncate w-fit shrink-0 min-w-0 max-w-full h-full border border-slate-300 rounded-sm p-0.5">
+                    {db.Protocol}
+                    {db.URL}
                   </p>
                 </div>
                 {hovered === db.Name && (