diff --git a/apps/web/src/components/navbar/DatabaseManagement/DatabaseSelector.tsx b/apps/web/src/components/navbar/DatabaseManagement/DatabaseSelector.tsx index c697f2c36d1380d931ce9c953ec1c157499fe3e3..6b1aeb256ebb82175b44eb82db4c1c929c603086 100644 --- a/apps/web/src/components/navbar/DatabaseManagement/DatabaseSelector.tsx +++ b/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 && (