replace scrolling text with title prop

stashapp · Mar 31, 2024 · 70567fa · 70567fa
1 parent 2a0e78b
commit 70567fa
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 55 deletions.
diff --git a/ui/v2.5/src/components/Scenes/SceneDetails/QueueViewer.tsx b/ui/v2.5/src/components/Scenes/SceneDetails/QueueViewer.tsx
@@ -366,7 +366,6 @@ export const QueueViewer: React.FC<IPlaylistViewer> = ({
         return performer.name;
       })
       .join(", ");
-    const transitionOffset = 20;
     return (
       <li
         className={cx("my-2", { current: isCurrentScene(scene) })}
@@ -391,35 +390,13 @@ export const QueueViewer: React.FC<IPlaylistViewer> = ({
               />
             </div>
             <div className="queue-scene-details">
-              <span
-                className="queue-scene-title"
-                style={{
-                  transition: `${
-                    (title ? title.length : 0) / transitionOffset
-                  }s`,
-                }}
-              >
+              <span className="queue-scene-title" title={title}>
                 {title}
               </span>
-              <span
-                className="queue-scene-studio"
-                style={{
-                  transition: `${
-                    (studio ? studio.length : 0) / transitionOffset
-                  }s`,
-                }}
-              >
+              <span className="queue-scene-studio" title={studio}>
                 {studio}
               </span>
-              <span
-                className="queue-scene-performers"
-                style={{
-                  transition: `${
-                    (performersStr ? performersStr.length : 0) /
-                    transitionOffset
-                  }s`,
-                }}
-              >
+              <span className="queue-scene-performers" title={performersStr}>
                 {performersStr}
               </span>
               <span className="queue-scene-date">{scene?.date}</span>

diff --git a/ui/v2.5/src/components/Scenes/styles.scss b/ui/v2.5/src/components/Scenes/styles.scss
@@ -606,35 +606,6 @@ input[type="range"].blue-slider {
   padding-right: 0.25rem;
 }
 
-@media (min-width: 1200px) {
-  #queue-viewer {
-    .queue-scene-title,
-    .queue-scene-studio,
-    .queue-scene-performers,
-    .queue-scene-date {
-      margin-right: auto;
-      min-width: 225px;
-      overflow: hidden;
-      position: relative;
-      transform: translateX(0);
-      white-space: nowrap;
-    }
-
-    .queue-scene-studio,
-    .queue-scene-performers,
-    .queue-scene-date {
-      font-size: 1.1rem;
-    }
-
-    .queue-scene-title:hover,
-    .queue-scene-studio:hover,
-    .queue-scene-performers:hover,
-    .queue-scene-date:hover {
-      transform: translateX(calc(225px - 100%));
-    }
-  }
-}
-
 .tab-pane #discover-content ol {
   list-style: none;
   padding-left: 0;
@@ -687,6 +658,23 @@ input[type="range"].blue-slider {
     }
   }
 
+  .queue-scene-title,
+  .queue-scene-studio,
+  .queue-scene-performers,
+  .queue-scene-date {
+    margin-right: auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100%;
+  }
+
+  .queue-scene-studio,
+  .queue-scene-performers,
+  .queue-scene-date {
+    font-size: 1.1rem;
+  }
+
   .thumbnail-container {
     aspect-ratio: 16 / 9;
     width: 40%;