Fix navigation design issues.

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

3 files changed, 28 insertions, 13 deletions

diff --git a/src/components/MessagesList/MessageBody/MessageBody.vue b/src/components/MessagesList/MessageBody/MessageBody.vue
index 17d04ea64..b57c7ebcf 100644
--- a/src/components/MessagesList/MessageBody/MessageBody.vue
+++ b/src/components/MessagesList/MessageBody/MessageBody.vue
@@ -88,7 +88,6 @@ export default {
 		display: flex;
 		flex-grow: 1;
 		flex-direction: column;
-		font-size: 20px;
 		&-header {
 			color: var(--color-text-maxcontrast);
 		}
diff --git a/src/components/Navigation/ConversationsList/ConversationsList.vue b/src/components/Navigation/ConversationsList/ConversationsList.vue
index 8f245dedf..769c262ff 100644
--- a/src/components/Navigation/ConversationsList/ConversationsList.vue
+++ b/src/components/Navigation/ConversationsList/ConversationsList.vue
@@ -55,7 +55,6 @@
 </template>
 
 <script>
-import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 import ConversationIcon from '../../ConversationIcon'
 import AppNavigationCounter from 'nextcloud-vue/dist/Components/AppNavigationCounter'
 import AppContentListItem from './AppContentListItem/AppContentListItem'
@@ -113,12 +112,4 @@ export default {
 .conversations {
 	overflow: visible;
 }
-
-.scroller {
-	flex: 1 0;
-}
-
-.ellipsis {
-	text-overflow: ellipsis;
-}
 </style>
diff --git a/src/components/Navigation/Navigation.vue b/src/components/Navigation/Navigation.vue
index 068794caa..297059960 100644
--- a/src/components/Navigation/Navigation.vue
+++ b/src/components/Navigation/Navigation.vue
@@ -20,11 +20,11 @@
 -->
 
 <template>
-	<AppNavigation>
+	<AppNavigation class="vue navigation">
 		<AppNavigationSearch
 			v-model="searchText"
 			@input="debounceFetchSearchResults" />
-		<ul class="app-navigation">
+		<ul class="navigation__tems">
 			<Caption v-if="isSearching" title="Conversations" />
 			<ConversationsList />
 			<Caption v-if="isSearching" title="Contacts" />
@@ -91,9 +91,34 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.app-navigation {
+
+.navigation {
+	width: 300px;
+	position: fixed;
+	top: 50px;
+	left: 0;
+	z-index: 500;
 	overflow-y: auto;
 	overflow-x: hidden;
+	// Do not use vh because of mobile headers
+	// are included in the calculation
+	height: calc(100% - 50px);
+	box-sizing: border-box;
+	background-color: var(--color-main-background);
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	border-right: 1px solid var(--color-border);
+	display: flex;
+	flex-direction: column;
+	flex-grow: 0;
+	flex-shrink: 0;
+	&__items {
+		display: block;
+		overflow-y: auto;
+		overflow-x: hidden;
+	}
 }
 
 .settings {