fix for top songs and latest release on artist page

src/renderer/less/pages.less

@@ -16,6 +16,7 @@
   justify-content: center;
   align-items    : center;
 }
+
 // End Helpers
 
 // GitHub Themes
@@ -58,6 +59,7 @@
     >.list-group {
       margin: 0px;
     }
+
     .list-group-item {
       padding: 12px 6px;
 
@@ -524,10 +526,12 @@
       padding        : 1em;
       backdrop-filter: unset;
       background     : black;
+
       h3 {
         display: none;
       }
     }
+
     .playlist-inner {
       background   : black;
       width        : 80%;
@@ -551,6 +555,7 @@
   0% {
     opacity: 0;
   }
+
   100% {
     opacity: 0.7;
   }
@@ -773,6 +778,22 @@
   .artist-body {
     padding: 0px var(--contentInnerPadding) 0px var(--contentInnerPadding);
     margin : -140px 20px;
+
+    .arow {
+      display : flex;
+      overflow: hidden;
+      padding : 16px 32px;
+      >.latestRelease {
+        width: 250px;
+      }
+      >.topSongs {
+        width: calc(100% - 250px);
+      }
+
+      &.arowb>.topSongs {
+        width: 100%;
+      }
+    }
   }
 
   &.animated>.artist-body {
@@ -832,6 +853,7 @@
     text-transform: uppercase;
     font-weight   : bold;
   }
+
   .md-btn-replay--hero {
     font-size     : 1em;
     padding       : 16px;
@@ -914,10 +936,12 @@
     transition      : transform .2s var(--appleEase);
     transition-delay: .1s;
     align-self      : center;
+
     &:hover {
       transform       : translateY(-6px);
       transition-delay: 0s;
     }
+
     .artwork-container {
       height: 200px;
       width : 200px;
@@ -928,6 +952,7 @@
     .cd-mediaitem-square {
       height: 230px;
       width : 230px;
+
       .info-rect {
         display: none;
       }
@@ -948,6 +973,7 @@
       object-fit: cover;
     }
   }
+
   .top-genres-container {
 
     .genre-name {
@@ -955,6 +981,7 @@
       margin     : 6px 0px;
       font-weight: 500;
     }
+
     .genre-count {
       width        : 100%;
       height       : 32px;
@@ -980,8 +1007,10 @@
     .mediaitem-artwork {
       animation: replayFadeIn .5s var(--appleEase);
     }
+
     transition      : transform .2s var(--appleEase);
     transition-delay: .1s;
+
     &:hover {
       transform       : scale(1.1);
       transition-delay: 0s;
@@ -1015,6 +1044,7 @@
       text-shadow: var(--replayTextShadow);
     }
   }
+
   .replay-card {
     background: transparent;
     border    : 0px;

src/renderer/views/pages/artist.ejs

@@ -56,8 +56,8 @@
             </div>
         </div>
         <div class="artist-body">
-            <div class="row well">
+            <div class="arow well" :class="{arowb: data.views['latest-release'].data.length == 0}">
-                <div class="col-sm-3" v-if="data.views['latest-release'].data.length != 0">
+                <div class="latestRelease" v-if="data.views['latest-release'].data.length != 0">
                     <h3>{{app.getLz('term.latestReleases')}}</h3>
                     <div style="width: auto;margin: 0 auto;">
                         <mediaitem-square kind="card" v-for="song in data.views['latest-release'].data"
@@ -65,7 +65,7 @@
                         </mediaitem-square>
                     </div>
                 </div>
-                <div class="col-sm-12" v-if="data.views['top-songs']">
+                <div class="topSongs" v-if="data.views['top-songs']">
                     <div class="row">
                         <div class="col" style="padding:0;">
                             <h3>{{app.getLz('term.topSongs')}}</h3>