From 92e13ae0d36b122e211aea9de0905c63d7cc19d5 Mon Sep 17 00:00:00 2001
From: Damien Elmes <gpg@ankiweb.net>
Date: Thu, 2 Jun 2022 18:47:41 +1000
Subject: [PATCH] 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 9b0729970ef25d7e99da24a08fc5cbc7d8c6556c)
---
 ts/import-csv/ImportCsvPage.svelte | 16 +++++++++++++++-
 ts/import-csv/import-csv-base.scss |  3 ++-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/ts/import-csv/ImportCsvPage.svelte b/ts/import-csv/ImportCsvPage.svelte
index e47976223..ffbbc4195 100644
--- a/ts/import-csv/ImportCsvPage.svelte
+++ b/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>
diff --git a/ts/import-csv/import-csv-base.scss b/ts/import-csv/import-csv-base.scss
index 4172fdd13..8772590ee 100644
--- a/ts/import-csv/import-csv-base.scss
+++ b/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