From 2a07aca10aa550692cab7a722ade54a552da558d Mon Sep 17 00:00:00 2001
From: chris <chris@chrisedwards.tech>
Date: Mon, 14 Jul 2025 13:14:24 -0400
Subject: [PATCH] fixed mobile button layout

---
 index.html | 17 +++++++++--------
 style.css  | 15 ++++++++++++++-
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index d65557f..e308f48 100644
--- a/index.html
+++ b/index.html
@@ -14,17 +14,18 @@
         <p>Select and float your favorite shades</p>
       </header>
 <div id="selected-palette">
+  <div class="palette-header-row">
     <h2>Your Palette</h2>
     <div id="palette-controls">
-        <label class="switch">
-            <input type="checkbox" id="toggle-animation" checked>
-            <span class="slider"></span>
-        </label>
-        <button id="shuffle-palette" title="Shuffle Palette">🔀</button>
-        <button id="share-palette" title="Share Palette">🔗</button>
+      <label class="switch">
+        <input type="checkbox" id="toggle-animation" checked>
+        <span class="slider"></span>
+      </label>
+      <button id="shuffle-palette" title="Shuffle Palette">🔀</button>
+      <button id="share-palette" title="Share Palette">🔗</button>
     </div>
-    <div id="palette-colors"></div>
-    <button id="clear-palette">Clear Palette</button>
+  </div> <div id="palette-colors"></div>
+  <button id="clear-palette">Clear Palette</button>
 </div>
 
 <div class="modal-backdrop">
diff --git a/style.css b/style.css
index 60a998b..3218bde 100644
--- a/style.css
+++ b/style.css
@@ -156,7 +156,20 @@ footer {
 
 }
 
+.palette-header-row {
+  display: flex;
+  justify-content: space-between; /* Pushes title and buttons apart */
+  align-items: center;          /* Vertically centers them */
+  width: 100%;                  /* Makes the row fill the container */
+  padding: 0 10px;              /* Adds some horizontal spacing */
+  margin: auto
+}
 
+/* Remove the default margins from your title */
+#selected-palette h2 {
+  margin: 0;
+  font-size: 1.2rem;
+}
 
 
 .metallic-element[data-color="#FFD700"] {
@@ -414,7 +427,7 @@ footer {
 }
 
 #palette-controls {
-  position: absolute;
+  position: static;
   top: 10px;
   right: 10px;
   display: flex;