diff --git a/app/Libraries/Breadcrumb.php b/app/Libraries/Breadcrumb.php
index 1aa69dc8..a07cbe6d 100644
--- a/app/Libraries/Breadcrumb.php
+++ b/app/Libraries/Breadcrumb.php
@@ -89,9 +89,7 @@ class Breadcrumb
return '';
}
diff --git a/app/Resources/js/modules/markdown-preview.ts b/app/Resources/js/modules/markdown-preview.ts
index f93b5dc5..fef612fb 100644
--- a/app/Resources/js/modules/markdown-preview.ts
+++ b/app/Resources/js/modules/markdown-preview.ts
@@ -1,6 +1,6 @@
import MarkdownToolbarElement from "@github/markdown-toolbar-element";
import { html, LitElement, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { customElement, property, state } from "lit/decorators.js";
import { unsafeHTML } from "lit/directives/unsafe-html.js";
import marked from "marked";
@@ -9,13 +9,13 @@ export class MarkdownPreview extends LitElement {
@property()
for!: string;
- @property()
+ @state()
_textarea!: HTMLTextAreaElement;
- @property()
+ @state()
_markdownToolbar!: MarkdownToolbarElement;
- @property()
+ @state()
_show = false;
connectedCallback(): void {
diff --git a/app/Resources/styles/index.css b/app/Resources/styles/index.css
index 37bc69b1..ec4dd949 100644
--- a/app/Resources/styles/index.css
+++ b/app/Resources/styles/index.css
@@ -11,3 +11,4 @@
@import "./tabs.css";
@import "./radioToggler.css";
@import "./formInputTabs.css";
+@import "./stickyHeader.css";
diff --git a/app/Resources/styles/stickyHeader.css b/app/Resources/styles/stickyHeader.css
new file mode 100644
index 00000000..d58f604c
--- /dev/null
+++ b/app/Resources/styles/stickyHeader.css
@@ -0,0 +1,24 @@
+:root {
+ --sticky-header-outer-height: 180px;
+ --sticky-header-inner-height: 84px;
+ --sticky-header-height-difference: calc(
+ var(--sticky-header-outer-height) - var(--sticky-header-inner-height)
+ );
+}
+
+/* Sticky header */
+.sticky-header-outer {
+ /* Make it stick */
+ height: var(--sticky-header-outer-height);
+ position: sticky;
+ top: calc(
+ var(--sticky-header-height-difference) * -1
+ ); /* Multiply by -1 to get a negative value */
+}
+
+.sticky-header-inner {
+ /* Make it stick */
+ height: var(--sticky-header-inner-height);
+ position: sticky;
+ top: 0;
+}
diff --git a/app/Views/Components/Forms/MarkdownEditor.php b/app/Views/Components/Forms/MarkdownEditor.php
index 1c064ae5..a42bc041 100644
--- a/app/Views/Components/Forms/MarkdownEditor.php
+++ b/app/Views/Components/Forms/MarkdownEditor.php
@@ -64,7 +64,7 @@ class MarkdownEditor extends FormComponent
{$textarea}
-
-