Make StickyBottom actually stick and make editor fullsize + flexbox

qt/aqt/editor.py

@@ -80,10 +80,10 @@ audio = (
 
 _html = """
 <div id="fields"></div>
-<div id="dupes" class="is-inactive">
+<div id="dupes" class="d-none">
     <a href="#" onclick="pycmd('dupes');return false;">%s</a>
 </div>
-<div id="cloze-hint"></div>
+<div id="cloze-hint" class="d-none"></div>
 <div id="tag-editor-anchor" class="d-none"></div>
 """
 

ts/components/StickyBottom.svelte

@@ -7,7 +7,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     let className: string = "";
     export { className as class };
 
-    export let height: number;
+    export let height: number = 0;
 </script>
 
 <footer {id} bind:offsetHeight={height} class={`container-fluid pt-1 ${className}`}>
@@ -16,7 +16,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <style lang="scss">
     footer {
-        position: fixed;
+        position: sticky;
         bottom: 0;
         left: 0;
         right: 0;

ts/editor/TagEditor.svelte

@@ -390,9 +390,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     $: shortenTags = shortenTags || assumedRows > 2;
 </script>
 
-<Spacer --height="{height}px" />
-
-<StickyBottom class="d-flex" bind:height>
+<StickyBottom bind:height class="d-flex">
     {#if !wrap}
         <TagOptionsBadge
             --buttons-size="{size}rem"

ts/editor/fields.scss

@@ -5,14 +5,25 @@
 @use 'scrollbar';
 @use 'button-mixins';
 
+html,
+body {
+    height: 100%;
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+}
+
 .nightMode {
     @include scrollbar.night-mode;
 }
 
 #fields {
     display: flex;
-    overflow-x: hidden;
     flex-direction: column;
+    flex-grow: 1;
+    overflow-x: hidden;
     margin: 3px 0;
 }
 
@@ -66,10 +77,6 @@
     text-align: center;
     background-color: var(--window-bg);
 
-    &.is-inactive {
-        display: none;
-    }
-
     a {
         color: var(--link);
     }

ts/editor/index.ts

@@ -152,11 +152,14 @@ export function setBackgrounds(cols: ("dupe" | "")[]): void {
     );
     document
         .getElementById("dupes")!
-        .classList.toggle("is-inactive", !cols.includes("dupe"));
+        .classList.toggle("d-none", !cols.includes("dupe"));
 }
 
-export function setClozeHint(cloze_hint: string): void {
-    document.getElementById("cloze-hint")!.innerHTML = cloze_hint;
+export function setClozeHint(hint: string): void {
+    const clozeHint = document.getElementById("cloze-hint")!;
+
+    clozeHint.innerHTML = hint;
+    clozeHint.classList.toggle("d-none", hint.length === 0);
 }
 
 export function setFonts(fonts: [string, number, boolean][]): void {