Big cleanup for styling

frontend/src/views/main/SideBar.vue

@@ -35,7 +35,7 @@ function toggleLanguage() {
 
 <template>
   <nav class="container">
-    <div class="mt-4 px-4">
+    <div class="m-4">
       <router-link to="/@hutopy">
         <img src="/images/hutopy-logo.png"
              alt="hutopy logo">
@@ -98,7 +98,7 @@ function toggleLanguage() {
         <button @click="authStore.logout"
                 class="action">
           <i class="mdi mdi-logout"></i>
-          {{ t.signOut }}
+          <span class="text-no-wrap">{{ t.signOut }}</span>
         </button>
       </div>
 
@@ -110,19 +110,17 @@ function toggleLanguage() {
 <style scoped>
 
 .container {
-  @apply fixed flex flex-col h-full max-w-64;
-  @apply border-r;
-  @apply bg-hBackground border-[#3d3d3d] text-hOnBackground;
+  @apply flex flex-col h-screen w-64 max-w-64 overflow-y-auto;
 }
 
 .profile {
   @apply ml-4 text-lg font-sans capitalize;
-  @apply font-sans font-semibold;
+  @apply font-semibold;
 }
 
 .action {
+  @apply capitalize;
   @apply w-full flex items-center gap-4 px-4 py-2 rounded;
-  @apply capitalize text-base font-sans font-medium;
   @apply bg-hBackground hover:bg-hSurface; /* FIXME: The hover value is not semantically correct */
 }