added slight design tweaks

public/assets/css/playlistdetail.css

@@ -43,7 +43,7 @@
 .section-playlist-detail .playlist-content {
   padding: 50px;
   display: grid;
-  grid-template-columns: 500px 1fr;
+  grid-template-columns: 400px 1fr;
   grid-gap: 25px;
 }
 .section-playlist-detail .playlist-content .playlist-detail .playlist-description {
@@ -70,8 +70,8 @@
 }
 .section-playlist-detail .playlist-content .playlist-detail .playlist-charters {
   display: grid;
-  grid-template-columns: auto 1fr;
-  grid-gap: 15px;
+  grid-template-rows: auto 1fr;
+  grid-gap: 8px;
   margin-top: 25px;
 }
 .section-playlist-detail .playlist-content .playlist-detail .playlist-charters .label {
@@ -84,4 +84,7 @@
   line-height: 1.5em;
   border-radius: 4px;
 }
+.section-playlist-detail .playlist-content .song-row-playlist .song-list {
+  grid-template-columns: repeat(5, 1fr);
+}
 /*# sourceMappingURL=playlistdetail.css.map */
\ No newline at end of file

public/assets/css/playlistdetail.css.map

-{"version":3,"sources":["playlistdetail.less"],"names":[],"mappings":"AACI,wBAAE;EACE,WAAA;EACA,aAAA;EACA,oCAAA;EACA,sBAAA;EACA,gCAAA;;AAEA,wBAPF,OAOI;EACE,WAAA;EACA,YAAA;EACA,8BAAA;EACA,yBAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;;AAEA,wBAhBN,OAOI,OASI;EACE,kBAAA;EACA,4CAAA;;AAEA,wBApBV,OAOI,OASI,SAII;EACE,eAAA;EACA,kBAAA;EACA,aAAa,oBAAb;;AAEA,wBAzBd,OAOI,OASI,SAII,OAKI;EACE,qBAAA;EACA,aAAa,uBAAb;EACA,iBAAA;EACA,eAAA;EACA,iBAAA;EACA,kBAAA;EACA,gBAAA;EACA,WAAA;EACA,oCAAA;EACA,iBAAA;EACA,WAAW,iBAAX;;AAIR,wBAxCV,OAOI,OASI,SAwBI;EACE,eAAA;EACA,YAAA;;AAKhB,wBAAE;EACE,aAAA;EACA,aAAA;EACA,gCAAA;EACA,cAAA;;AAGI,wBAPN,kBAMI,iBACI;EACE,mBAAA;EACA,kBAAA;EACA,kBAAA;EACA,aAAA;EACA,cAAA;EACA,aAAA;;AAEA,wBAfV,kBAMI,iBACI,sBAQI;EACE,kBAAA;EACA,YAAA;;AAGR,wBApBN,kBAMI,iBAcI;EACE,aAAA;EACA,+BAAA;EACA,cAAA;EACA,gBAAA;;AAEA,wBA1BV,kBAMI,iBAcI,mBAMI;EACE,kBAAA;EACA,YAAA;;AAGR,wBA/BN,kBAMI,iBAyBI;EACE,aAAA;EACA,+BAAA;EACA,cAAA;EACA,gBAAA;;AAEA,wBArCV,kBAMI,iBAyBI,mBAMI;EACE,kBAAA;EACA,YAAA;;AAEJ,wBAzCV,kBAMI,iBAyBI,mBAUI;EACE,mBAAA;EACA,aAAA;EACA,kBAAA;EACA,kBAAA","file":"playlistdetail.css"}
+{"version":3,"sources":["playlistdetail.less"],"names":[],"mappings":"AACI,wBAAE;EACE,WAAA;EACA,aAAA;EACA,oCAAA;EACA,sBAAA;EACA,gCAAA;;AAEA,wBAPF,OAOI;EACE,WAAA;EACA,YAAA;EACA,8BAAA;EACA,yBAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;;AAEA,wBAhBN,OAOI,OASI;EACE,kBAAA;EACA,4CAAA;;AAEA,wBApBV,OAOI,OASI,SAII;EACE,eAAA;EACA,kBAAA;EACA,aAAa,oBAAb;;AAEA,wBAzBd,OAOI,OASI,SAII,OAKI;EACE,qBAAA;EACA,aAAa,uBAAb;EACA,iBAAA;EACA,eAAA;EACA,iBAAA;EACA,kBAAA;EACA,gBAAA;EACA,WAAA;EACA,oCAAA;EACA,iBAAA;EACA,WAAW,iBAAX;;AAIR,wBAxCV,OAOI,OASI,SAwBI;EACE,eAAA;EACA,YAAA;;AAKhB,wBAAE;EACE,aAAA;EACA,aAAA;EACA,gCAAA;EACA,cAAA;;AAGI,wBAPN,kBAMI,iBACI;EACE,mBAAA;EACA,kBAAA;EACA,kBAAA;EACA,aAAA;EACA,cAAA;EACA,aAAA;;AAEA,wBAfV,kBAMI,iBACI,sBAQI;EACE,kBAAA;EACA,YAAA;;AAGR,wBApBN,kBAMI,iBAcI;EACE,aAAA;EACA,+BAAA;EACA,cAAA;EACA,gBAAA;;AAEA,wBA1BV,kBAMI,iBAcI,mBAMI;EACE,kBAAA;EACA,YAAA;;AAGR,wBA/BN,kBAMI,iBAyBI;EACE,aAAA;EACA,4BAAA;EACA,aAAA;EACA,gBAAA;;AAEA,wBArCV,kBAMI,iBAyBI,mBAMI;EACE,kBAAA;EACA,YAAA;;AAEJ,wBAzCV,kBAMI,iBAyBI,mBAUI;EACE,mBAAA;EACA,aAAA;EACA,kBAAA;EACA,kBAAA;;AAKR,wBAlDN,kBAiDI,mBACI;EACE,uBAAuB,cAAvB","file":"playlistdetail.css"}
\ No newline at end of file

