refactor: Finished modal bulma replacement styling

frontend/src/components/Modal.vue

@@ -188,6 +188,7 @@ export default {
 		.modal-card-foot {
 			border-radius: 0 0 5px 5px;
 			overflow: initial;
+			column-gap: 16px;
 
 			& > div {
 				display: flex;

frontend/src/components/modals/EditNews.vue

@@ -2,21 +2,21 @@
 	<modal
 		class="edit-news-modal"
 		:title="newsId ? 'Edit News' : 'Create News'"
+		:wide="true"
+		:split="true"
 	>
 		<template #body>
-			<div id="markdown-editor-and-preview">
-				<div class="column">
-					<p><strong>Markdown</strong></p>
-					<textarea v-model="markdown"></textarea>
-				</div>
-				<div class="column">
-					<p><strong>Preview</strong></p>
-					<div
-						class="news-item"
-						id="preview"
-						v-html="sanitize(marked(markdown))"
-					></div>
-				</div>
+			<div class="left-section">
+				<p><strong>Markdown</strong></p>
+				<textarea v-model="markdown"></textarea>
+			</div>
+			<div class="right-section">
+				<p><strong>Preview</strong></p>
+				<div
+					class="news-item"
+					id="preview"
+					v-html="sanitize(marked(markdown))"
+				></div>
 			</div>
 		</template>
 		<template #footer>
@@ -46,8 +46,9 @@
 							:user-id="createdBy"
 							:alt="createdBy"
 							:link="true"
-						/> </span
-					>&nbsp;<span :title="new Date(createdAt)">
+						/>
+					</span>
+					<span :title="new Date(createdAt)">
 						{{
 							formatDistance(createdAt, new Date(), {
 								addSuffix: true
@@ -211,50 +212,33 @@ export default {
 </script>
 
 <style lang="scss">
-.edit-news-modal {
-	.modal-card {
-		width: 1300px;
-		.modal-card-foot .right {
-			margin: auto 0 auto auto !important;
-
-			span:not(:last-child) {
-				margin-right: 0 !important;
-			}
-		}
-	}
+.edit-news-modal .modal-card .modal-card-foot .right {
+	column-gap: 5px;
 }
 </style>
 
 <style lang="scss" scoped>
 .night-mode {
-	#markdown-editor-and-preview textarea,
-	#markdown-editor-and-preview #preview {
+	.edit-news-modal .modal-card .modal-card-body textarea,
+	.edit-news-modal .modal-card .modal-card-body #preview {
 		border-color: var(--grey-3);
 	}
 
-	#markdown-editor-and-preview textarea {
+	.edit-news-modal .modal-card .modal-card-body textarea {
 		background-color: var(--dark-grey);
 		color: var(--white);
 	}
 }
-
-#markdown-editor-and-preview {
-	display: flex;
-	flex-wrap: wrap;
-
-	.column {
-		display: flex;
-		flex-direction: column;
-		width: 350px;
-		flex-grow: 1;
-		flex-basis: initial;
+.edit-news-modal .modal-card .modal-card-body {
+	.left-section,
+	.right-section {
+		padding: 10px;
 	}
 
 	textarea {
 		border: 0;
 		outline: none;
 		resize: none;
-		margin-right: 5px;
 		font-size: 16px;
 	}
 
@@ -268,8 +252,9 @@ export default {
 	#preview {
 		padding: 5px;
 		border: 1px solid var(--light-grey-3) !important;
-		border-radius: 3px;
-		height: 700px;
+		border-radius: 5px;
+		height: calc(100vh - 280px);
+		width: 100%;
 	}
 }
 </style>

frontend/src/components/modals/WhatIsNew.vue

@@ -101,6 +101,12 @@ export default {
 };
 </script>
 
+<style lang="scss">
+.what-is-news-modal .modal-card .modal-card-foot {
+	column-gap: 0;
+}
+</style>
+
 <style lang="scss" scoped>
 .night-mode {
 	.modal-card,