Center the empty content in the tab instead of just adding a margin

Since nextcloud-vue 2.0.0 the server styling is not used for the
sidebar. Therefore the reduced top margin (10vh) for empty contents in
"#app-sidebar" is no longer applied. As the default top margin is used,
which is designed for the main view and thus is quite large (30vh), the
empty content in the chat tab appears very low. Moreover, no sidebar is
shown if the window height is small, so the button to join the
conversation may not be reachable. Instead now the empty content is
centered in the tab contents using a flex display, which also causes a
sidebar to be shown if there is not enough available space to show the
contents.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>

1 files changed, 13 insertions, 0 deletions

diff --git a/src/FilesSidebarTabApp.vue b/src/FilesSidebarTabApp.vue
index 37e3b68d6..ff88343f2 100644
--- a/src/FilesSidebarTabApp.vue
+++ b/src/FilesSidebarTabApp.vue
@@ -403,6 +403,19 @@ export default {
 	flex-direction: column;
 }
 
+.emptycontent {
+	/* Override default top margin set in server and center vertically
+	 * instead. */
+	margin-top: unset;
+
+	height: 100%;
+
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+}
+
 .call-button {
 	/* Center button horizontally. */
 	margin-left: auto;