From c227c7dc394eae92fd172810f89bf9c8fa91e37d Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Wed, 15 Sep 2021 15:21:37 +0200
Subject: [PATCH] Make StickyBottom actually stick and make editor fullsize +
 flexbox

---
 qt/aqt/editor.py                  |  4 ++--
 ts/components/StickyBottom.svelte |  4 ++--
 ts/editor/TagEditor.svelte        |  4 +---
 ts/editor/fields.scss             | 17 ++++++++++++-----
 ts/editor/index.ts                |  9 ++++++---
 5 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/qt/aqt/editor.py b/qt/aqt/editor.py
index 6a285ebd4..90c666b40 100644
--- a/qt/aqt/editor.py
+++ b/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>
 """
 
diff --git a/ts/components/StickyBottom.svelte b/ts/components/StickyBottom.svelte
index e62654bb0..e67c403d1 100644
--- a/ts/components/StickyBottom.svelte
+++ b/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;
diff --git a/ts/editor/TagEditor.svelte b/ts/editor/TagEditor.svelte
index 38e478adc..31307ddb7 100644
--- a/ts/editor/TagEditor.svelte
+++ b/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"
diff --git a/ts/editor/fields.scss b/ts/editor/fields.scss
index 85baf38e2..807df851d 100644
--- a/ts/editor/fields.scss
+++ b/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);
     }
diff --git a/ts/editor/index.ts b/ts/editor/index.ts
index ee6177cfa..a8310406c 100644
--- a/ts/editor/index.ts
+++ b/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 {