properly handle overflow on sidebar items (#971)

.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,

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%;

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"

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%;

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}