From 33c921a32fa1fc232c49d42bfa5b20d462c5024d Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Thu, 3 Mar 2022 14:23:57 -0800
Subject: [PATCH] Fix update notice styling.

---
 components/common/UpdateNotice.js         |  2 +-
 components/common/UpdateNotice.module.css | 11 ++++++++---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/components/common/UpdateNotice.js b/components/common/UpdateNotice.js
index bc6eacc4..a31c2abf 100644
--- a/components/common/UpdateNotice.js
+++ b/components/common/UpdateNotice.js
@@ -34,7 +34,7 @@ export default function UpdateNotice() {
           values={{ version: `v${latest}` }}
         />
       </div>
-      <ButtonLayout>
+      <ButtonLayout className={styles.buttons}>
         <Button size="xsmall" variant="action" onClick={handleViewClick}>
           <FormattedMessage id="label.view-details" defaultMessage="View details" />
         </Button>
diff --git a/components/common/UpdateNotice.module.css b/components/common/UpdateNotice.module.css
index 52a97c3b..52bac611 100644
--- a/components/common/UpdateNotice.module.css
+++ b/components/common/UpdateNotice.module.css
@@ -2,12 +2,17 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  padding-top: 10px;
-  font-size: var(--font-size-small);
-  font-weight: 600;
+  padding-top: 20px;
 }
 
 .message {
+  font-size: var(--font-size-small);
+  font-weight: 600;
+  flex: 1;
   text-align: center;
   margin-right: 20px;
 }
+
+.buttons {
+  flex: 0;
+}