Improve global layout structure and fix various styling issues #16

src/views/Notifications.vue

@@ -1,14 +1,16 @@
 <template>
-  <main class="wrapper">
-    <h2 id="tabslist" class="sr-only">Status</h2>
-    <Tabs :tabs="tabs" @update:currentTab="changeTab" />
-    <button
-      class="btn | absolute top-0 right-gutter"
-      :disabled="!sortedNotifications.length"
-      @click="readAll()"
-    >
-      Marquer tout come lu
-    </button>
+  <main class="flex flex-col">
+    <header class="flex">
+      <h2 id="tabslist" class="sr-only">Status</h2>
+      <Tabs :tabs="tabs" @update:currentTab="changeTab" />
+      <button
+        class="btn"
+        :disabled="!sortedNotifications.length"
+        @click="readAll()"
+      >
+        Marquer tout come lu
+      </button>
+    </header>
     <div
       v-if="sortedNotifications.length === 0"
       class="flex flex-col justify-center | text-grey-700 | absolute inset-0 -z-1"
@@ -173,9 +175,9 @@ function readAll() {
 </script>
 
 <style scoped>
-/* Tabs */
-[role="tablist"] {
-  margin-left: 0;
+/* Header */
+main > header {
+  flex-wrap: nowrap;
 }
 
 /* Notifications */