Fix styling and scroll behavior

Signed-off-by: Julius Härtl <jus@bitgrid.net>

src/components/overview/Overview.vue

@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<div>
+	<div class="overview-wrapper">
 		<Controls :overview-name="filterDisplayName" />
 
 		<div v-if="loading" key="loading" class="emptycontent">
@@ -30,8 +30,7 @@
 			<p />
 		</div>
 
-		<div v-else>
-			<div v-if="isValidFilter" class="dashboard">
+		<div v-else-if="isValidFilter" class="overview">
 			<div v-if="cardsByDueDate.overdue.length > 0" class="dashboard-column">
 				<h3>{{ t('deck', 'Overdue') }}</h3>
 				<div v-for="card in cardsByDueDate.overdue" :key="card.id">
@@ -75,7 +74,6 @@
 			</div>
 		</div>
 	</div>
-	</div>
 </template>
 
 <script>
@@ -200,11 +198,21 @@ export default {
 <style lang="scss" scoped>
 @import './../../css/variables';
 
-.dashboard {
+.overview-wrapper {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	max-height: calc(100vh - 50px);
+}
+
+.overview {
+	position: relative;
+	height: calc(100% - 44px);
+	overflow-x: scroll;
 	display: flex;
 	align-items: stretch;
-	margin-left: $board-spacing;
-	margin-right: $board-spacing;
+	padding-left: $board-spacing;
+	padding-right: $board-spacing;
 
 	.dashboard-column {
 		display: flex;
@@ -212,6 +220,17 @@ export default {
 		min-width: $stack-width;
 		margin-left: $stack-spacing;
 		margin-right: $stack-spacing;
+
+		h3 {
+			margin: -6px;
+			margin-bottom: 12px;
+			padding: 6px 13px;
+			position: sticky;
+			top: 0;
+			z-index: 100;
+			background-color: var(--color-main-background);
+			border: 1px solid var(--color-main-background);
+		}
 	}
 }
 

src/views/Dashboard.vue

@@ -22,6 +22,7 @@
 
 <template>
 	<DashboardWidget :items="cards"
+		:show-more-text="t('deck', 'upcoming cards')"
 		:show-more-url="showMoreUrl"
 		:loading="loading"
 		@hide="() => {}"