From 8eb591bd082550489b6ebb896ae17ffd9d299597 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Sun, 29 Jun 2025 18:56:46 -0700
Subject: [PATCH] properly handle overflow on sidebar items (#971)

---
 .stylelintrc.json                               |  2 +-
 .../sidebar/components/sidebar-item.module.css  | 14 ++++++++++++++
 .../sidebar/components/sidebar-item.tsx         | 17 ++++++++++++-----
 .../components/sidebar-playlist-list.module.css |  8 ++++++++
 .../components/sidebar-playlist-list.tsx        |  4 ++++
 5 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/.stylelintrc.json b/.stylelintrc.json
index 5c94ba04..55f50486 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -10,7 +10,7 @@
         "selector-type-no-unknown": [true, { "ignoreTypes": ["/-styled-mixin/", "/^\\$\\w+/"] }],
         "declaration-block-no-shorthand-property-overrides": null,
         "declaration-block-no-redundant-longhand-properties": null,
-        "at-rule-no-unknown": [true, { "ignoreAtRules": ["mixin"] }],
+        "at-rule-no-unknown": [true, { "ignoreAtRules": ["mixin", "value"] }],
         "function-no-unknown": [true, { "ignoreFunctions": ["darken", "alpha", "lighten"] }],
         "declaration-property-value-no-unknown": null,
         "no-descending-specificity": null,
diff --git a/src/renderer/features/sidebar/components/sidebar-item.module.css b/src/renderer/features/sidebar/components/sidebar-item.module.css
index ce459b5a..61507ca7 100644
--- a/src/renderer/features/sidebar/components/sidebar-item.module.css
+++ b/src/renderer/features/sidebar/components/sidebar-item.module.css
@@ -9,6 +9,20 @@
     }
 }
 
+.inner {
+    display: flex;
+    justify-content: flex-start;
+    width: 100%;
+}
+
+.label {
+    display: block;
+    align-content: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
 .link {
     display: flex;
     width: 100%;
diff --git a/src/renderer/features/sidebar/components/sidebar-item.tsx b/src/renderer/features/sidebar/components/sidebar-item.tsx
index 8873de2c..a7f7ac6c 100644
--- a/src/renderer/features/sidebar/components/sidebar-item.tsx
+++ b/src/renderer/features/sidebar/components/sidebar-item.tsx
@@ -10,13 +10,20 @@ interface SidebarItemProps extends ButtonProps {
     to: LinkProps['to'];
 }
 
-export const SidebarItem = ({ children, to, ...props }: SidebarItemProps) => {
+export const SidebarItem = ({ children, className, to, ...props }: SidebarItemProps) => {
     return (
         <Button
-            className={clsx({
-                [styles.disabled]: props.disabled,
-                [styles.link]: true,
-            })}
+            className={clsx(
+                {
+                    [styles.disabled]: props.disabled,
+                    [styles.link]: true,
+                },
+                className,
+            )}
+            classNames={{
+                inner: styles.inner,
+                label: styles.label,
+            }}
             component={Link}
             to={to}
             variant="subtle"
diff --git a/src/renderer/features/sidebar/components/sidebar-playlist-list.module.css b/src/renderer/features/sidebar/components/sidebar-playlist-list.module.css
index b6b88503..784e0067 100644
--- a/src/renderer/features/sidebar/components/sidebar-playlist-list.module.css
+++ b/src/renderer/features/sidebar/components/sidebar-playlist-list.module.css
@@ -1,3 +1,5 @@
+@value label from './sidebar-item.module.css';
+
 .list {
     padding: var(--theme-spacing-sm) var(--theme-spacing-md);
 }
@@ -8,6 +10,12 @@
     width: 100%;
 }
 
+.row-hover {
+    :global(.label) {
+        margin-right: 135px;
+    }
+}
+
 .controls {
     position: absolute;
     top: 50%;
diff --git a/src/renderer/features/sidebar/components/sidebar-playlist-list.tsx b/src/renderer/features/sidebar/components/sidebar-playlist-list.tsx
index b4617b3a..7fa78d80 100644
--- a/src/renderer/features/sidebar/components/sidebar-playlist-list.tsx
+++ b/src/renderer/features/sidebar/components/sidebar-playlist-list.tsx
@@ -1,4 +1,5 @@
 import { closeAllModals, openModal } from '@mantine/modals';
+import clsx from 'clsx';
 import { MouseEvent, useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { generatePath } from 'react-router';
@@ -43,6 +44,9 @@ const PlaylistRowButton = ({ name, onPlay, to, ...props }: PlaylistRowButtonProp
             onMouseLeave={() => setIsHovered(false)}
         >
             <SidebarItem
+                className={clsx({
+                    [styles.rowHover]: isHovered,
+                })}
                 to={url}
                 variant="subtle"
                 {...props}