From d1465ef91399a501f10b6d62002ebb6204a1228b Mon Sep 17 00:00:00 2001
From: Raphael Forment <raphael.forment@gmail.com>
Date: Sat, 21 Oct 2023 15:14:19 +0200
Subject: [PATCH] better styling for settings window

---
 index.html | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index b5d4bab..86498b8 100644
--- a/index.html
+++ b/index.html
@@ -199,18 +199,20 @@
       </div>
 
       <!-- This modal is used for settings -->
-      <div id="modal-settings" class="invisible bg-neutral-900 bg-opacity-50 flex
-              absolute lg:justify-center lg:items-center overflow-y-scroll owerflow-x-scroll
-              md:top-0 md:bottom-0 md:w-auto md:h-auto h-screen w-screen"
+      <div id="modal-settings" class="invisible flex
+              absolute lg:justify-center lg:items-center 
+              lg:overflow-y-auto lg:overflow-x-auto
+              overflow-y-scroll owerflow-x-scroll
+              md:top-0 md:bottom-0 h-screen w-full"
       >
-        <div class="grid grid-col-3">
+        <div class="grid w-full grid-col-3">
           <div class="bg-white rounded-lg lg:mx-48 mx-0 lg:space-y-8 space-y-4 lg:px-8">
-          <h1 class="lg:mt-12 mt-0 font-semibold rounded-lg
+          <h1 class="lg:mt-12 mt-6 font-semibold rounded-lg
                      bg-gray-800 justify-center lg:text-center lg:pl-0 pl-8 text-white mx-4
                      text-sm lg:text-xl border-b border-gray-300 py-4">Topos Application Settings</h1>
             <div class="flex lg:flex-row flex-col mr-4 ml-4">
             <!-- Font Size Selection -->
-              <div class="bg-gray-200 rounded-lg ml-0 lg:w-1/3 w-3/4 pt-2 pb-1 mb-2">
+              <div class="bg-gray-200 rounded-lg ml-0 lg:w-1/3 w-full pt-2 pb-1 mb-2">
                 <p class="font-bold lg:text-xl text-sm ml-4 lg:pb-4 pb-2 underline underline-offset-4">Font Settings</p>
                 <div class="mb-6 mx-4 font-semibold">
                   <label for="default-input" class="block mb-2 ml-1 font-normal sd:text-sm">Size:</label>
@@ -228,7 +230,7 @@
                   </select>
               </div>
               <!-- Editor mode selection -->
-            <div class="bg-gray-200 rounded-lg lg:ml-4 lg:w-1/3 w-3/4 pt-2 pb-1 mb-2">
+            <div class="bg-gray-200 rounded-lg lg:ml-4 lg:w-1/3 w-full pt-2 pb-1 mb-2">
               <p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4">Editor options</p>
               <!-- Checkboxes  -->
   					  <div class="pr-4">
@@ -255,7 +257,7 @@
 						  </div>
             </div>
 
-            <div class="bg-gray-200 rounded-lg lg:ml-4 lg:w-1/3 w-3/4 pt-2 pb-1 mb-2">
+            <div class="bg-gray-200 rounded-lg lg:ml-4 lg:w-1/3 w-full pt-2 pb-1 mb-2">
               <p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4">File Management</p>
               <div class="flex flex-col space-y-2 pb-2">
                 <button id="download-universes" class="bg-gray-800 hover:bg-gray-900 text-white font-bold lg:py-4 lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4">
@@ -354,7 +356,7 @@
 
           </div>
 
-          <div class="flex space-x-6 border-t border-gray-200 rounded-b dark:border-gray-600 mx-4 border-spacing-y-4 pb-14 lg:pb-0">
+          <div class="flex space-x-6 border-t border-gray-200 rounded-b dark:border-gray-600 mx-4 border-spacing-y-4 pb-24 lg:pb-0">
             <button id="close-settings-button" data-modal-hide="defaultModal" type="button" class="
             hover:bg-gray-700 bg-gray-800 mt-4 mb-4 text-white focus:ring-4
             font-medium rounded-lg text-sm px-5 py-2.5 text-center">OK</button>