From 39e929625696657aba35262ffe4e6cff28358b4d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Fri, 28 Aug 2020 15:42:53 +0200
Subject: [PATCH] Fix modal styling and scroll behavior
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/App.vue                         | 19 +++++++------
 src/components/card/CardSidebar.vue | 41 ++++++++++++++++++++++++-----
 2 files changed, 44 insertions(+), 16 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 3758755f0..ef57ed590 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -28,7 +28,7 @@
 		</div>
 
 		<Modal v-if="cardDetailsInModal && $route.params.cardId" :title="t('deck', 'Card details')" @close="hideModal()">
-			<div class="modal__content">
+			<div class="modal__content modal__card">
 				<router-view name="sidebar" />
 			</div>
 		</Modal>
@@ -131,20 +131,19 @@ export default {
 			}
 		}
 	}
-
 </style>
 
-<style>
+<style lang="scss">
+
 	.multiselect {
 		width: 100%;
 	}
 
-	.modal__content {
-
-		height: 600px;
-		min-width: 450px;
-		min-height: 450px;
-		margin: 20px 20px 60px 20px;
-		padding-bottom: 20px;
+	.modal__card {
+		min-width: 320px;
+		width: 50vw;
+		max-width: 800px;
+		min-height: 200px;
+		height: 80vh;
 	}
 </style>
diff --git a/src/components/card/CardSidebar.vue b/src/components/card/CardSidebar.vue
index b1aac45ef..459f91798 100644
--- a/src/components/card/CardSidebar.vue
+++ b/src/components/card/CardSidebar.vue
@@ -26,7 +26,6 @@
 		:subtitle="subtitle"
 		:title-editable.sync="titleEditable"
 		@update:title="updateTitle"
-		:class="{ 'app-sidebar-modal': cardDetailsInModal}"
 		@close="closeSidebar">
 		<template #secondary-actions>
 			<ActionButton v-if="cardDetailsInModal" icon="icon-menu-sidebar" @click.stop="showModal()">
@@ -545,11 +544,41 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-	.app-sidebar-modal {
-		border-left: 0;
-		width: 800px;
-		max-width: 780px;
-		top: 0px;
+
+	// FIXME: Obivously we should at some point not randomly reuse the sidebar component
+	// since this is not oficially supported
+	.modal__card .app-sidebar {
+		border: 0;
+		min-width: 100%;
+		position: relative;
+		top: 0;
+		left: 0;
+		right: 0;
+		max-width: 100%;
+		max-height: 100%;
+		&::v-deep {
+			.app-sidebar-header {
+				position: sticky;
+				top: 0;
+				z-index: 100;
+				background-color: var(--color-main-background);
+			}
+			.app-sidebar-tabs__nav {
+				position: sticky;
+				top: 87px;
+				margin: 0;
+				z-index: 100;
+				background-color: var(--color-main-background);
+			}
+
+			section {
+				min-height: auto;
+			}
+
+			#emptycontent, .emptycontent {
+				margin-top: 88px;
+			}
+		}
 	}
 
 	h5 {