wrap title text

ui2/src/components/Node/Document/Document.module.scss

@@ -0,0 +1,9 @@
+@import "../Node.module.scss";
+
+.document {
+  @extend %node;
+
+  img {
+    height: $node-img-height;
+  }
+}

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>
   )

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;
+}

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>
   )

ui2/src/components/Node/Document/Document.module.css → 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 {