From 6a87fbb0c6ce2def29fd9a3f4e205ae1a7578d78 Mon Sep 17 00:00:00 2001
From: Rijk van Zanten <rijkvanzanten@me.com>
Date: Mon, 6 Apr 2020 18:21:21 -0400
Subject: [PATCH] Fix drawer contents overflow (#329)

---
 .../activity-drawer-detail.vue                | 118 +++++++++---------
 .../drawer-button/drawer-button.vue           |   1 +
 .../drawer-detail-group.vue                   |   6 +
 .../drawer-detail/drawer-detail.vue           |  11 +-
 src/views/private/private-view.vue            |   1 +
 5 files changed, 76 insertions(+), 61 deletions(-)

diff --git a/src/components/activity-drawer-detail/activity-drawer-detail.vue b/src/components/activity-drawer-detail/activity-drawer-detail.vue
index 2db5905221..3fe2337a9d 100644
--- a/src/components/activity-drawer-detail/activity-drawer-detail.vue
+++ b/src/components/activity-drawer-detail/activity-drawer-detail.vue
@@ -1,69 +1,67 @@
 <template>
-	<div class="activity-drawer-detail">
-		<drawer-detail title="Comments" icon="mode_comment">
-			<form @submit.prevent="postComment">
-				<v-textarea
-					:placeholder="$t('leave_comment')"
-					v-model="newCommentContent"
-					expand-on-focus
-				>
-					<template #append>
-						<v-button
-							:disabled="!newCommentContent || newCommentContent.length === 0"
-							:loading="saving"
-							class="post-comment"
-							@click="postComment"
-							x-small
-						>
-							{{ $t('submit') }}
-						</v-button>
-					</template>
-				</v-textarea>
-			</form>
-			<transition-group name="slide" tag="div">
-				<div class="activity-record" v-for="act in activity" :key="act.id">
-					<div class="activity-header">
-						<v-avatar small>
-							<v-icon name="person_outline" />
-						</v-avatar>
-						<div class="name">
-							<template v-if="act.action_by && act.action_by">
-								{{ act.action_by.first_name }} {{ act.action_by.last_name }}
-							</template>
-							<template v-else-if="act.action.by && action.action_by">
-								{{ $t('private_user') }}
-							</template>
-							<template v-else>
-								{{ $t('external') }}
-							</template>
-						</div>
-						<div class="date" v-tooltip.start="new Date(act.action_on)">
-							{{ act.date_relative }}
-						</div>
+	<drawer-detail title="Comments" icon="mode_comment">
+		<form @submit.prevent="postComment">
+			<v-textarea
+				:placeholder="$t('leave_comment')"
+				v-model="newCommentContent"
+				expand-on-focus
+			>
+				<template #append>
+					<v-button
+						:disabled="!newCommentContent || newCommentContent.length === 0"
+						:loading="saving"
+						class="post-comment"
+						@click="postComment"
+						x-small
+					>
+						{{ $t('submit') }}
+					</v-button>
+				</template>
+			</v-textarea>
+		</form>
+		<transition-group name="slide" tag="div">
+			<div class="activity-record" v-for="act in activity" :key="act.id">
+				<div class="activity-header">
+					<v-avatar small>
+						<v-icon name="person_outline" />
+					</v-avatar>
+					<div class="name">
+						<template v-if="act.action_by && act.action_by">
+							{{ act.action_by.first_name }} {{ act.action_by.last_name }}
+						</template>
+						<template v-else-if="act.action.by && action.action_by">
+							{{ $t('private_user') }}
+						</template>
+						<template v-else>
+							{{ $t('external') }}
+						</template>
 					</div>
-
-					<div class="content">
-						<template v-if="act.comment">
-							<span v-html="marked(act.comment)" />
-						</template>
-						<template v-else-if="act.action === 'create'">
-							{{ $t('activity_delta_created') }}
-						</template>
-						<template v-else-if="act.action === 'update'">
-							{{ $t('activity_delta_updated') }}
-						</template>
-						<template v-else-if="act.action === 'delete'">
-							{{ $t('activity_delta_deleted') }}
-						</template>
+					<div class="date" v-tooltip.start="new Date(act.action_on)">
+						{{ act.date_relative }}
 					</div>
 				</div>
-			</transition-group>
 
-			<div class="activity-record">
-				<div class="content">{{ $t('activity_delta_created_externally') }}</div>
+				<div class="content">
+					<template v-if="act.comment">
+						<span v-html="marked(act.comment)" />
+					</template>
+					<template v-else-if="act.action === 'create'">
+						{{ $t('activity_delta_created') }}
+					</template>
+					<template v-else-if="act.action === 'update'">
+						{{ $t('activity_delta_updated') }}
+					</template>
+					<template v-else-if="act.action === 'delete'">
+						{{ $t('activity_delta_deleted') }}
+					</template>
+				</div>
 			</div>
-		</drawer-detail>
-	</div>
+		</transition-group>
+
+		<div class="activity-record">
+			<div class="content">{{ $t('activity_delta_created_externally') }}</div>
+		</div>
+	</drawer-detail>
 </template>
 
 <script lang="ts">
diff --git a/src/views/private/components/drawer-button/drawer-button.vue b/src/views/private/components/drawer-button/drawer-button.vue
index 7d4178b852..07c3a06eb7 100644
--- a/src/views/private/components/drawer-button/drawer-button.vue
+++ b/src/views/private/components/drawer-button/drawer-button.vue
@@ -43,6 +43,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 .drawer-button {
 	position: relative;
+	flex-shrink: 0;
 	width: 100%;
 	height: 64px;
 	color: var(--foreground-normal);
diff --git a/src/views/private/components/drawer-detail-group/drawer-detail-group.vue b/src/views/private/components/drawer-detail-group/drawer-detail-group.vue
index fb04e03069..70be0ece27 100644
--- a/src/views/private/components/drawer-detail-group/drawer-detail-group.vue
+++ b/src/views/private/components/drawer-detail-group/drawer-detail-group.vue
@@ -33,3 +33,9 @@ export default defineComponent({
 	},
 });
 </script>
+
+<style lang="scss" scoped>
+.drawer-detail-group {
+	display: contents;
+}
+</style>
diff --git a/src/views/private/components/drawer-detail/drawer-detail.vue b/src/views/private/components/drawer-detail/drawer-detail.vue
index 695c4dca40..542d157db1 100644
--- a/src/views/private/components/drawer-detail/drawer-detail.vue
+++ b/src/views/private/components/drawer-detail/drawer-detail.vue
@@ -8,7 +8,7 @@
 				{{ title }}
 			</div>
 		</button>
-		<transition-expand>
+		<transition-expand class="scroll-container">
 			<div v-show="active">
 				<div class="content">
 					<slot />
@@ -43,8 +43,11 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .drawer-detail {
+	display: contents;
+
 	.toggle {
 		position: relative;
+		flex-shrink: 0;
 		width: 100%;
 		height: 64px;
 		color: var(--foreground-normal);
@@ -76,6 +79,12 @@ export default defineComponent({
 		transform: translateY(-50%);
 	}
 
+	.scroll-container {
+		flex-grow: 1;
+		overflow-x: hidden;
+		overflow-y: auto;
+	}
+
 	.content {
 		padding: 12px;
 	}
diff --git a/src/views/private/private-view.vue b/src/views/private/private-view.vue
index b453db9fd1..202b8023da 100644
--- a/src/views/private/private-view.vue
+++ b/src/views/private/private-view.vue
@@ -212,6 +212,7 @@ export default defineComponent({
 		flex-direction: column;
 		width: 284px;
 		height: 100%;
+		overflow: hidden;
 		background-color: var(--background-normal);
 		transform: translateX(100%);
 		transition: transform var(--slow) var(--transition);