Align design of Change Notetype screen with rest of UI (#1522)

* Remove background and border from scrollArea

* Fix 1px of background text showing above template header on scroll

I couldn't figure out the reason for this "clipping" issue. What I tried:
- check HTML structure for any elements that might add extra padding/margin
- remove the 1px border of the header

* Adjust spacing to be more in line with rest of UI

sass/_vars.scss

@@ -5,7 +5,6 @@
     --text-fg: black;
     --window-bg: #ececec;
     --frame-bg: white;
-    --pane-bg: #e5e5e5;
     --border: #aaa;
     --medium-border: #b6b6b6;
     --faint-border: #e7e7e7;
@@ -45,7 +44,6 @@
     --text-fg: white;
     --window-bg: #2f2f31;
     --frame-bg: #3a3a3a;
-    --pane-bg: #3a3a3a;
     --border: #777;
     --medium-border: #444;
     --faint-border: #29292b;

ts/change-notetype/ChangeNotetypePage.svelte

@@ -12,7 +12,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import NotetypeSelector from "./NotetypeSelector.svelte";
     import StickyNav from "./StickyNav.svelte";
     import Mapper from "./Mapper.svelte";
-    import Spacer from "../components/Spacer.svelte";
 
     export let state: ChangeNotetypeState;
     $: info = state.info;
@@ -21,7 +20,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <div bind:offsetHeight={offset}>
     <NotetypeSelector {state} />
-    <Spacer --height="1em" />
 </div>
 
 <div id="scrollArea" style="--offset: {offset}px; --gutter-inline: 0.25rem;">
@@ -49,9 +47,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     #scrollArea {
         padding: 0;
         overflow: hidden auto;
-        background: var(--pane-bg);
         height: calc(100% - var(--offset));
-        border: 1px solid var(--medium-border);
-        border-radius: 0.25rem;
     }
 </style>

ts/change-notetype/NotetypeSelector.svelte

@@ -27,7 +27,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </script>
 
-<StickyContainer --gutter-block="0.1rem">
+<StickyContainer
+    --gutter-block="0.1rem"
+    --gutter-inline="0.25rem"
+    --sticky-borders="0 0 1px"
+>
     <ButtonToolbar class="justify-content-between" size={2.3} wrap={false}>
         <Item>
             <ButtonGroupItem>

ts/change-notetype/StickyNav.svelte

@@ -27,7 +27,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <StickyContainer
-    --sticky-bg={"var(--pane-bg)"}
+    --sticky-top={ctx === MapContext.Template ? "-1px" : "0"}
     --sticky-border="var(--border)"
     --sticky-borders="0px 0 1px"
 >

ts/change-notetype/change-notetype-base.scss

@@ -24,7 +24,7 @@ html {
 }
 
 #main {
-    padding: 0.5em 1em 1em 1em;
+    padding: 0.5em 0.5em 1em 0.5em;
     height: 100vh;
 }
 

ts/components/StickyContainer.svelte

@@ -24,7 +24,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <style lang="scss">
     .sticky-container {
         position: sticky;
-        top: 0;
+        top: var(--sticky-top, 0);
         bottom: 0;
         left: 0;
         right: 0;