From ddeec77ccd27eb2ae83a3c54642e7361fd8b81c4 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Sat, 20 Aug 2022 14:43:30 +0300
Subject: [PATCH] add word-break: break-all to .ellip

---
 src/assets/scss/Global/basic.scss          | 1 +
 src/components/AlbumView/Header.vue        | 4 ++--
 src/components/LeftSidebar/NP/SongCard.vue | 1 -
 src/components/shared/SongItem.vue         | 8 ++++----
 src/components/shared/TrackItem.vue        | 5 -----
 5 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/src/assets/scss/Global/basic.scss b/src/assets/scss/Global/basic.scss
index df503e76..3ce5d05a 100644
--- a/src/assets/scss/Global/basic.scss
+++ b/src/assets/scss/Global/basic.scss
@@ -21,6 +21,7 @@
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
+  word-break: break-all;
 }
 
 .rounded {
diff --git a/src/components/AlbumView/Header.vue b/src/components/AlbumView/Header.vue
index 235bb2d5..25013e07 100644
--- a/src/components/AlbumView/Header.vue
+++ b/src/components/AlbumView/Header.vue
@@ -40,8 +40,8 @@
         />
       </div>
     </div>
-    <div class="bigimg">
-      <img class="rounded" :src="imguri.thumb + album.image" alt="" />
+    <div class="bigimg ">
+      <img class="rounded shadow-lg" :src="imguri.thumb + album.image" alt="" />
     </div>
   </div>
 </template>
diff --git a/src/components/LeftSidebar/NP/SongCard.vue b/src/components/LeftSidebar/NP/SongCard.vue
index 02ac0bd6..f9c9dcf0 100644
--- a/src/components/LeftSidebar/NP/SongCard.vue
+++ b/src/components/LeftSidebar/NP/SongCard.vue
@@ -91,7 +91,6 @@ const props = defineProps<{
 
   .title {
     font-weight: 900;
-    word-break: break-all;
   }
 
   .artists {
diff --git a/src/components/shared/SongItem.vue b/src/components/shared/SongItem.vue
index 10c586ee..c5496061 100644
--- a/src/components/shared/SongItem.vue
+++ b/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;
     }
   }
 
diff --git a/src/components/shared/TrackItem.vue b/src/components/shared/TrackItem.vue
index 4a896ce3..553447e6 100644
--- a/src/components/shared/TrackItem.vue
+++ b/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);
   }