fix: hovering long dashboard names stretch NavBar

keephq · Oct 28, 2024 · 13e74f1 · 13e74f1
1 parent f69ad34
commit 13e74f1
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 23 deletions.
diff --git a/keep-ui/components/navbar/DashboardLink.tsx b/keep-ui/components/navbar/DashboardLink.tsx
@@ -1,8 +1,8 @@
-import { useSortable } from '@dnd-kit/sortable';
+import { useSortable } from "@dnd-kit/sortable";
 import { Subtitle } from "@tremor/react";
 import { FiLayout } from "react-icons/fi";
 import { LinkWithIcon } from "components/LinkWithIcon"; // Ensure you import this correctly
-import classNames from 'classnames';
+import { clsx } from "clsx";
 
 interface Dashboard {
   id: string;
@@ -14,31 +14,40 @@ type DashboardLinkProps = {
   dashboard: Dashboard;
   pathname: string | null;
   deleteDashboard: (id: string) => void;
+  titleClassName?: string;
 };
 
-export const DashboardLink = ({ dashboard, pathname, deleteDashboard }: DashboardLinkProps) => {
+export const DashboardLink = ({
+  dashboard,
+  pathname,
+  deleteDashboard,
+  titleClassName,
+}: DashboardLinkProps) => {
   const href = `/dashboard/${dashboard.dashboard_name}`;
-  const isActive = decodeURIComponent(pathname|| "") === href;
-
-  const { isDragging } =
-    useSortable({
-      id: dashboard.id,
-    });
+  const isActive = decodeURIComponent(pathname || "") === href;
 
+  const { isDragging } = useSortable({
+    id: dashboard.id,
+  });
 
   return (
     <LinkWithIcon
-          href={href}
-          icon={FiLayout}
-          isDeletable={true}
-          onDelete={() => deleteDashboard(dashboard.id)}
-        >
-          <Subtitle className={classNames({
-              "text-orange-400": isActive,
-              "pointer-events-none cursor-auto": isDragging,
-            })}>
-            {dashboard.dashboard_name}
-          </Subtitle>
-        </LinkWithIcon>
+      href={href}
+      icon={FiLayout}
+      isDeletable={true}
+      onDelete={() => deleteDashboard(dashboard.id)}
+    >
+      <Subtitle
+        className={clsx(
+          {
+            "text-orange-400": isActive,
+            "pointer-events-none cursor-auto": isDragging,
+          },
+          titleClassName
+        )}
+      >
+        {dashboard.dashboard_name}
+      </Subtitle>
+    </LinkWithIcon>
   );
 };
diff --git a/keep-ui/components/navbar/DashboardLinks.tsx b/keep-ui/components/navbar/DashboardLinks.tsx
@@ -13,7 +13,7 @@ import { DashboardLink } from "./DashboardLink";
 import { Subtitle, Button, Badge, Text } from "@tremor/react";
 import { Disclosure } from "@headlessui/react";
 import { IoChevronUp } from "react-icons/io5";
-import classNames from "classnames";
+import clsx from "clsx";
 import { useDashboards } from "utils/hooks/useDashboards";
 import { useApiUrl } from "utils/hooks/useConfig";
 
@@ -105,7 +105,7 @@ export const DashboardLinks = ({ session }: DashboardProps) => {
                   Beta
                 </Badge>
                 <IoChevronUp
-                  className={classNames(
+                  className={clsx(
                     { "rotate-180": open },
                     "mr-2 text-slate-400"
                   )}
@@ -132,6 +132,7 @@ export const DashboardLinks = ({ session }: DashboardProps) => {
                   dashboard={dashboard}
                   pathname={pathname}
                   deleteDashboard={deleteDashboard}
+                  titleClassName="max-w-[150px] overflow-hidden overflow-ellipsis"
                 />
               ))
             ) : (