minor style fixes

TeemuKoivisto · Mar 30, 2024 · 3c85361 · 3c85361
1 parent 3a37f9c
commit 3c85361
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 19 deletions.
diff --git a/packages/client/src/components/Chords.svelte b/packages/client/src/components/Chords.svelte
@@ -166,8 +166,8 @@
         <label class="font-bold" for="chords-scale">Scale</label>
         <SearchDropdown
           id="chords-scale"
-          class="bg-gray-100 w-48"
-          containerClass="input w-48"
+          class="bg-gray-100 pl-1"
+          containerClass="input"
           selected={selectedScale}
           options={scaleOptions}
           onSelect={handleSelectScale}
@@ -269,6 +269,7 @@
     }
   }
   .options {
+    --search-dropdown-width: 13rem;
     display: grid;
     grid-template-columns: 1fr 3fr;
     & > :global(.input) {

diff --git a/packages/client/src/components/play/PlayForm.svelte b/packages/client/src/components/play/PlayForm.svelte
@@ -140,7 +140,7 @@
       {#each options as { key, value }}
         <li class="flex">
           <button
-            class="px-2 py-1 mr-1 flex items-center w-full h-full rounded hover:bg-[#eee]"
+            class="px-2 py-1 mr-1 flex items-center w-full h-full rounded text-left hover:bg-[#eee]"
             class:selected={key === selectedGame}
             on:click={() => handleSelectGame(key)}
           >
@@ -161,7 +161,7 @@
           {#each chordsOptions as { key, value }}
             <li>
               <button
-                class="px-2 py-1 mr-1 flex items-center w-full h-full rounded hover:bg-[#eee]"
+                class="px-2 py-1 mr-1 flex items-center w-full h-full rounded text-left hover:bg-[#eee]"
                 class:selected={key === chordsSelection}
                 on:click={() => handleSelectChords(key)}>{value}</button
               >

diff --git a/packages/client/src/components/play/ScoreOptions.svelte b/packages/client/src/components/play/ScoreOptions.svelte
@@ -170,18 +170,18 @@
     grid-template-columns: 1fr;
     grid-template-rows: auto;
     .scale-dropdown {
-      --search-dropdown-width: 13rem;
+      --search-dropdown-width: 100%;
     }
     @media (width <= 475px) {
       grid-template-columns: 1fr 1fr;
       .range {
         grid-column-end: span 2;
       }
       .scale-dropdown {
-        --search-dropdown-width: 9rem;
+        --search-dropdown-width: 100%;
       }
       #key {
-        @apply w-36;
+        width: 100%;
       }
     }
 

diff --git a/packages/client/src/modals/Introduction.svelte b/packages/client/src/modals/Introduction.svelte
@@ -8,18 +8,16 @@
   export let hideModal: () => void = () => undefined
 </script>
 
-<div class="flex flex-col">
-  <h2 class="pl-1.5 mt-4 mb-2 text-5xl font-semibold text-black relative">
-    Introduction
-    <div class="absolute top-0 right-0">
-      <button
-        class="flex items-center text-sm rounded-full px-2 py-2 hover:bg-gray-200"
-        on:click={hideModal}
-      >
-        <Icon icon={x} width={24} />
-      </button>
-    </div>
-  </h2>
+<div class="flex flex-col relative">
+  <div class="absolute op-0 right-0">
+    <button
+      class="flex items-center text-sm rounded-full px-2 py-2 hover:bg-gray-200"
+      on:click={hideModal}
+    >
+      <Icon icon={x} width={24} />
+    </button>
+  </div>
+  <h2 class="pl-1.5 mt-4 mb-2 text-5xl font-semibold text-black">Introduction</h2>
   <article class="w-full p-2 pb-4">
     <p>Greetings! 👋</p>
     <p>