From 50a9114712ac3106d04e87983c36944aaed76bc5 Mon Sep 17 00:00:00 2001
From: CJ <tedabed@gmail.com>
Date: Sat, 22 Jun 2024 12:02:46 -0500
Subject: [PATCH 1/3] added path column to tables in list view

---
 .../components/Galleries/GalleryListTable.tsx | 15 ++++++++
 ui/v2.5/src/components/List/styles.scss       | 37 ++++++++++++++++++-
 .../src/components/Scenes/SceneListTable.tsx  | 17 ++++++++-
 3 files changed, 67 insertions(+), 2 deletions(-)

diff --git a/ui/v2.5/src/components/Galleries/GalleryListTable.tsx b/ui/v2.5/src/components/Galleries/GalleryListTable.tsx
index 7e6a561886b..c4969b202ce 100644
--- a/ui/v2.5/src/components/Galleries/GalleryListTable.tsx
+++ b/ui/v2.5/src/components/Galleries/GalleryListTable.tsx
@@ -134,6 +134,16 @@ export const GalleryListTable: React.FC<IGalleryListTableProps> = (
     </ul>
   );
 
+  const PathCell = (scene: GQL.SlimGalleryDataFragment) => (
+    <ul className="newline-list overflowable">
+      {scene.files.map((file) => (
+        <li key={file.id}>
+          <span>{file.path}</span>
+        </li>
+      ))}
+    </ul>
+  );
+
   interface IColumnSpec {
     value: string;
     label: string;
@@ -211,6 +221,11 @@ export const GalleryListTable: React.FC<IGalleryListTableProps> = (
       label: intl.formatMessage({ id: "photographer" }),
       render: (s) => <>{s.photographer}</>,
     },
+    {
+      value: "path",
+      label: intl.formatMessage({ id: "path" }),
+      render: PathCell,
+    }
   ];
 
   const defaultColumns = allColumns
diff --git a/ui/v2.5/src/components/List/styles.scss b/ui/v2.5/src/components/List/styles.scss
index f67b5b8b33d..dfe67da6026 100644
--- a/ui/v2.5/src/components/List/styles.scss
+++ b/ui/v2.5/src/components/List/styles.scss
@@ -429,13 +429,40 @@ input[type="range"].zoom-slider {
     }
   }
 
+  .newline-list {
+    list-style: none;
+    margin: 0;
+    padding: 4px 2px;
+
+    li {
+      display: inline;
+    }
+
+    li::after {
+      content: "\A";
+    }
+
+    li:last-child::after {
+      content: "";
+    }
+  }
+
+  .newline-list.overflowable,
   .comma-list.overflowable {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+  }
+
+  .comma-list.overflowable {
     width: 190px;
   }
 
