Make notifications widget flexible (#5791)

* Make notifications widget flexible

* fix

src/client/app.vue

@@ -929,7 +929,7 @@ export default Vue.extend({
 			> div {
 				position: sticky;
 				top: calc(#{$header-height} + var(--margin));
-				height: calc(100vh - #{$header-height} - var(--margin) * 2);
+				height: calc(100vh - #{$header-height} - var(--margin));
 
 				&.edit {
 					overflow: auto;

src/client/widgets/notifications.vue

@@ -1,9 +1,9 @@
 <template>
-<div class="mkw-notifications">
-	<mk-container :show-header="!props.compact">
+<div class="mkw-notifications" :style="`flex-basis: calc(${basis}% - var(--margin)); height: ${previewHeight}px;`">
+	<mk-container :show-header="!props.compact" class="container">
 		<template #header><fa :icon="faBell"/>{{ $t('notifications') }}</template>
 
-		<div style="height: 300px; overflow: auto; background: var(--bg);">
+		<div class="tl">
 			<x-notifications/>
 		</div>
 	</mk-container>
@@ -17,10 +17,14 @@ import XNotifications from '../components/notifications.vue';
 import define from './define';
 import i18n from '../i18n';
 
+const basisSteps = [25, 50, 75, 100]
+const previewHeights = [200, 300, 400, 500]
+
 export default define({
 	name: 'notifications',
 	props: () => ({
-		compact: false
+		compact: false,
+		basisStep: 0
 	})
 }).extend({
 	i18n,
@@ -36,11 +40,51 @@ export default define({
 		};
 	},
 
+	computed: {
+		basis(): number {
+			return basisSteps[this.props.basisStep] || 25
+		},
+
+		previewHeight(): number {
+			return previewHeights[this.props.basisStep] || 200
+		}
+	},
+
 	methods: {
 		func() {
-			this.props.compact = !this.props.compact;
+			if (this.props.basisStep === basisSteps.length - 1) {
+				this.props.basisStep = 0
+				this.props.compact = !this.props.compact;
+			} else {
+				this.props.basisStep += 1
+			}
+
 			this.save();
-		},
+		}
 	}
 });
 </script>
+
+<style lang="scss">
+.mkw-notifications {
+	flex-grow: 1;
+	flex-shrink: 0;
+	min-height: 0; // https://www.gwtcenter.com/min-height-required-on-firefox-flexbox
+
+	.container {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+
+		> div {
+			overflow: auto;
+			flex-grow: 1;
+		}
+	}
+
+	.tl {
+		height: 100%;
+		background: var(--bg);
+	}
+}
+</style>

src/client/widgets/timeline.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="mkw-timeline" :style="`flex-basis: ${basis}%; height: ${previewHeight}px;`">
+<div class="mkw-timeline" :style="`flex-basis: calc(${basis}% - var(--margin)); height: ${previewHeight}px;`">
 	<mk-container :show-header="!props.compact" class="container">
 		<template #header>
 			<button @click="choose" class="_button">
@@ -61,7 +61,7 @@ export default define({
 		},
 
 		previewHeight(): number {
-			return previewHeights[this.props.basisStep] || 300
+			return previewHeights[this.props.basisStep] || 200
 		}
 	},