fix(css): New scroll container to fix page design

* Page title always sticky at the top
* Landing page widgets (optional) and page content in scroll container
* Search bar (if visible) always sticky at bottom

Also give the editor some minimum scroll height so that it's possible to
scroll down when the landing page widgets cover full page height (e.g.
on small mobile screens) and the page has no/short content.

Fixes: #1578

Signed-off-by: Jonas <[email protected]>

src/components/Page.vue

@@ -103,8 +103,10 @@
 					:is-template="isTemplatePage" />
 			</div>
 		</h2>
-		<LandingPageWidgets v-if="isLandingPage" />
-		<TextEditor :key="`text-editor-${currentPage.id}`" ref="texteditor" />
+		<div class="page-scroll-container">
+			<LandingPageWidgets v-if="isLandingPage" />
+			<TextEditor :key="`text-editor-${currentPage.id}`" ref="texteditor" />
+		</div>
 		<SearchDialog :show="shouldShowSearchDialog" />
 	</div>
 </template>
@@ -338,6 +340,11 @@ export default {
 	padding-top: 11px;
 }
 
+.page-scroll-container {
+	overflow-y: auto;
+	flex-grow: 1;
+}
+
 .titlebar-buttons {
 	display: flex;
 	gap: 4px;

src/components/Page/TextEditor.vue

@@ -198,9 +198,9 @@ export default {
 
 <style lang="scss" scoped>
 .collectives-text-container {
-	// Required for search dialog to stick to the bottom
-	flex-grow: 1;
-	overflow: auto;
+	// Give editor some minimum scroll height on empty/short content
+	// Important on landing page when landing page widgets cover full height
+	min-height: 50vh;
 }
 
 .text-container-heading {

src/components/SearchDialog.vue

@@ -170,6 +170,7 @@ $button-gap: calc(var(--default-grid-baseline) * 3);
 
 .search-dialog__buttons {
 	display: flex;
+	overflow: hidden;
 	align-items: center;
 	column-gap: $button-gap;
 }