Fix some layout issues in the CSV import screen

- Align headers with the settings below them
- More equally space rows
- Ensure Import button is anchored to the bottom (
caused by 9b0729970e)

ts/import-csv/ImportCsvPage.svelte

@@ -76,7 +76,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </script>
 
-<Container --gutter-inline="0.75rem" --gutter-block="0.25rem">
+<Container class="csv-page">
     <Row --cols={2}>
         <Col --col-size={1} breakpoint="md">
             <Container>
@@ -107,3 +107,17 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     </Row>
     <StickyFooter {path} {onImport} />
 </Container>
+
+<style lang="scss">
+    :global(.csv-page) {
+        --gutter-inline: 0.25rem;
+
+        :global(.row) {
+            // rows have negative margins by default
+            --bs-gutter-x: 0;
+            // ensure equal spacing between tall rows like
+            // dropdowns, and short rows like checkboxes
+            min-height: 3em;
+        }
+    }
+</style>

ts/import-csv/import-csv-base.scss

@@ -17,15 +17,16 @@
 body {
     width: min(100vw, 70em);
     margin: 0 auto;
+    height: 100%;
 }
 
 html {
     overflow-x: hidden;
+    height: 100%;
 }
 
 #main {
     padding: 0.5em 0.5em 1em 0.5em;
-    height: 100vh;
 }
 
 // override the default down arrow colour in <select> elements