From b8501ff44455093cfa9214f12814a8e75fd88726 Mon Sep 17 00:00:00 2001
From: 7HR4IZ3 <90985774+7HR4IZ3@users.noreply.github.com>
Date: Mon, 30 Sep 2024 08:12:33 +0100
Subject: [PATCH] word wrap and tooltip for long project names (#578)

Co-authored-by: Hugues Chocart <chocart.hugues@icloud.com>
---
 .../frontend/components/layout/Sidebar.tsx    | 24 +++++++++++++++----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/packages/frontend/components/layout/Sidebar.tsx b/packages/frontend/components/layout/Sidebar.tsx
index 6a185bb4..11360c5e 100644
--- a/packages/frontend/components/layout/Sidebar.tsx
+++ b/packages/frontend/components/layout/Sidebar.tsx
@@ -11,6 +11,7 @@ import {
   Text,
   TextInput,
   ThemeIcon,
+  Tooltip,
   useMantineColorScheme,
 } from "@mantine/core";
 
@@ -414,12 +415,11 @@ export default function Sidebar() {
                   component="button"
                   size="xs"
                   variant="unstyled"
-                  w="fit-content"
+                  w={"100%"}
                   fw={500}
                   fz="xl"
                   type="button"
                   style={{
-                    wordBreak: "break-all",
                     textOverflow: "ellipsis",
                     overflow: "hidden",
                   }}
@@ -433,9 +433,23 @@ export default function Sidebar() {
                   onClick={() => combobox.toggleDropdown()}
                   rightSectionPointerEvents="none"
                 >
-                  {project?.name || (
-                    <Input.Placeholder>Select project</Input.Placeholder>
-                  )}
+                  <Tooltip label={project?.name}>
+                    {project?.name ? (
+                      <span
+                        style={{
+                          textOverflow: "ellipsis",
+                          overflow: "hidden",
+                          whiteSpace: "nowrap",
+                          height: "100%",
+                          display: "block",
+                        }}
+                      >
+                        {project.name}
+                      </span>
+                    ) : (
+                      <Input.Placeholder>Select project</Input.Placeholder>
+                    )}
+                  </Tooltip>
                 </InputBase>
               </Combobox.Target>
               <Combobox.Dropdown w={400}>