add word-break: break-all to .ellip

src/assets/scss/Global/basic.scss

@@ -21,6 +21,7 @@
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
+  word-break: break-all;
 }
 
 .rounded {

src/components/AlbumView/Header.vue

@@ -41,7 +41,7 @@
       </div>
     </div>
     <div class="bigimg ">
-      <img class="rounded" :src="imguri.thumb + album.image" alt="" />
+      <img class="rounded shadow-lg" :src="imguri.thumb + album.image" alt="" />
     </div>
   </div>
 </template>

src/components/LeftSidebar/NP/SongCard.vue

@@ -91,7 +91,6 @@ const props = defineProps<{
 
   .title {
     font-weight: 900;
-    word-break: break-all;
   }
 
   .artists {

src/components/shared/SongItem.vue

@@ -140,7 +140,6 @@ function showMenu(e: Event) {
   }
 
   .song-album {
-    word-break: break-all;
     max-width: max-content;
     cursor: pointer;
 
@@ -150,8 +149,6 @@ function showMenu(e: Event) {
   }
 
   .song-artists {
-    word-break: break-all;
-
     .artist {
       cursor: pointer;
     }
@@ -167,6 +164,10 @@ function showMenu(e: Event) {
   .song-duration {
     font-size: 0.9rem;
     text-align: left;
+
+    .ellip {
+      word-break: keep-all !important;
+    }
   }
 
   .options-icon {
@@ -220,7 +221,6 @@ function showMenu(e: Event) {
 
     .title {
       cursor: pointer;
-      word-break: break-all;
     }
   }
 

src/components/shared/TrackItem.vue

@@ -137,12 +137,7 @@ const playThis = (track: Track) => {
     height: 3rem;
   }
 
-  .title {
-    word-break: break-all;
-  }
-
   .artist {
-    word-break: break-all;
     font-size: small;
     color: rgba(255, 255, 255, 0.637);
   }