From a18c6ab8d860a496905f58278315222992bacd07 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Wed, 14 Sep 2022 19:06:34 +0200
Subject: [PATCH] feat: move the update available dialoge always to the bottom

---
 src/components/home/update.vue | 17 ++++++-----------
 src/styles/theme/helpers.scss  |  4 ++++
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/components/home/update.vue b/src/components/home/update.vue
index fb08e788c..491418d25 100644
--- a/src/components/home/update.vue
+++ b/src/components/home/update.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="update-notification" v-if="updateAvailable">
 		<p>{{ $t('update.available') }}</p>
-		<x-button @click="refreshApp()" :shadow="false">
+		<x-button @click="refreshApp()" :shadow="false" class="has-no-text-wrap">
 			{{ $t('update.do') }}
 		</x-button>
 	</div>
@@ -43,24 +43,19 @@ function refreshApp() {
 
 <style lang="scss" scoped>
 .update-notification {
-	margin: .5rem;
 	display: flex;
 	align-items: center;
 	background: $warning;
-	padding: 0 .25rem;
+	padding: .5rem;
 	border-radius: $radius;
 	font-size: .9rem;
 	color: var(--grey-900);
 	justify-content: space-between;
 
-	@media screen and (max-width: $desktop) {
-		position: fixed;
-		bottom: 1rem;
-		margin: 0;
-		width: 450px;
-		left: calc(50vw - 225px);
-		padding: .5rem;
-	}
+	position: fixed;
+	bottom: 1rem;
+	width: 450px;
+	left: calc(50vw - 225px);
 
 	@media screen and (max-width: $tablet) {
 		position: fixed;
diff --git a/src/styles/theme/helpers.scss b/src/styles/theme/helpers.scss
index 5e96dfba1..31d11b36d 100644
--- a/src/styles/theme/helpers.scss
+++ b/src/styles/theme/helpers.scss
@@ -3,3 +3,7 @@
     display: none !important;
   }
 }
+
+.has-no-text-wrap {
+  white-space: nowrap !important;
+}