Improve dialog styling

diff --git a/index.html b/index.html
index 43e257308bee6289631b42ba6b5431dc2f65b2f6..bb60b604b728f009f625206772ea87e4256f55bd 100644 (file)
--- 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 8a755f0e46f396f82f8b0e229bd263917c6d54e8..791001a889bbf4716b05ea1a0cce1f04a09f36e3 100644 (file)
--- 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;