From 54a91b51d68a415f3e9fbdcb8b128b2f479ed517 Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Tue, 25 Jul 2023 22:56:39 +0200
Subject: [PATCH] style: settings popover spacing

---
 src/components/SettingsPopover.astro | 38 +++++++++++++++++-----------
 1 file changed, 23 insertions(+), 15 deletions(-)

diff --git a/src/components/SettingsPopover.astro b/src/components/SettingsPopover.astro
index 73c3b40..0558a50 100644
--- a/src/components/SettingsPopover.astro
+++ b/src/components/SettingsPopover.astro
@@ -8,10 +8,12 @@ const { toggle } = Astro.props;
 ---
 
 <form id="settings-form" hidden>
-  <h2>Settings</h2>
-  <label for={toggle}>
-    <Icon name="mdi:close" />
-  </label>
+  <div id="toolbar">
+    <h2>Settings</h2>
+    <label for={toggle}>
+      <Icon name="mdi:close" />
+    </label>
+  </div>
   <div class="field">
     <input type="checkbox" id="settings-1" name="settings-1" checked />
     <label for="settings-1">Option 1</label>
@@ -23,24 +25,30 @@ const { toggle } = Astro.props;
     border: 1px solid #ccc;
     border-radius: 5px;
     background-color: white;
-    padding: 1em;
+    padding: 0.5em;
     width: 300px;
     position: absolute;
     top: 0.5em;
     right: 0.1em;
     box-shadow: 0 1px 3px 1px #eee;
 
-    h2 {
-      margin: 0.5em 0;
-    }
+    #toolbar {
+      display: flex;
+      margin-bottom: 0.5em;
 
-    svg {
-      width: 24px;
-      height: 24px;
-      position: absolute;
-      top: 0.5em;
-      right: 0.5em;
-      cursor: pointer;
+      h2,
+      svg {
+        flex: 1;
+      }
+
+      svg {
+        width: 24px;
+        height: 24px;
+        cursor: pointer;
+      }
+    }
+    .field {
+      margin-left: 0.5em;
     }
   }
 </style>