From 589bff496d94de35cc3ae67bd6b50ccf59605cb3 Mon Sep 17 00:00:00 2001
From: Gireesh <mgireesha77@gmail.com>
Date: Sun, 5 May 2024 21:57:52 +0530
Subject: [PATCH] Playlist selector V2 - UI issue fix

---
 src/g-player-react/src/Components/CommnPopup.js          | 4 ++--
 src/g-player-react/src/Components/main.scss              | 6 +++---
 .../src/Components/playlist/PlayllistSelectorV2.js       | 9 +++++----
 .../src/Components/screen/GPContextMenu.js               | 6 ++++++
 4 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/g-player-react/src/Components/CommnPopup.js b/src/g-player-react/src/Components/CommnPopup.js
index 2a834a5..a79fb21 100644
--- a/src/g-player-react/src/Components/CommnPopup.js
+++ b/src/g-player-react/src/Components/CommnPopup.js
@@ -79,8 +79,8 @@ export const CommonPopup = () => {
 
     return (
         <>
-            <div className="common-popup" style={{ display: showPopup ? 'flex' : 'none' }}>
-                <div className="popup-container">
+            <div className="common-popup" style={{ display: showPopup ? 'flex' : 'none',...commonPopupObj.popupStyle?commonPopupObj.popupStyle:'' }}>
+                <div className="popup-container" style={commonPopupObj.popContStyle?commonPopupObj.popContStyle:{}}>
                     <div className="popup-header">
                         <label className='label'>{commonPopupObj.title}</label>
                         <button type="button" className="close" data-dismiss="modal" aria-hidden="true" onClick={closePopup}>×</button>
diff --git a/src/g-player-react/src/Components/main.scss b/src/g-player-react/src/Components/main.scss
index 1b1fa0a..807a735 100644
--- a/src/g-player-react/src/Components/main.scss
+++ b/src/g-player-react/src/Components/main.scss
@@ -2661,8 +2661,8 @@ a.disabled-click{
 }
 
 .playlist-selector-v2{
-    display: flex;
-    flex-wrap: wrap;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
     column-gap: 20px;
     row-gap: 10px;
     justify-content: space-between;
@@ -2672,7 +2672,7 @@ a.disabled-click{
         border: 1px solid;
         padding: 5px;
         border-radius: 4px;
-        width: 10em;
+        // width: 10em;
         text-wrap: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
diff --git a/src/g-player-react/src/Components/playlist/PlayllistSelectorV2.js b/src/g-player-react/src/Components/playlist/PlayllistSelectorV2.js
index 1fbd6fd..fc53255 100644
--- a/src/g-player-react/src/Components/playlist/PlayllistSelectorV2.js
+++ b/src/g-player-react/src/Components/playlist/PlayllistSelectorV2.js
@@ -122,17 +122,18 @@ export const PlaylistSelector = () => {
 
     return(
         <div id={PLAYLIST_SELECTOR} className="playlist-selector-v2" style={styles}>
-            <div className="row" style={{display:'flex',width:'100%', border:'none'}}>
+            <div className="row" style={{gridColumn:'span 4', border:'none', width:'100%'}}>
                 {obj && obj.title+" - "+obj.album}
             </div>
-            <div className="row" style={{display:'flex',width:'100%'}} onClick={addToNewPlayist}>
-                <HiPlus style={{marginTop:4,marginRight:5}} /><label>{NEW_PLAYLIST_BTN_LABEL}</label>
-            </div>
+            
             {playLists && playLists.map(playlist =>
                 <div className={assignedPlaylists.includes(playlist.name) ? "selected row" : "row"} onClick={()=>handleOnPlaylistClick(playlist.id,playlist.name)} title={playlist.name}>
                     <label>{playlist.name}</label>
                 </div>
             )}
+            <div className="row" style={{gridColumn:'span 4', width:'100%'}} onClick={addToNewPlayist}>
+                <HiPlus style={{marginTop:4,marginRight:5}} /><label>{NEW_PLAYLIST_BTN_LABEL}</label>
+            </div>
         </div>
     );
 } 
\ No newline at end of file
diff --git a/src/g-player-react/src/Components/screen/GPContextMenu.js b/src/g-player-react/src/Components/screen/GPContextMenu.js
index cc88eea..ae5f199 100644
--- a/src/g-player-react/src/Components/screen/GPContextMenu.js
+++ b/src/g-player-react/src/Components/screen/GPContextMenu.js
@@ -86,6 +86,12 @@ export const GPContexMenu = () => {
                 contentType: COMPONENT,
                 component: PlaylistSelectorV2,
                 primaryClassName: "no-display",
+                popContStyle:{
+                    width:'60%'
+                },
+                popupStyle:{
+                    top:'-5vh'
+                }
         
             }
             dispatch(setCommonPopupObj(commonPopupObj));