remove cap-first classes

+ add padding 1rem to context menu child items

src/assets/scss/Global/basic.scss

@@ -23,13 +23,6 @@
   text-overflow: ellipsis;
 }
 
-.cap-first {
-  display: inline-block;
-  &::first-letter {
-    text-transform: uppercase;
-  }
-}
-
 .rounded {
   border-radius: $small;
 }

src/components/AlbumView/Header.vue

@@ -19,7 +19,7 @@
           <span v-else-if="album.is_single">Single</span>
           <span v-else>Album</span>
         </div>
-        <div class="title ellip cap-first">
+        <div class="title ellip">
           {{ album.title }}
         </div>
       </div>
@@ -41,15 +41,15 @@
 
 <script setup lang="ts">
 import useVisibility from "@/composables/useVisibility";
+import { paths } from "@/config";
 import useNavStore from "@/stores/nav";
 import useAlbumStore from "@/stores/pages/album";
 import { ref } from "vue";
+import { getButtonColor, isLight } from "../../composables/colors/album";
 import { playSources } from "../../composables/enums";
 import { formatSeconds } from "../../composables/perks";
-import { paths } from "@/config";
 import { AlbumInfo } from "../../interfaces";
 import PlayBtnRect from "../shared/PlayBtnRect.vue";
-import { getButtonColor, isLight } from "../../composables/colors/album";
 
 const props = defineProps<{
   album: AlbumInfo;

src/components/LeftSidebar/SongCard.vue

@@ -21,9 +21,9 @@
           <span v-else>MP3</span>
           • {{ track.bitrate }}
         </div>
-        <div class="title ellip cap-first">{{ props.track.title }}</div>
+        <div class="title ellip">{{ props.track.title }}</div>
         <div class="separator no-border"></div>
-        <div class="artists ellip cap-first" v-if="props.track.artists[0] !== ''">
+        <div class="artists ellip" v-if="props.track.artists[0] !== ''">
           <span
             v-for="artist in putCommas(props.track.artists)"
             :key="artist"
@@ -40,8 +40,8 @@
 
 <script setup lang="ts">
 import { putCommas } from "../../composables/perks";
-import { Track } from "../../interfaces";
 import { paths } from "../../config";
+import { Track } from "../../interfaces";
 const imguri = paths.images.thumb;
 
 const props = defineProps<{

src/components/RightSideBar/Queue/playingFrom.vue

@@ -4,7 +4,7 @@
       <div class="icon image" :class="from.icon"></div>
       Playing from
     </div>
-    <div class="name cap-first">
+    <div class="name">
       <div id="to">
         {{ from.text }}
       </div>
@@ -13,15 +13,13 @@
 </template>
 
 <script setup lang="ts">
-import {
-  fromFolder,
-  fromAlbum,
-  fromPlaylist,
-  fromSearch,
-} from "@/interfaces";
 import { FromOptions } from "@/composables/enums";
-import { useRouter } from "vue-router";
+import {
+fromAlbum, fromFolder, fromPlaylist,
+fromSearch
+} from "@/interfaces";
 import { computed } from "@vue/reactivity";
+import { useRouter } from "vue-router";
 
 const props = defineProps<{
   from: fromFolder | fromAlbum | fromPlaylist | fromSearch;

src/components/RightSideBar/Search/TabsWrapper.vue

@@ -3,7 +3,7 @@
     <div class="tab-buttons-wrapper">
       <div id="tabheaders" class="rounded noscroll">
         <div
-          class="tab cap-first"
+          class="tab"
           v-for="slot in $slots.default()"
           :key="slot.key"
           @click="s.changeTab(slot.props.name)"

src/components/contextMenu.vue

@@ -25,7 +25,7 @@
       @click="option.action()"
     >
       <div class="icon image" :class="option.icon"></div>
-      <div class="label ellip cap-first">{{ option.label }}</div>
+      <div class="label ellip">{{ option.label }}</div>
       <div class="more image" v-if="option.children"></div>
       <div class="children rounded shadow-sm" v-if="option.children">
         <div
@@ -35,7 +35,7 @@
           :class="[{ critical: child.critical }, child.type]"
           @click="child.action()"
         >
-          <div class="label ellip cap-first">
+          <div class="label ellip">
             {{ child.label }}
           </div>
         </div>
@@ -91,6 +91,10 @@ const context = useContextStore();
       background-color: $context;
       transform: scale(0);
       transform-origin: top left;
+
+      .context-item {
+        padding: $small 1rem;
+      }
     }
 
     .icon {

src/components/playlists/PlaylistCard.vue

@@ -11,7 +11,7 @@
       }"
     ></div>
     <div class="bottom">
-      <div class="name ellip cap-first">{{ props.playlist.name }}</div>
+      <div class="name ellip">{{ props.playlist.name }}</div>
       <div class="count">
         <span v-if="props.playlist.count == 0">No Tracks</span>
         <span v-else-if="props.playlist.count == 1"
@@ -24,8 +24,8 @@
 </template>
 
 <script setup lang="ts">
-import { Playlist } from "../../interfaces";
 import { paths } from "../../config";
+import { Playlist } from "../../interfaces";
 
 const imguri = paths.images.playlist;
 

src/components/shared/SongItem.vue

@@ -27,10 +27,12 @@
         ></div>
       </div>
       <div @click="emitUpdate(track)">
-        <span class="ellip title cap-first">{{ track.title }}</span>
+        <div class="title ellip">
+          {{ track.title }}
+        </div>
       </div>
     </div>
-    <div class="song-artists cap-first">
+    <div class="song-artists">
       <div class="ellip" v-if="track.artists[0] !== ''">
         <span
           class="artist"
@@ -44,7 +46,7 @@
       </div>
     </div>
     <router-link
-      class="song-album ellip cap-first"
+      class="song-album ellip"
       :to="{
         name: 'AlbumView',
         params: {

src/components/shared/TrackItem.vue

@@ -23,11 +23,11 @@
       ></div>
     </div>
     <div class="tags">
-      <div class="title ellip cap-first">
+      <div class="title ellip">
        {{ props.track.title }}
       </div>
       <hr />
-      <div class="artist ellip cap-first">
+      <div class="artist ellip">
         <span v-for="artist in putCommas(props.track.artists)" :key="artist">{{
           artist
         }}</span>
@@ -37,11 +37,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
 import { ContextSrc } from "@/composables/enums";
 import { putCommas } from "@/composables/perks";
 import trackContext from "@/contexts/track_context";
 import { Track } from "@/interfaces";
+import { ref } from "vue";
 
 import { paths } from "@/config";
 import useContextStore from "@/stores/context";