From 05486a35bf41b74318344cf791ded0264dd6a1db Mon Sep 17 00:00:00 2001
From: Ivelin Megdanov <iv4o.megdanov@gmail.com>
Date: Tue, 4 Feb 2025 16:05:12 +0200
Subject: [PATCH] Add preview for truncated stream names

---
 .../MetaDetails/StreamsList/Stream/Stream.js  |  5 +++++
 .../StreamsList/Stream/styles.less            | 22 +++++++++++++++++--
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/routes/MetaDetails/StreamsList/Stream/Stream.js b/src/routes/MetaDetails/StreamsList/Stream/Stream.js
index 768b8d40a..41f81b386 100644
--- a/src/routes/MetaDetails/StreamsList/Stream/Stream.js
+++ b/src/routes/MetaDetails/StreamsList/Stream/Stream.js
@@ -181,12 +181,17 @@ const Stream = ({ className, videoId, videoReleased, addonName, name, descriptio
     const renderMenu = React.useMemo(() => function renderMenu() {
         return (
             <div className={styles['context-menu-content']} onPointerDown={popupMenuOnPointerDown} onContextMenu={popupMenuOnContextMenu} onClick={popupMenuOnClick} onKeyDown={popupMenuOnKeyDown}>
+                <div className={styles['context-menu-title']}>
+                    {description}
+                </div>
                 <Button className={styles['context-menu-option-container']} title={t('CTX_PLAY')}>
+                    <Icon className={styles['menu-icon']} name={'play'} />
                     <div className={styles['context-menu-option-label']}>{t('CTX_PLAY')}</div>
                 </Button>
                 {
                     streamLink &&
                         <Button className={styles['context-menu-option-container']} title={t('CTX_COPY_STREAM_LINK')} onClick={copyStreamLink}>
+                            <Icon className={styles['menu-icon']} name={'link'} />
                             <div className={styles['context-menu-option-label']}>{t('CTX_COPY_STREAM_LINK')}</div>
                         </Button>
                 }
diff --git a/src/routes/MetaDetails/StreamsList/Stream/styles.less b/src/routes/MetaDetails/StreamsList/Stream/styles.less
index 0461c77ee..06720a879 100644
--- a/src/routes/MetaDetails/StreamsList/Stream/styles.less
+++ b/src/routes/MetaDetails/StreamsList/Stream/styles.less
@@ -111,12 +111,29 @@
         background-color: var(--secondary-accent-color);
     }
 
+    .menu-icon {
+        flex: none;
+        width: 1.7rem;
+        height: 1.7rem;
+        margin-right: 1rem;
+        color: var(--color-placeholder);
+    }
+
 	.context-menu-container {
 		max-width: calc(90% - 1.5rem);
 		z-index: 2;
 	
 		.context-menu-content {
 			--spatial-navigation-contain: contain;
+
+            .context-menu-title {
+                font-size: 0.9rem;
+                padding: 1rem 1.5rem;
+                font-weight: 100;
+                border-bottom: 1px solid var(--color-placeholder);
+                color: var(--primary-foreground-color);
+                white-space: break-spaces;
+            }
 	
 			.context-menu-option-container {
 				display: flex;
@@ -131,8 +148,9 @@
 	
 				.context-menu-option-label {
 					font-size: 1rem;
-					font-weight: 500;
-					color:var(--primary-foreground-color);
+					font-weight: 300;
+					color: var(--primary-foreground-color);
+                    text-transform: capitalize;
 				}
 			}
 		}