From c72f110808600022ca6cfdf9e97abbe264fb20eb Mon Sep 17 00:00:00 2001
From: Eugen Ciur <eugen@papermerge.com>
Date: Thu, 22 Aug 2024 07:04:48 +0200
Subject: [PATCH] wrap title text (#437)

---
 .../Node/Document/Document.module.scss        |  9 +++++++++
 ui2/src/components/Node/Document/Document.tsx |  4 ++--
 .../components/Node/Folder/Folder.module.css  | 20 -------------------
 .../components/Node/Folder/Folder.module.scss | 12 +++++++++++
 ui2/src/components/Node/Folder/Folder.tsx     |  4 ++--
 .../Document.module.css => Node.module.scss}  | 12 ++++++++---
 6 files changed, 34 insertions(+), 27 deletions(-)
 create mode 100644 ui2/src/components/Node/Document/Document.module.scss
 delete mode 100644 ui2/src/components/Node/Folder/Folder.module.css
 create mode 100644 ui2/src/components/Node/Folder/Folder.module.scss
 rename ui2/src/components/Node/{Document/Document.module.css => Node.module.scss} (57%)

diff --git a/ui2/src/components/Node/Document/Document.module.scss b/ui2/src/components/Node/Document/Document.module.scss
new file mode 100644
index 000000000..caf26d9af
--- /dev/null
+++ b/ui2/src/components/Node/Document/Document.module.scss
@@ -0,0 +1,9 @@
+@import "../Node.module.scss";
+
+.document {
+  @extend %node;
+
+  img {
+    height: $node-img-height;
+  }
+}
diff --git a/ui2/src/components/Node/Document/Document.tsx b/ui2/src/components/Node/Document/Document.tsx
index 80195123a..d61e0f665 100644
--- a/ui2/src/components/Node/Document/Document.tsx
+++ b/ui2/src/components/Node/Document/Document.tsx
@@ -10,7 +10,7 @@ import {
 
 import Tags from "@/components/Node/Tags"
 import type {NodeType, PanelMode} from "@/types"
-import classes from "./Document.module.css"
+import classes from "./Document.module.scss"
 import {RootState} from "@/app/types"
 import PanelContext from "@/contexts/PanelContext"
 import {useProtectedJpg} from "@/hooks/protected_image"
@@ -43,7 +43,7 @@ export default function Document({node, onClick}: Args) {
       <a onClick={() => onClick(node)}>
         <img src={protected_image.data || ""} />
         <Tags names={tagNames} />
-        <div className="title">{node.title}</div>
+        <div className={classes.title}>{node.title}</div>
       </a>
     </div>
   )
diff --git a/ui2/src/components/Node/Folder/Folder.module.css b/ui2/src/components/Node/Folder/Folder.module.css
deleted file mode 100644
index 8ced85c11..000000000
--- a/ui2/src/components/Node/Folder/Folder.module.css
+++ /dev/null
@@ -1,20 +0,0 @@
-.folder {
-  padding: 0.3rem;
-  position: relative;
-
-  &:hover {
-    background-color: #8ed2fe66;
-    outline: 1px solid #6fc5ff;
-  }
-
-  a {
-    color: light-dark(var(--mantine-color-pmg-9), var(--mantine-color-pmg-2));
-  }
-}
-
-.folderIcon {
-  background-image: url("/public/folder.svg");
-  background-size: 100% 100%;
-  width: 64px;
-  height: 64px;
-}
diff --git a/ui2/src/components/Node/Folder/Folder.module.scss b/ui2/src/components/Node/Folder/Folder.module.scss
new file mode 100644
index 000000000..74a8c84a0
--- /dev/null
+++ b/ui2/src/components/Node/Folder/Folder.module.scss
@@ -0,0 +1,12 @@
+@import "../Node.module.scss";
+
+.folder {
+  @extend %node;
+}
+
+.folderIcon {
+  background-image: url("/public/folder.svg");
+  background-size: 100% 100%;
+  width: 64px;
+  height: 64px;
+}
diff --git a/ui2/src/components/Node/Folder/Folder.tsx b/ui2/src/components/Node/Folder/Folder.tsx
index d92088690..125cc3738 100644
--- a/ui2/src/components/Node/Folder/Folder.tsx
+++ b/ui2/src/components/Node/Folder/Folder.tsx
@@ -9,7 +9,7 @@ import {
 } from "@/slices/dualPanel/dualPanel"
 
 import Tags from "@/components/Node/Tags"
-import classes from "./Folder.module.css"
+import classes from "./Folder.module.scss"
 import {RootState} from "@/app/types"
 import type {NodeType, PanelMode} from "@/types"
 
@@ -42,7 +42,7 @@ export default function Folder({node, onClick}: Args) {
       <a onClick={() => onClick(node)}>
         <div className={classes.folderIcon}></div>
         <Tags names={tagNames} />
-        <div>{node.title}</div>
+        <div className={classes.title}>{node.title}</div>
       </a>
     </div>
   )
diff --git a/ui2/src/components/Node/Document/Document.module.css b/ui2/src/components/Node/Node.module.scss
similarity index 57%
rename from ui2/src/components/Node/Document/Document.module.css
rename to ui2/src/components/Node/Node.module.scss
index b5c95d97f..f7a441bc6 100644
--- a/ui2/src/components/Node/Document/Document.module.css
+++ b/ui2/src/components/Node/Node.module.scss
@@ -1,4 +1,7 @@
-.document {
+$node-width: 8rem;
+$node-img-height: 5rem;
+
+%node {
   padding: 0.3rem;
   position: relative;
 
@@ -7,8 +10,11 @@
     outline: 1px solid #6fc5ff;
   }
 
-  img {
-    height: 64px;
+  .title {
+    text-overflow: ellipsis;
+    width: $node-width;
+    overflow: hidden;
+    white-space: nowrap;
   }
 
   a {