+  .newline-list.overflowable {
+    width: 700px;
+  }
+
+  .newline-list.overflowable:hover,
   .comma-list.overflowable:hover {
     background: #28343c;
     border: 1px solid #414c53;
@@ -444,7 +471,6 @@ input[type="range"].zoom-slider {
     height: auto;
     margin-left: -0.4rem;
     margin-top: -0.9rem;
-    max-width: 40rem;
     overflow: hidden;
     padding: 0.1rem 0.5rem;
     position: absolute;
@@ -454,10 +480,19 @@ input[type="range"].zoom-slider {
     z-index: 100;
   }
 
+  .comma-list.overflowable:hover {
+    max-width: 40rem;
+  }
+
+  .newline-list.overflowable li .ellips-data:hover,
   .comma-list.overflowable li .ellips-data:hover {
     max-width: fit-content;
   }
 
+  .newline-list.overflowable:hover li {
+    white-space: pre-wrap;
+  }
+
   td {
     color: hsla(0, 0%, 100%, 0.6);
     font-weight: 500;
diff --git a/ui/v2.5/src/components/Scenes/SceneListTable.tsx b/ui/v2.5/src/components/Scenes/SceneListTable.tsx
index 33581baa47b..a23cdb4d8e1 100644
--- a/ui/v2.5/src/components/Scenes/SceneListTable.tsx
+++ b/ui/v2.5/src/components/Scenes/SceneListTable.tsx
@@ -226,7 +226,7 @@ export const SceneListTable: React.FC<ISceneListTableProps> = (
   );
 
   const AudioCodecCell = (scene: GQL.SlimSceneDataFragment) => (
-    <ul className="comma-list">
+    <ul className="comma-list over">
       {scene.files.map((file) => (
         <li key={file.id}>
           <span>{file.audio_codec}</span>
@@ -245,6 +245,16 @@ export const SceneListTable: React.FC<ISceneListTableProps> = (
     </ul>
   );
 
+  const PathCell = (scene: GQL.SlimSceneDataFragment) => (
+    <ul className="newline-list overflowable">
+      {scene.files.map((file) => (
+        <li key={file.id}>
+          <span>{file.path}</span>
+        </li>
+      ))}
+    </ul>
+  );
+
   interface IColumnSpec {
     value: string;
     label: string;
@@ -343,6 +353,11 @@ export const SceneListTable: React.FC<ISceneListTableProps> = (
       label: intl.formatMessage({ id: "resolution" }),
       render: ResolutionCell,
     },
+    {
+      value: "path",
+      label: intl.formatMessage({ id: "path" }),
+      render: PathCell,
+    },
     {
       value: "filesize",
       label: intl.formatMessage({ id: "filesize" }),

From 71738a39150e254228dbb6f5cf4add50044c1148 Mon Sep 17 00:00:00 2001
From: CJ <tedabed@gmail.com>
Date: Sat, 22 Jun 2024 12:06:27 -0500
Subject: [PATCH 2/3] prettier

---
 ui/v2.5/src/components/Galleries/GalleryListTable.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/v2.5/src/components/Galleries/GalleryListTable.tsx b/ui/v2.5/src/components/Galleries/GalleryListTable.tsx
index c4969b202ce..1ee7c3de30d 100644
--- a/ui/v2.5/src/components/Galleries/GalleryListTable.tsx
+++ b/ui/v2.5/src/components/Galleries/GalleryListTable.tsx
@@ -225,7 +225,7 @@ export const GalleryListTable: React.FC<IGalleryListTableProps> = (
       value: "path",
       label: intl.formatMessage({ id: "path" }),
       render: PathCell,
-    }
+    },
   ];
 
   const defaultColumns = allColumns

From ee2dbb490d2c9b2c4f5a44fc64305cc67fa58c85 Mon Sep 17 00:00:00 2001
From: CJ <tedabed@gmail.com>
Date: Sat, 22 Jun 2024 12:33:43 -0500
Subject: [PATCH 3/3] only show 1 path/line outside of hover

---
 ui/v2.5/src/components/Galleries/GalleryListTable.tsx | 2 +-
 ui/v2.5/src/components/List/styles.scss               | 6 ++----
 ui/v2.5/src/components/Scenes/SceneListTable.tsx      | 2 +-
 3 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/ui/v2.5/src/components/Galleries/GalleryListTable.tsx b/ui/v2.5/src/components/Galleries/GalleryListTable.tsx
index 1ee7c3de30d..68f926587e2 100644
--- a/ui/v2.5/src/components/Galleries/GalleryListTable.tsx
+++ b/ui/v2.5/src/components/Galleries/GalleryListTable.tsx
@@ -135,7 +135,7 @@ export const GalleryListTable: React.FC<IGalleryListTableProps> = (
   );
 
   const PathCell = (scene: GQL.SlimGalleryDataFragment) => (
-    <ul className="newline-list overflowable">
+    <ul className="newline-list overflowable TruncatedText">
       {scene.files.map((file) => (
         <li key={file.id}>
           <span>{file.path}</span>
diff --git a/ui/v2.5/src/components/List/styles.scss b/ui/v2.5/src/components/List/styles.scss
index dfe67da6026..6eeed4c3d27 100644
--- a/ui/v2.5/src/components/List/styles.scss
+++ b/ui/v2.5/src/components/List/styles.scss
@@ -436,6 +436,7 @@ input[type="range"].zoom-slider {
 
     li {
       display: inline;
+      white-space: pre-wrap;
     }
 
     li::after {
@@ -459,6 +460,7 @@ input[type="range"].zoom-slider {
   }
 
   .newline-list.overflowable {
+    -webkit-line-clamp: 1;
     width: 700px;
   }
 
@@ -489,10 +491,6 @@ input[type="range"].zoom-slider {
     max-width: fit-content;
   }
 
-  .newline-list.overflowable:hover li {
-    white-space: pre-wrap;
-  }
-
   td {
     color: hsla(0, 0%, 100%, 0.6);
     font-weight: 500;
diff --git a/ui/v2.5/src/components/Scenes/SceneListTable.tsx b/ui/v2.5/src/components/Scenes/SceneListTable.tsx
index a23cdb4d8e1..0365e768793 100644
--- a/ui/v2.5/src/components/Scenes/SceneListTable.tsx
+++ b/ui/v2.5/src/components/Scenes/SceneListTable.tsx
@@ -246,7 +246,7 @@ export const SceneListTable: React.FC<ISceneListTableProps> = (
   );
 
   const PathCell = (scene: GQL.SlimSceneDataFragment) => (
-    <ul className="newline-list overflowable">
+    <ul className="newline-list overflowable TruncatedText">
       {scene.files.map((file) => (
         <li key={file.id}>
           <span>{file.path}</span>