diff --git a/front/src/App.vue b/front/src/App.vue
index cf46627b8..48cef6a84 100644
--- a/front/src/App.vue
+++ b/front/src/App.vue
@@ -101,32 +101,32 @@ store.dispatch('auth/fetchUser')
         </KeepAlive>
       </Transition>
     </RouterView>
-    <ServiceMessages />
-    <transition name="queue">
-      <Queue v-show="store.state.ui.queueFocused" />
-    </transition>
-    <AudioPlayer />
-    <LanguagesModal />
-    <ShortcutsModal />
-    <PlaylistModal v-if="store.state.auth.authenticated" />
-    <FilterModal v-if="store.state.auth.authenticated" />
-    <ReportModal />
-    <UploadModal v-if="store.state.auth.authenticated" />
-    <SearchModal />
-    <ServiceMessages />
   </div>
+  <ServiceMessages />
+  <transition name="queue">
+    <Queue v-show="store.state.ui.queueFocused" />
+  </transition>
+  <AudioPlayer class="funkwhale" v-bind="color({}, ['default', 'solid'])()" />
+  <LanguagesModal />
+  <ShortcutsModal />
+  <PlaylistModal v-if="store.state.auth.authenticated" />
+  <FilterModal v-if="store.state.auth.authenticated" />
+  <ReportModal />
+  <UploadModal v-if="store.state.auth.authenticated" />
+  <SearchModal />
+  <ServiceMessages />
 </template>
 
 <style scoped lang="scss">
 .responsive {
   display: grid !important;
-  grid-template-columns: 100%;
+  grid-template-columns: 100% 0 0;
   grid-template-rows: min-content;
-  min-height: 100vh;
+  min-height: calc(100vh - 64px);
 
   @media screen and (min-width: 1024px) {
-    grid-template-columns: 300px 5fr;
-    grid-template-rows: 100%;
+    grid-template-columns: 300px 1fr;
+    grid-template-rows: 100% 0 0;
   }
 }
 </style>
diff --git a/front/src/composables/alignment.ts b/front/src/composables/alignment.ts
index 8e857a5ca..a925ab665 100644
--- a/front/src/composables/alignment.ts
+++ b/front/src/composables/alignment.ts
@@ -2,7 +2,7 @@ import type { Entries, Entry, KeysOfUnion } from 'type-fest'
 import type { HTMLAttributes } from 'vue'
 
 export type AlignmentProps = {
-  alignText?: 'left' | 'center' | 'right' | 'stretch' | 'space-out',
+  alignText?: 'start' | 'center' | 'end' | 'stretch' | 'space-out',
   alignSelf?: 'start' | 'center' | 'end' | 'auto' | 'baseline' | 'stretch',
   alignItems?: 'start' | 'center' | 'end' | 'auto' | 'baseline' | 'stretch'
 } & {
@@ -14,10 +14,10 @@ const styles = {
   center: 'place-content: center center; place-self: center center;',
   stretch: 'place-content: stretch stretch; place-self: stretch stretch;',
   alignText: (a:AlignmentProps['alignText']) => ({
-    left: 'justify-content: flex-start;',
+    start: 'justify-content: flex-start;',
     center: 'place-content: center;',
     baseline: 'align-items: baseline;',
-    right: 'justify-content: flex-end;',
+    end: 'justify-content: flex-end;',
     stretch: 'place-content: stretch;',
     'space-out': 'place-content: space-between;'
   }[a!]),