fix: some styling fixes in the Sort modal

josdejong · Apr 5, 2022 · 4366a0f · 4366a0f
1 parent eac069a
commit 4366a0f
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/src/lib/components/modals/SortModal.scss b/src/lib/components/modals/SortModal.scss
@@ -3,13 +3,12 @@
 
 .jsoneditor-modal.sort {
   .contents {
-    overflow: hidden;
   }
 
   table {
     width: 100%;
     border-collapse: collapse;
-    border-spacing: none;
+    border-spacing: 0;
 
     th,
     td {
@@ -33,6 +32,14 @@
           border: 1px solid $background-gray;
         }
       }
+
+      :global(.selectContainer input) {
+        box-sizing: border-box;
+      }
     }
   }
+
+  .space {
+    height: 200px; // Trick for the property select box dropdown to be fully visible
+  }
 }
diff --git a/src/lib/components/modals/SortModal.svelte b/src/lib/components/modals/SortModal.svelte
@@ -122,16 +122,17 @@
           <tr>
             <th>Property</th>
             <td>
-              <Select items={properties} bind:value={selectedProperty} />
+              <Select showIndicator items={properties} bind:value={selectedProperty} />
             </td>
           </tr>
         {/if}
         <tr>
           <th>Direction</th>
           <td>
             <Select
-              items={directions}
               containerClasses="test-class"
+              showIndicator
+              items={directions}
               bind:value={selectedDirection}
               isClearable={false}
             />
@@ -140,6 +141,8 @@
       </tbody>
     </table>
 
+    <div class="space" />
+
     <div class="actions">
       <button
         type="button"