Fix drawer contents overflow (#329)

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);

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>

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;
 	}

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);