From ba4796c76331ba3737191fce8375d408330737d7 Mon Sep 17 00:00:00 2001
From: nahuhh <50635951+nahuhh@users.noreply.github.com>
Date: Thu, 13 Jun 2024 15:50:27 -0500
Subject: [PATCH] ui: fix spacing of coin widgets & filters

---
 basicswap/templates/offers.html | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/basicswap/templates/offers.html b/basicswap/templates/offers.html
index 3aa30b8..945027d 100644
--- a/basicswap/templates/offers.html
+++ b/basicswap/templates/offers.html
@@ -65,7 +65,7 @@
     </div>
   </section>
 
-  <section class="py-4 flex overflow-hidden container-to-blur">
+  <section class="py-4 flex flex-wrap justify-center overflow-hidden container-to-blur">
 
 {% if 'BTC' in enabled_chart_coins %}
 <div class="container px-4 mx-auto">
@@ -888,9 +888,9 @@ const chart = new Chart(ctx, {
               <div class="flex items-center justify-center pb-4 dark:text-white">
                 <div class="rounded-b-md">
                   <div class="w-full md:w-0/12">
-                    <div class="flex flex-wrap justify-center -m-1.5">
+                    <div class="container flex flex-wrap justify-center">
 
-                      <div class="w-full md:w-auto p-1.5 hover-container">
+                      <div class="md:w-auto p-1.5 hover-container">
                         <div class="flex">
                           <button id="coin_to_button" class="bg-gray-50 text-gray-900 appearance-none w-10 dark:bg-gray-500 dark:text-white border-l border-t border-b border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-gray-50 text-sm rounded-l-lg flex items-center" disabled>
                           </button>
@@ -903,8 +903,6 @@ const chart = new Chart(ctx, {
                               {% endfor %}
                             </select>
                           </div>
-                        </div>
-                      </div>
 
                       <div class="flex items-center">
                         <div class="w-full md:w-auto p-1.5">
@@ -912,8 +910,6 @@ const chart = new Chart(ctx, {
                         </div>
                       </div>
 
-                      <div class="w-full md:w-auto p-1.5 hover-container">
-                        <div class="flex">
                           <button id="coin_from_button" class="bg-gray-50 text-gray-900 appearance-none w-10 dark:bg-gray-500 dark:text-white border-l border-t border-b border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-gray-50 text-sm rounded-l-lg flex items-center" disabled>
                           </button>
                           <div class="relative">
@@ -928,7 +924,7 @@ const chart = new Chart(ctx, {
                         </div>
                       </div>
 
-                      <div class="flex items-center">
+                      <div class="w-full md:w-auto mt-3">
                         <div class="w-full md:w-auto p-1.5">
                           <p class="text-sm font-heading bold">Sort By:</p>
                         </div>