From b5539cbbe1c35889ab9bf8eb0acaa6280958e823 Mon Sep 17 00:00:00 2001
From: Ardis Lu <ardisglu@gmail.com>
Date: Wed, 14 Dec 2022 21:13:40 -0800
Subject: [PATCH] Improve dialog styling

---
 index.html |  6 ++++--
 style.css  | 10 ++++++----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index 43e2573..bb60b60 100644
--- a/index.html
+++ b/index.html
@@ -110,8 +110,10 @@
   </footer>
 
   <dialog>
-    <p>A newer version of this page is available.</p>
-    <button id="refresh">Refresh</button>
+    <div>
+      <p>A newer version of this page is available.</p>
+      <button id="refresh">Refresh</button>
+    </div>
   </dialog>
 
   <script type="module" src="/script.js"></script>
diff --git a/style.css b/style.css
index 8a755f0..791001a 100644
--- a/style.css
+++ b/style.css
@@ -273,16 +273,18 @@ dialog {
     0.1px 16px 18px -2.5px hsl(50deg 72% 69% / 0.17);
 }
 
-dialog * {
-  display: inline;
+dialog div {
+  display: flex;
+  gap: 4px;
+  align-items: center;
 }
 
-dialog > button {
+dialog div > button {
   cursor: pointer;
   text-transform: uppercase;
   font-weight: bold;
   background: hsl(216deg 100% 80%);
-  padding: 0.25rem;
+  padding: 0.75rem;
   border: 1px hsl(216deg 100% 70%) solid;
   border-radius: 0.5rem;
   transition: 0.15s;
-- 
2.47.3