Minor layout fixes

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>

src/components/Navigation/AppNavigationSearch/AppNavigationSearch.vue

@@ -21,10 +21,11 @@
 
 <template>
 	<form
+		class="app-navigation-search"
 		@submit.prevent="handleSubmit">
 		<input
 			v-model="localValue"
-			class="app-navigation-search"
+			class="app-navigation-search__input"
 			type="text"
 			:autofocus="autoFocused"
 			:placeHolder="placeholderText">
@@ -89,7 +90,13 @@ export default {
 @import '../../../assets/variables.scss';
 
 .app-navigation-search {
-	width: $navigation-width - 20px;
-	margin: 10px;
+	position: sticky;
+	top: 0px;
+	background-color: white;
+	border-bottom: 1px solid lightgray;
+	&__input {
+		width: $navigation-width - 20px;
+		margin: 10px;
+	}
 }
 </style>

src/components/Navigation/ContactsList/ContactsList.vue

@@ -20,7 +20,7 @@
 -->
 
 <template>
-	<ul>
+	<ul class="contacts-list">
 		<AppContentListItem
 			v-for="item of contacts"
 			:key="item.id"
@@ -36,7 +36,6 @@
 </template>
 
 <script>
-import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 import Avatar from 'nextcloud-vue/dist/Components/Avatar'
 import AppContentListItem from 'nextcloud-vue/dist/Components/AppContentListItem'
 import { createOneToOneConversation } from '../../../services/conversationsService'
@@ -74,11 +73,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.scroller {
-	flex: 1 0;
-}
-
 .ellipsis {
 	text-overflow: ellipsis;
 }
+.contacts-list {
+	overflow: visible;
+	display: block;
+}
+
 </style>

src/components/Navigation/Navigation.vue

@@ -21,16 +21,16 @@
 
 <template>
 	<AppNavigation>
+		<AppNavigationSearch
+			v-model="searchText"
+			@input="debounceFetchSearchResults" />
 		<ul class="app-navigation">
-			<AppNavigationSearch
-				v-model="searchText"
-				@input="debounceFetchSearchResults" />
 			<Caption v-if="isSearching" title="Conversations" />
 			<ConversationsList />
 			<Caption v-if="isSearching" title="Contacts" />
 			<ContactsList v-if="isSearching" :contacts="searchResults" />
 		</ul>
-		<AppNavigationSettings>
+		<AppNavigationSettings class="settings">
 			Example settings
 		</AppNavigationSettings>
 	</AppNavigation>
@@ -91,5 +91,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.app-navigation {
+	overflow-y: auto;
+	overflow-x: hidden;
+}
 
+.settings {
+	position: sticky;
+	bottom: 0px;
+}
 </style>