fix(search): Make search dialog stick to the bottom with sticky

`position: absolute` has unwanted drawbacks. `width: 100%` means the full monitor width there - which breaks the design if the browser is not in full screen mode - or if you have developer tools open. Signed-off-by: Jonas <[email protected]>
nextcloud · Sep 10, 2024 · aa97274 · aa97274
1 parent 51637cc
commit aa97274
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 2 deletions.
diff --git a/src/components/Collective.vue b/src/components/Collective.vue
@@ -226,6 +226,11 @@ export default {
 </script>
 
 <style lang="scss">
+.app-content-details {
+	// Required for search dialog to stick to the bottom
+	height: 100%;
+}
+
 /* Format page title in Page.vue and Version.vue */
 .page-title {
 	position: sticky;

diff --git a/src/components/Page/TextEditor.vue b/src/components/Page/TextEditor.vue
@@ -4,7 +4,7 @@
 -->
 
 <template>
-	<div>
+	<div class="collectives-text-container">
 		<WidgetHeading v-if="isLandingPage"
 			:title="t('collectives', 'Landing page')"
 			class="text-container-heading" />
@@ -178,6 +178,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.collectives-text-container {
+	// Required for search dialog to stick to the bottom
+	height: 100%;
+}
+
 .text-container-heading {
 	padding-left: 14px;
 }

diff --git a/src/components/SearchDialog.vue b/src/components/SearchDialog.vue
@@ -153,7 +153,7 @@ $button-gap: calc(var(--default-grid-baseline) * 3);
 .search-dialog__container {
 	width: 100%;
 	display: flex;
-	position: absolute;
+	position: sticky;
 	align-items: center;
 	bottom: 0;
 	background-color: var(--color-main-background);

diff --git a/src/css/editor.scss b/src/css/editor.scss
@@ -8,11 +8,17 @@
 }
 
 .full-width-view {
+	// Required for search dialog to stick to the bottom
+	height: 100%;
+
 	--text-editor-max-width: false !important;
 	max-width: unset;
 }
 
 .sheet-view {
+	// Required for search dialog to stick to the bottom
+	height: 100%;
+
 	--text-editor-max-width: 670px !important;
 
 	.landing-page-widgets,