From 48d95d9d6f0bac51cc7196736492f7d1818e042d Mon Sep 17 00:00:00 2001
From: val_makkas <chrysovm@csd.auth.gr>
Date: Thu, 12 Jun 2025 22:07:50 +0300
Subject: [PATCH 1/2] fix(SideDrawer): add show more/less button for
 description

---
 src/routes/Player/SideDrawer/SideDrawer.less | 18 ++++++++++++++++++
 src/routes/Player/SideDrawer/SideDrawer.tsx  | 19 ++++++++++++++++++-
 2 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/src/routes/Player/SideDrawer/SideDrawer.less b/src/routes/Player/SideDrawer/SideDrawer.less
index 2d2178c3e..3c2c12401 100644
--- a/src/routes/Player/SideDrawer/SideDrawer.less
+++ b/src/routes/Player/SideDrawer/SideDrawer.less
@@ -67,6 +67,24 @@
         }
     }
 
+    .show-more-btn {
+        background: none;
+        border: none;
+        color: #fff;
+        cursor: pointer;
+        font: inherit;
+        padding: 0.1rem 1.5rem 0.2rem 1.5rem;
+        margin: 0.1rem auto 0.2rem auto;
+        display: block;
+        text-align: center;
+        transition: text-decoration 0.2s;
+        text-decoration: none;
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+
     .series-content {
         flex: 2;
         display: flex;
diff --git a/src/routes/Player/SideDrawer/SideDrawer.tsx b/src/routes/Player/SideDrawer/SideDrawer.tsx
index cb94e24e5..5e404f402 100644
--- a/src/routes/Player/SideDrawer/SideDrawer.tsx
+++ b/src/routes/Player/SideDrawer/SideDrawer.tsx
@@ -19,6 +19,8 @@ type Props = {
 const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, className, closeSideDrawer, ...props }: Props, ref) => {
     const { core } = useServices();
     const [season, setSeason] = useState<number>(seriesInfo?.season);
+    const [showFullDescription, setShowFullDescription] = useState(false);
+    const toggleDescription = () => setShowFullDescription((prev) => !prev);
     const metaItem = useMemo(() => {
         return seriesInfo ?
             {
@@ -42,6 +44,13 @@ const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, classNa
             })
             .sort((a, b) => (a || Number.MAX_SAFE_INTEGER) - (b || Number.MAX_SAFE_INTEGER));
     }, [props.metaItem.videos]);
+    const description = useMemo(() => {
+        if (!metaItem.description) return '';
+        if (showFullDescription || metaItem.description.length <= 175) return metaItem.description;
+        const sliced = metaItem.description.slice(0, 175);
+        const lastSpace = sliced.lastIndexOf(' ');
+        return (lastSpace > 0 ? sliced.slice(0, lastSpace) : sliced) + '...';
+    }, [metaItem.description, showFullDescription])
 
     const seasonOnSelect = useCallback((event: { value: string }) => {
         setSeason(parseInt(event.value));
@@ -89,10 +98,18 @@ const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, classNa
                     runtime={metaItem.runtime}
                     releaseInfo={metaItem.releaseInfo}
                     released={metaItem.released}
-                    description={metaItem.description}
+                    description={description}
                     links={metaItem.links}
                 />
             </div>
+            {metaItem.description && metaItem.description.length > 175 && (
+                <button
+                    className={styles['show-more-btn']}
+                    onClick={toggleDescription}
+                >   
+                    {showFullDescription ? 'Show less' : 'Show more'}
+                </button>
+            )}
             {
                 seriesInfo ?
                     <div className={styles['series-content']}>

From d5eb6a515faced8ad2a33d66f493d69300d2a7b7 Mon Sep 17 00:00:00 2001
From: val_makkas <chrysovm@csd.auth.gr>
Date: Sat, 14 Jun 2025 08:49:48 +0300
Subject: [PATCH 2/2] fixed info box styling

---
 src/routes/Player/SideDrawer/SideDrawer.less | 20 +-------------------
 src/routes/Player/SideDrawer/SideDrawer.tsx  | 19 +------------------
 2 files changed, 2 insertions(+), 37 deletions(-)

diff --git a/src/routes/Player/SideDrawer/SideDrawer.less b/src/routes/Player/SideDrawer/SideDrawer.less
index 3c2c12401..eda08d118 100644
--- a/src/routes/Player/SideDrawer/SideDrawer.less
+++ b/src/routes/Player/SideDrawer/SideDrawer.less
@@ -57,7 +57,7 @@
     .info {
         padding: @padding;
         overflow-y: auto;
-        flex: none;
+        flex: 1;
 
         .side-drawer-meta-preview {
             .action-buttons-container {
@@ -67,24 +67,6 @@
         }
     }
 
-    .show-more-btn {
-        background: none;
-        border: none;
-        color: #fff;
-        cursor: pointer;
-        font: inherit;
-        padding: 0.1rem 1.5rem 0.2rem 1.5rem;
-        margin: 0.1rem auto 0.2rem auto;
-        display: block;
-        text-align: center;
-        transition: text-decoration 0.2s;
-        text-decoration: none;
-
-        &:hover {
-            text-decoration: underline;
-        }
-    }
-
     .series-content {
         flex: 2;
         display: flex;
diff --git a/src/routes/Player/SideDrawer/SideDrawer.tsx b/src/routes/Player/SideDrawer/SideDrawer.tsx
index 5e404f402..cb94e24e5 100644
--- a/src/routes/Player/SideDrawer/SideDrawer.tsx
+++ b/src/routes/Player/SideDrawer/SideDrawer.tsx
@@ -19,8 +19,6 @@ type Props = {
 const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, className, closeSideDrawer, ...props }: Props, ref) => {
     const { core } = useServices();
     const [season, setSeason] = useState<number>(seriesInfo?.season);
-    const [showFullDescription, setShowFullDescription] = useState(false);
-    const toggleDescription = () => setShowFullDescription((prev) => !prev);
     const metaItem = useMemo(() => {
         return seriesInfo ?
             {
@@ -44,13 +42,6 @@ const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, classNa
             })
             .sort((a, b) => (a || Number.MAX_SAFE_INTEGER) - (b || Number.MAX_SAFE_INTEGER));
     }, [props.metaItem.videos]);
-    const description = useMemo(() => {
-        if (!metaItem.description) return '';
-        if (showFullDescription || metaItem.description.length <= 175) return metaItem.description;
-        const sliced = metaItem.description.slice(0, 175);
-        const lastSpace = sliced.lastIndexOf(' ');
-        return (lastSpace > 0 ? sliced.slice(0, lastSpace) : sliced) + '...';
-    }, [metaItem.description, showFullDescription])
 
     const seasonOnSelect = useCallback((event: { value: string }) => {
         setSeason(parseInt(event.value));
@@ -98,18 +89,10 @@ const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, classNa
                     runtime={metaItem.runtime}
                     releaseInfo={metaItem.releaseInfo}
                     released={metaItem.released}
-                    description={description}
+                    description={metaItem.description}
                     links={metaItem.links}
                 />
             </div>
-            {metaItem.description && metaItem.description.length > 175 && (
-                <button
-                    className={styles['show-more-btn']}
-                    onClick={toggleDescription}
-                >   
-                    {showFullDescription ? 'Show less' : 'Show more'}
-                </button>
-            )}
             {
                 seriesInfo ?
                     <div className={styles['series-content']}>