public/assets/css/playlistdetail.less

@@ -49,7 +49,7 @@
     & .playlist-content {
         padding: 50px;
         display: grid;
-        grid-template-columns: 500px 1fr;
+        grid-template-columns: 400px 1fr;
         grid-gap: 25px;
 
         & .playlist-detail {
@@ -79,8 +79,8 @@
             }
             & .playlist-charters {
                 display: grid;
-                grid-template-columns: auto 1fr;
-                grid-gap: 15px;
+                grid-template-rows: auto 1fr;
+                grid-gap: 8px;
                 margin-top: 25px;
 
                 & .label {
@@ -95,5 +95,10 @@
                 }
             }
         }
+        & .song-row-playlist {
+            & .song-list {
+                grid-template-columns: repeat(5, 1fr);
+            }
+        }
     }
 }
\ No newline at end of file

templates/song/detail.html.twig

@@ -26,29 +26,29 @@
             </div>
             <div class="song-actions">
                 <div class="action-row">
-                <a href="{{ path('song.download', {songId: song.id}) }}" class="action">
-                    <div class="icon">
-                        <i class="mdi mdi-download"></i>
-                    </div>
-                </a>
-                <div class="action-player">
-                    <div class="icon">
-                        <i class="mdi mdi-play"></i>
-                    </div>
-                    <div class="volume">
-                        <input type="range" min="0" max="100" value="50" class="playerVolume" onInput="UpdateVolume()" />
-                    </div>
-                </div>
-                <a href="spinshare-song://{{ song.id }}" class="action">
-                    <div class="icon">
-                        <i class="mdi mdi-open-in-new"></i>
-                    </div>
-                </a>
-                <a href="{{ path('report.song', {songId: song.id}) }}" class="action">
-                    <div class="icon">
-                        <i class="mdi mdi-flag-outline"></i>
+                    <a href="{{ path('song.download', {songId: song.id}) }}" class="action">
+                        <div class="icon">
+                            <i class="mdi mdi-download"></i>
+                        </div>
+                    </a>
+                    <div class="action-player">
+                        <div class="icon">
+                            <i class="mdi mdi-play"></i>
+                        </div>
+                        <div class="volume">
+                            <input type="range" min="0" max="100" value="50" class="playerVolume" onInput="UpdateVolume()" />
+                        </div>
                     </div>
-                </a>
+                    <a href="spinshare-song://{{ song.id }}" class="action">
+                        <div class="icon">
+                            <i class="mdi mdi-open-in-new"></i>
+                        </div>
+                    </a>
+                    <a href="{{ path('report.song', {songId: song.id}) }}" class="action">
+                        <div class="icon">
+                            <i class="mdi mdi-flag-outline"></i>
+                        </div>
+                    </a>
                 {% if is_granted('ROLE_USER') %}
                     </div>
                     <div class="action-row">
@@ -75,8 +75,8 @@
                                 <i class="mdi mdi-playlist-plus"></i>
                             </div>
                         </div>
-                    </div>
                 {% endif %}
+                </div>
             </div>
             <div class="song-statistics">
                 <div class="stat">