Fixed alert dialog button in notifications, fixed add tile padding on profile page.

assets/components/header/header.vue

@@ -100,6 +100,7 @@
 						:notifications="notifications"
 						:unseen-count="unseenNotificationsCount"
 						@check="fetchNotifications"
+						@add-alert="showAddAlert = true"
 					/>
 				</template>
 			</Tooltip>
@@ -144,12 +145,19 @@
 
 			<Search class="search-full" />
 		</div>
+
+		<AddAlert
+			v-if="showAddAlert"
+			@close="showAddAlert = false"
+		>Alert</AddAlert>
 	</header>
 </template>
 
 <script>
 import Menu from './menu.vue';
 import Notifications from './notifications.vue';
+import AddAlert from '../alerts/add.vue';
+
 import Search from './search.vue';
 
 import logo from '../../img/logo.svg';
@@ -167,6 +175,7 @@ async function fetchNotifications() {
 
 export default {
 	components: {
+		AddAlert,
 		Menu,
 		Notifications,
 		Search,
@@ -177,6 +186,7 @@ export default {
 			logo,
 			searching: false,
 			showFilters: false,
+			showAddAlert: false,
 			notifications: [],
 			unseenNotificationsCount: 0,
 		};

assets/components/header/notifications.vue

@@ -14,16 +14,11 @@
 				<Icon
 					v-tooltip="'Add alert'"
 					icon="plus3"
-					@click="showAddAlert = true"
+					@click="$emit('addAlert')"
 				/>
 			</div>
 		</div>
 
-		<AddAlert
-			v-if="showAddAlert"
-			@close="showAddAlert = false"
-		>Alert</AddAlert>
-
 		<div class="notifications-body">
 			<div
 				v-if="notifications.length === 0"
@@ -123,8 +118,6 @@
 </template>
 
 <script>
-import AddAlert from '../alerts/add.vue';
-
 async function checkNotifications() {
 	await this.$store.dispatch('checkNotifications');
 
@@ -142,9 +135,6 @@ async function checkNotification(notificationId, blur) {
 }
 
 export default {
-	components: {
-		AddAlert,
-	},
 	props: {
 		notifications: {
 			type: Array,
@@ -160,6 +150,7 @@ export default {
 			showAddAlert: false,
 		};
 	},
+	emits: ['addAlert'],
 	methods: {
 		checkNotifications,
 		checkNotification,