From 31365a57828b1b83d98ba50a00ede47c3fcc9b32 Mon Sep 17 00:00:00 2001
From: Leonardo Christino <leomilho@gmail.com>
Date: Mon, 4 Dec 2023 16:54:07 +0100
Subject: [PATCH] feat(ui): fix db dropdown
---
apps/web/src/app/app.tsx | 2 +-
.../DatabaseManagement/DatabaseSelector.tsx | 38 +++++++++++--------
apps/web/src/components/navbar/navbar.tsx | 4 +-
3 files changed, 26 insertions(+), 18 deletions(-)
diff --git a/apps/web/src/app/app.tsx b/apps/web/src/app/app.tsx
index e843a58d8..c66a944f1 100644
--- a/apps/web/src/app/app.tsx
+++ b/apps/web/src/app/app.tsx
@@ -126,7 +126,7 @@ export function App(props: App) {
<DashboardAlerts />
<div className={'h-screen w-screen ' + (!auth.authorized ? 'blur-sm pointer-events-none ' : '')}>
<div className="flex flex-col h-screen max-h-screen relative">
- <aside className="h-[4rem]">
+ <aside className="h-auto w-auto">
<Navbar />
</aside>
<main className="flex w-screen h-[calc(100%-4.2rem)]">
diff --git a/apps/web/src/components/navbar/DatabaseManagement/DatabaseSelector.tsx b/apps/web/src/components/navbar/DatabaseManagement/DatabaseSelector.tsx
index eca81b209..c697f2c36 100644
--- a/apps/web/src/components/navbar/DatabaseManagement/DatabaseSelector.tsx
+++ b/apps/web/src/components/navbar/DatabaseManagement/DatabaseSelector.tsx
@@ -68,21 +68,30 @@ export default function DatabaseSelector({}) {
setAddDatabaseFormOpen(false);
}}
/>
- <div className="relative border w-[20rem] ml-auto mr-auto cursor-pointer" ref={dbSelectionMenuRef}>
+ <div
+ className="relative flex-shrink max-md:flex-grow border w-full xl:w-[30rem] min-w-0 max-h-full ml-auto mr-auto cursor-pointer"
+ ref={dbSelectionMenuRef}
+ >
<div
- className="flex w-full justify-between items-center px-4 py-2 hover:bg-slate-200 transition-colors duration-300"
+ className="flex w-full px-4 py-2 hover:bg-slate-200 transition-colors duration-300"
onClick={() => setDbSelectionMenuOpen(!dbSelectionMenuOpen)}
>
- <div className="flex items-center w-full">
+ <div className="flex items-center w-full shrink-0">
{connecting ? (
<>
<LoadingSpinner />
- <p className="ml-2 truncate">Connecting to {session.currentDatabase}</p>
+ <p className="ml-2 truncate">
+ <span className="max-md:hidden">Connecting to </span>
+ {session.currentDatabase}
+ </p>
</>
) : session.currentDatabase ? (
<>
- <div className="h-2 w-2 rounded-full bg-green-500" />
- <p className="ml-2 truncate">Connected DB: {session.currentDatabase}</p>
+ <div className="h-[8px] w-[8px] shrink-0 rounded-full bg-green-500" />
+ <p className="ml-2 truncate">
+ <span className="max-md:hidden">Connected DB: </span>
+ {session.currentDatabase}
+ </p>
</>
) : session.databases.length == 0 ? (
<>
@@ -140,17 +149,16 @@ export default function DatabaseSelector({}) {
onMouseLeave={() => setHovered(null)}
title={`Connect to ${db.Name}`}
>
- <div className="flex items-center">
- <div className={`h-2 w-2 rounded-full mr-2 ${db.status ? 'bg-green-500' : 'bg-red-500'}`} />
- <div>
- <p className="ml-2">{db.Name}</p>
- <p className="ml-2 text-xs text-slate-400">
- <span className="border border-slate-300 px-1">{db.Protocol}</span> {db.URL}
- </p>
- </div>
+ <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>
+ </p>
</div>
{hovered === db.Name && (
- <div className="flex items-center">
+ <div className="flex items-center ml-2">
<div
className="text-slate-700 hover:text-slate-400 transition-colors duration-300"
onClick={(e) => {
diff --git a/apps/web/src/components/navbar/navbar.tsx b/apps/web/src/components/navbar/navbar.tsx
index bed6bb50d..d5ae5ac8e 100644
--- a/apps/web/src/components/navbar/navbar.tsx
+++ b/apps/web/src/components/navbar/navbar.tsx
@@ -55,8 +55,8 @@ export const Navbar = (props: NavbarComponentProps) => {
return (
<div className="w-full h-auto px-5">
- <div title="GraphPolaris" className="navbar flex items-center justify-between w-full">
- <a href="https://graphpolaris.com/" target="_blank">
+ <div title="GraphPolaris" className="navbar flex items-center justify-between w-auto gap-2 xl:gap-10">
+ <a href="https://graphpolaris.com/" target="_blank" className="xl:w-fit w-[5rem] shrink-0">
<img src={currentLogo} alt="GraphPolaris" className="h-9" />
</a>
--
GitLab