nodebb-plugin-composer-default 10.0.21 → 10.0.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-plugin-composer-default",
-  "version": "10.0.21",
+  "version": "10.0.22",
   "description": "Default composer for NodeBB",
   "main": "library.js",
   "repository": {

package/static/lib/composer/drafts.js

@@ -74,7 +74,7 @@ define('composer/drafts', ['api', 'alerts'], function (api, alerts) {
 	function saveDraft(postContainer, draftIconEl, postData) {
 		if (canSave(app.user.uid ? 'localStorage' : 'sessionStorage') && postData && postData.save_id && postContainer.length) {
 			const titleEl = postContainer.find('input.title');
-			const title = titleEl && titleEl.val();
+			const title = titleEl && titleEl.length && titleEl.val();
 			const raw = postContainer.find('textarea').val();
 			const storage = getStorage(app.user.uid);
 
@@ -100,6 +100,7 @@ define('composer/drafts', ['api', 'alerts'], function (api, alerts) {
 					draftData.toPid = postData.toPid;
 				} else if (postData.action === 'posts.edit') {
 					draftData.pid = postData.pid;
+					draftData.title = title;
 				}
 				if (!app.user.uid) {
 					draftData.handle = postContainer.find('input.handle').val();
@@ -297,6 +298,7 @@ define('composer/drafts', ['api', 'alerts'], function (api, alerts) {
 				composer.editPost({
 					save_id: draft.save_id,
 					pid: draft.pid,
+					title: draft.title ? utils.escapeHTML(draft.title) : undefined,
 					body: utils.escapeHTML(draft.text),
 				});
 			}

package/static/lib/composer/formatting.js

@@ -81,7 +81,7 @@ define('composer/formatting', [
 	};
 
 	formatting.addButton = function (iconClass, onClick, title, name) {
-		name = name || iconClass.replace('fa fa-', '')
+		name = name || iconClass.replace('fa fa-', '');
 		formattingDispatchTable[name] = onClick;
 		buttons.push({
 			name,
@@ -99,7 +99,7 @@ define('composer/formatting', [
 	};
 
 	formatting.addHandler = function (postContainer) {
-		postContainer.on('click', '.formatting-bar li', function (event) {
+		postContainer.on('click', '.formatting-bar li a', function (event) {
 			var format = $(this).attr('data-format');
 			var textarea = $(this).parents('[component="composer"]').find('textarea')[0];
 

package/static/lib/composer/preview.js

@@ -43,63 +43,54 @@ define('composer/preview', ['hooks'], function (hooks) {
 		}
 	};
 
-	preview.handleToggler = function (postContainer) {
-		preview.env = utils.findBootstrapEnvironment();
-		var showBtn = postContainer.find('.write-container .toggle-preview');
-		var hideBtn = postContainer.find('.preview-container .toggle-preview');
-		var previewContainer = $('.preview-container');
-		var writeContainer = $('.write-container');
-
-		function hidePreview() {
-			togglePreview(false);
-			if (preview.env !== 'xs' && preview.env !== 'sm') {
-				localStorage.setItem('composer:previewToggled', true);
-			}
-		}
+	preview.handleToggler = function ($postContainer) {
+		const postContainer = $postContainer.get(0);
 
-		function showPreview() {
-			togglePreview(true);
-			if (preview.env !== 'xs' && preview.env !== 'sm') {
-				localStorage.removeItem('composer:previewToggled');
-			}
+		const isMobile = ['xs', 'sm'].includes(utils.findBootstrapEnvironment());
+		const toggler = postContainer.querySelector('.formatting-bar [data-action="preview"]');
+		let show = localStorage.getItem('composer:previewToggled') || (preview.env === 'xs' || preview.env === 'sm');
+		const previewContainer = postContainer.querySelector('.preview-container');
+		const writeContainer = postContainer.querySelector('.write-container');
+
+		if (!toggler) {
+			return;
 		}
 
 		function togglePreview(show) {
-			if (preview.env === 'xs' || preview.env === 'sm') {
-				previewContainer.toggleClass('hide', false);
-				writeContainer.toggleClass('maximized', false);
-				showBtn.toggleClass('hide', true);
-				previewContainer.toggleClass('hidden-xs hidden-sm', !show);
-				writeContainer.toggleClass('hidden-xs hidden-sm', show);
+			if (isMobile) {
+				previewContainer.classList.toggle('hide', false);
+				writeContainer.classList.toggle('maximized', false);
+				previewContainer.classList.toggle('d-none', !show);
+				previewContainer.classList.toggle('d-flex', show);
+				writeContainer.classList.toggle('d-flex', !show);
+				writeContainer.classList.toggle('d-none', show);
 
 				// Render preview once on mobile
 				if (show) {
-					preview.render(postContainer);
+					preview.render($postContainer);
 				}
 			} else {
-				previewContainer.toggleClass('hide', !show);
-				writeContainer.toggleClass('maximized', !show);
-				showBtn.toggleClass('hide', show);
+				previewContainer.classList.toggle('hide', !show);
+				writeContainer.classList.toggle('w-50', show);
+				writeContainer.classList.toggle('w-100', !show);
+
+				localStorage[show ? 'removeItem' : 'setItem']('composer:previewToggled', true);
 			}
 
-			preview.matchScroll(postContainer);
+			preview.matchScroll($postContainer);
 		}
 		preview.toggle = togglePreview;
 
-		hideBtn.on('click', function () {
-			hidePreview();
-			postContainer.find('.write').focus();
-		});
-		showBtn.on('click', function () {
-			showPreview();
-			postContainer.find('.write').focus();
+		toggler.addEventListener('click', (e) => {
+			if (e.button !== 0) {
+				return;
+			}
+
+			show = !show;
+			togglePreview(show);
 		});
 
-		if (localStorage.getItem('composer:previewToggled') || (preview.env === 'xs' || preview.env === 'sm')) {
-			hidePreview();
-		} else {
-			showPreview();
-		}
+		togglePreview(show);
 	};
 
 	return preview;

package/static/lib/composer/resize.js

@@ -181,6 +181,10 @@ define('composer/resize', ['taskbar'], function (taskbar) {
 
 		$resizer
 			.on('mousedown', function (e) {
+				if (e.button !== 0) {
+					return;
+				}
+
 				e.preventDefault();
 				resizeStart(e);
 			})

package/static/lib/composer/scheduler.js

@@ -33,7 +33,7 @@ define('composer/scheduler', ['benchpress', 'bootbox', 'alerts'], function (Benc
 		submitBtn.defaultText = submitBtn.el.lastChild.textContent;
 		submitBtn.activeText = submitBtn.el.getAttribute('data-text-variant');
 
-		displayBtns.forEach(el => el.addEventListener('click', openModal));
+		displayBtnCons.forEach(el => el.addEventListener('click', openModal));
 	};
 
 	scheduler.getTimestamp = function () {

package/static/lib/composer.js

@@ -291,6 +291,10 @@ define('composer', [
 				postData.body = data.body;
 				postData.modified = true;
 			}
+			if (data.title) {
+				postData.title = data.title;
+				postData.modified = true;
+			}
 			push(postData);
 		});
 	};
@@ -572,12 +576,14 @@ define('composer', [
 	}
 
 	function handleHelp(postContainer) {
-		var helpBtn = postContainer.find('.help');
+		var helpBtn = postContainer.find('[data-action="help"]');
 		socket.emit('plugins.composer.renderHelp', function (err, html) {
 			if (!err && html && html.length > 0) {
-				helpBtn.removeClass('hidden');
 				helpBtn.on('click', function () {
-					bootbox.alert(html);
+					bootbox.dialog({
+						size: 'large',
+						message: html,
+					});
 				});
 			}
 		});

package/static/scss/composer.scss

@@ -11,12 +11,6 @@
 	right: 0;
 	left: 0;
 
-	.composer-container {
-		height: 100%;
-		display: flex;
-		flex-direction: column;
-	}
-
 	.mobile-navbar {
 		position: static;
 		min-height: 40px;
@@ -46,29 +40,10 @@
 	}
 
 	.title-container {
-		border-bottom: 1px solid $border-color;
-		margin: 0;
-
-		> div[data-component="composer/title"] {
-			flex: 1;
-		}
-
 		> div[data-component="composer/handle"] {
 			flex: 0.33;
 		}
 
-		.title, .handle {
-			background: transparent;
-			color: $body-color;
-			display: block;
-			margin: 0;
-			padding: 8px;
-			font-size: 18px;
-			border: 0;
-			box-shadow: none;
-			overflow: hidden;
-		}
-
 		.category-list-container {
 
 			[component="category-selector"] {
@@ -84,10 +59,6 @@
 			padding: 0 2rem;
 		}
 
-		.composer-submit, .composer-discard {
-			min-width: 106px;
-		}
-
 		.action-bar {
 			.dropdown-menu:empty {
 				& ~ .dropdown-toggle {
@@ -97,26 +68,6 @@
 		}
 	}
 
-	.display-scheduler {
-        display: flex;
-        align-items: center;
-        margin-right: 1em;
-
-		> i {
-          font-size: 30px;
-          display: inline-block;
-          cursor: pointer;
-
-          &.active {
-            animation: 300ms ease forwards pulse;
-          }
-		}
-	}
-
-	.category-tag-row {
-		margin: 0;
-	}
-
 	.formatting-bar {
 		margin: 0;
 
@@ -128,25 +79,7 @@
 		}
 
 		.formatting-group {
-			padding: 0;
-			margin: 0;
-			overflow-x: auto;
-			white-space: nowrap;
-			display: block;
-			list-style: none;
-
 			li {
-				display: inline-block;
-				padding: 10px 15px;
-				cursor: pointer;
-				position: relative;
-
-				&:focus, &:hover {
-					outline: none;
-					color: $dropdown-link-hover-color;
-					background-color: $dropdown-link-hover-bg;
-				}
-
 				&[data-format="thumbs"][data-count]:after {
 					content: attr(data-count);
 					background: $info;
@@ -163,69 +96,6 @@
 		}
 	}
 
-	.write-preview-container {
-		flex: 2;
-		display: flex;
-		overflow: hidden;
-	}
-
-	.write-container, .preview-container {
-		display: flex;
-		flex: 1;
-		position: relative;
-
-		.help-text {
-			text-transform: uppercase;
-			position: absolute;
-			right: 35px;
-			top: 8px;
-			font-size: 10px;
-			z-index: 1;
-		}
-	}
-
-	.write-container {
-		&.maximized {
-			width: 100%;
-		}
-	}
-
-	.preview-container {
-		word-wrap: break-word;
-		max-width: 50%;
-	}
-
-	.write, .preview  {
-		width: 100%;
-		font-size: 16px;
-		@include border-radius(0);
-		resize: none;
-		overflow: auto;
-		padding: 25px 10px;
-		margin: 0;
-	}
-
-	.write {
-		border: none;
-		border-top: 1px solid $border-color;
-		border-bottom: 1px solid $border-color;
-		box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-	}
-
-	.preview {
-		-webkit-touch-callout: default;
-		user-select: text;
-	}
-
-	.help {
-		@include pointer;
-	}
-
-	.toggle-preview {
-		margin-left: 20px;
-		@include pointer;
-	}
-
 	.tags-container {
 		[component="composer/tag/dropdown"] {
 			.dropdown-menu {
@@ -271,46 +141,17 @@
 	}
 
 	.resizer {
-		display: none;
-		position: absolute;
-		left: 10%;
-		width: 80%;
-		top: 0px;
-		height: 0;
-
-		@include pointer;
+		background: linear-gradient(transparent, #fff);
+		margin-left: calc($spacer * -0.5);
+		padding-left: $spacer;
 
 		.trigger {
-			position: relative;
-			display: block;
-			top: -20px;
-			margin: 0 auto;
-			margin-left: 20px;
-			line-height: 26px;
-			@include transition(filter .15s linear);
-
-			&:hover {
-				filter: invert(100%);
-				cursor: ns-resize;
-			}
-
-			i {
-				width: 32px;
-				height: 32px;
-				background: #333;
-				border: 1px solid #333;
-				border-radius: 50%;
+			cursor: ns-resize;
 
-				position: relative;
-
-				color: #FFF;
-				font-size: 16px;
-
-				&:before {
-					content: fa-content($fa-var-arrows-alt-v);
-					position: relative;
-					top: 25%;
-				}
+			.handle {
+				border-top-left-radius: 50%;
+				border-top-right-radius: 50%;
+				border-bottom: 0 !important;
 			}
 		}
 	}
@@ -365,33 +206,35 @@
 	}
 
 	&.resizable.maximized {
-		.resizer .trigger i {
-			&:before {
-				content: fa-content($fa-var-chevron-down);
+		.resizer {
+			top: 0 !important;
+			background: transparent;
+
+			.trigger {
+				.handle {
+					border-top-left-radius: 0%;
+					border-top-right-radius: 0%;
+					border-bottom-left-radius: 50%;
+					border-bottom-right-radius: 50%;
+					border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
+				}
+
+				i {
+					&:before {
+						content: fa-content($fa-var-chevron-down);
+					}
+				}
 			}
 		}
-
-		box-shadow: none;
 	}
 
 	.draft-icon {
 		font-family: 'FontAwesome';
 		color: $success;
-		margin: 0 1em;
 		opacity: 0;
 
 		&::before {
 			content: fa-content($fa-var-save);
-			position: relative;
-			top: 25%;
-		}
-
-		&::after {
-			content: fa-content($fa-var-check);
-			position: relative;
-			top: 18px;
-			font-size: 0.7em;
-			left: -15%;
 		}
 
 		&.active {
@@ -487,10 +330,6 @@
 				}
 			}
 
-			.toggle-preview.hide {
-				display: inline-block !important;
-			}
-
 			.preview-container {
 				max-width: initial;
 			}

package/static/scss/medium.scss

@@ -14,50 +14,7 @@
 		display: flex;
 	}
 
-	.title-container {
-		border: 0;
-
-		.title, .handle {
-			font-size: 22px;
-			padding: 4px;
-		}
-	}
-
-	.formatting-bar .formatting-group {
-		display: inline-block;
-	}
-
-	&.resizable {
-		box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.5);
-
-		padding-top: 30px;
-		padding-left: 15px;
-		padding-right: 15px;
-	}
-
-	.category-tag-row {
-		margin-top: 5px;
-		margin-bottom: 8px;
-	}
-
-	.write-preview-container {
-		margin-bottom: 15px;
-	}
-
-	.write, .preview {
-		padding: 20px;
-	}
-
-	.write {
-		border: 1px solid $border-color;
-	}
-
-	.tags-container {
-		margin-top: 8px - 15px;
-		margin-bottom: 8px;
-
-		.bootstrap-tagsinput {
-			padding: 0;
-		}
-	}
+	// &.resizable {
+	// 	box-shadow: 0px -20px 20px rgba(255, 255, 255);
+	// }
 }

package/static/scss/page-compose.scss

@@ -13,10 +13,6 @@ body.page-compose {
 	height: 100%;
 	z-index: initial;
 	position: static;
-
-	.display-scheduler {
-		margin: 0 0 0 .6em;
-	}
 }
 
 .zen-mode .page-compose .composer {

package/static/scss/zen-mode.scss

@@ -32,10 +32,6 @@ html.zen-mode {
 		.title-container {
 			display: none;
 		}
-
-		.category-tag-row {
-			margin-top: 3px;
-		}
 	}
 
 	@include media-breakpoint-up(md) {

package/static/templates/composer.tpl

@@ -1,6 +1,6 @@
-<div component="composer" class="composer<!-- IF resizable --> resizable<!-- ENDIF resizable --><!-- IF !isTopicOrMain --> reply<!-- ENDIF !isTopicOrMain -->">
+<div component="composer" class="composer pt-2 px-2<!-- IF resizable --> resizable<!-- ENDIF resizable --><!-- IF !isTopicOrMain --> reply<!-- ENDIF !isTopicOrMain -->">
 
-	<div class="composer-container">
+	<div class="composer-container d-flex flex-column h-100">
 		<!-- mobile header -->
 		<nav class="navbar fixed-top mobile-navbar hidden-md hidden-lg text-bg-primary flex-nowrap">
 			<div class="btn-group">
@@ -35,6 +35,12 @@
 
 		<div class="imagedrop"><div>[[topic:composer.drag_and_drop_images]]</div></div>
 
-		<div class="resizer"><div class="trigger text-center"><i class="fa"></i></div></div>
+		<div class="resizer position-absolute w-100 bottom-100 pe-3 border-bottom">
+			<div class="trigger text-center">
+				<div class="handle d-inline-block px-2 py-1 border bg-body">
+					<i class="fa fa-fw fa-up-down"></i>
+				</div>
+			</div>
+		</div>
 	</div>
 </div>

package/static/templates/partials/composer-formatting.tpl

@@ -1,30 +1,46 @@
-<div class="category-tag-row">
-	<div class="btn-toolbar formatting-bar">
-		<ul class="formatting-group">
-			<!-- BEGIN formatting -->
-				<!-- IF formatting.spacer -->
-				<li class="spacer"></li>
-				<!-- ELSE -->
-				{{{ if (./visibility.desktop && ((isTopicOrMain && ./visibility.main) || (!isTopicOrMain && ./visibility.reply))) }}}
-				<li tabindex="-1" data-format="{formatting.name}" title="{formatting.title}"><i class="{formatting.className}"></i></li>
-				{{{ end }}}
-				<!-- ENDIF formatting.spacer -->
-			<!-- END formatting -->
+<nav class="navbar navbar-expand formatting-bar">
+	<ul class="formatting-group navbar-nav me-auto gap-2">
+		<!-- BEGIN formatting -->
+			<!-- IF formatting.spacer -->
+			<li class="nav-item small spacer"></li>
+			<!-- ELSE -->
+			{{{ if (./visibility.desktop && ((isTopicOrMain && ./visibility.main) || (!isTopicOrMain && ./visibility.reply))) }}}
+			<li class="nav-item small">
+				<a href="#" class="nav-link" tabindex="-1" data-format="{formatting.name}" title="{formatting.title}">
+					<i class="{formatting.className}"></i>
+				</a>
+			</li>
+			{{{ end }}}
+			<!-- ENDIF formatting.spacer -->
+		<!-- END formatting -->
 
-			<!-- IF privileges.upload:post:image -->
-			<li class="img-upload-btn" data-format="picture" tabindex="-1" title="[[modules:composer.upload-picture]]">
+		<!-- IF privileges.upload:post:image -->
+		<li class="img-upload-btn nav-item small">
+			<a href="#" class="nav-link" data-format="picture" tabindex="-1" title="[[modules:composer.upload-picture]]">
 				<i class="fa fa-file-image-o"></i>
-			</li>
-			<!-- ENDIF privileges.upload:post:image -->
-			<!-- IF privileges.upload:post:file -->
-			<li class="file-upload-btn" data-format="upload" tabindex="-1" title="[[modules:composer.upload-file]]">
+			</a>
+		</li>
+		<!-- ENDIF privileges.upload:post:image -->
+		<!-- IF privileges.upload:post:file -->
+		<li class="file-upload-btn nav-item small">
+			<a href="#" class="nav-link" data-format="upload" tabindex="-1" title="[[modules:composer.upload-file]]">
 				<i class="fa fa-file-o"></i>
-			</li>
-			<!-- ENDIF privileges.upload:post:file -->
+			</a>
+		</li>
+		<!-- ENDIF privileges.upload:post:file -->
+
+		<form id="fileForm" method="post" enctype="multipart/form-data">
+			<input type="file" id="files" name="files[]" multiple class="gte-ie9 hide"/>
+		</form>
+	</ul>
 
-			<form id="fileForm" method="post" enctype="multipart/form-data">
-				<input type="file" id="files" name="files[]" multiple class="gte-ie9 hide"/>
-			</form>
-		</ul>
-	</div>
-</div>
+	<div class="draft-icon mx-2 hidden-xs hidden-sm"></div>
+	<button class="btn btn-sm btn-link text-body fw-semibold" data-action="preview">
+		<i class="fa fa-eye"></i>
+		<span class="d-none d-md-inline">[[modules:composer.show_preview]]</span>
+	</button>
+	<button class="btn btn-sm btn-link text-body fw-semibold" data-action="help">
+		<i class="fa fa-question"></i>
+		<span class="d-none d-md-inline">[[modules:composer.help]]</span>
+	</button>
+</nav>

package/static/templates/partials/composer-title-container.tpl

@@ -7,12 +7,12 @@
 
 	{{{ if showHandleInput }}}
 	<div data-component="composer/handle">
-		<input class="handle form-control h-100" type="text" tabindex="1" placeholder="[[topic:composer.handle_placeholder]]" value="{handle}" />
+		<input class="handle form-control h-100 border-0 shadow-none" type="text" tabindex="1" placeholder="[[topic:composer.handle_placeholder]]" value="{handle}" />
 	</div>
 	{{{ end }}}
-	<div data-component="composer/title" class="position-relative" style="min-width:0;">
+	<div data-component="composer/title" class="position-relative flex-grow-1">
 		{{{ if isTopicOrMain }}}
-		<input class="title form-control h-100" type="text" tabindex="1" placeholder="[[topic:composer.title_placeholder]]" value="{topicTitle}"/>
+		<input class="title form-control h-100 rounded-1 shadow-none" type="text" tabindex="1" placeholder="[[topic:composer.title_placeholder]]" value="{topicTitle}"/>
 		{{{ else }}}
 		<span class="title h-100 text-truncate">{{{ if isEditing }}}[[topic:composer.editing]]{{{ else }}}[[topic:composer.replying_to, "{topicTitle}"]]{{{ end }}}</span>
 		{{{ end }}}
@@ -22,22 +22,22 @@
 		</div>
 	</div>
 
-	<div class="draft-icon hidden-xs hidden-sm"></div>
-
-	<div class="display-scheduler hidden-sm hidden-xs{{{ if !canSchedule }}} hidden{{{ end }}}">
-		<i class="fa fa-clock-o"></i>
-	</div>
-
-	<div class="btn-group action-bar hidden-sm hidden-xs">
-		<button class="btn btn-outline-secondary composer-discard" data-action="discard" tabindex="-1"><i class="fa fa-times"></i> [[topic:composer.discard]]</button>
-
-		<button class="btn btn-primary composer-submit" data-action="post" tabindex="6" data-text-variant=" [[topic:composer.schedule]]"><i class="fa fa-check"></i> [[topic:composer.submit]]</button>
-		{{{ if submitOptions.length }}}
-		<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-			<span class="caret"></span>
-			<span class="sr-only">[[topic:composer.additional-options]]</span>
-		</button>
-		<ul class="dropdown-menu">{{{ each submitOptions }}}<li><a class="dropdown-item" href="#" data-action="{./action}">{./text}</a></li>{{{ end }}}</ul>
-		{{{ end }}}
+	<div class="d-flex action-bar hidden-sm hidden-xs align-items-center">
+		<button class="btn btn-sm btn-link text-body fw-semibold" data-action="hide" tabindex="-1"><i class="fa fa-angle-down"></i> [[topic:composer.hide]]</button>
+		<button class="btn btn-sm btn-link composer-discard text-body fw-semibold" data-action="discard" tabindex="-1"><i class="fa fa-trash"></i> [[topic:composer.discard]]</button>
+		<div class="btn-group btn-group-sm">
+			<button class="btn btn-primary composer-submit fw-bold" data-action="post" tabindex="6" data-text-variant=" [[topic:composer.schedule]]"><i class="fa fa-check"></i> [[topic:composer.submit]]</button>
+			{{{ if (submitOptions.length || canSchedule) }}}
+			<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+				<i class="fa fa-caret-down"></i>
+				<span class="sr-only">[[topic:composer.additional-options]]</span>
+			</button>
+			<ul class="dropdown-menu">
+				<li><a class="dropdown-item display-scheduler ">Post Later</a></li>
+				{{{ each submitOptions }}}
+				<li><a class="dropdown-item" href="#" data-action="{./action}">{./text}</a></li>
+				{{{ end }}}</ul>
+			{{{ end }}}
+		</div>
 	</div>
 </div>

package/static/templates/partials/composer-write-preview.tpl

@@ -1,16 +1,9 @@
-<div class="write-preview-container">
-	<div class="write-container me-1">
-		<div class="help-text text-black-50 ">
-			<span class="help hidden">[[modules:composer.compose]] <i class="fa fa-question-circle"></i></span>
-			<span class="toggle-preview hide">[[modules:composer.show_preview]]</span>
-		</div>
+<div class="write-preview-container d-flex gap-2 flex-grow-1">
+	<div class="write-container d-flex d-md-flex w-50">
 		<div class="float-end draft-icon hidden-md hidden-lg"></div>
-		<textarea class="write" tabindex="4" placeholder="[[modules:composer.textarea.placeholder]]">{body}</textarea>
+		<textarea class="write shadow-none rounded-1 w-100 form-control" tabindex="4" placeholder="[[modules:composer.textarea.placeholder]]">{body}</textarea>
 	</div>
-	<div class="hidden-sm hidden-xs preview-container ms-1">
-		<div class="help-text text-black-50">
-			<span class="toggle-preview">[[modules:composer.hide_preview]]</span>
-		</div>
-		<div class="preview card card-body bg-light"></div>
+	<div class="preview-container d-none d-md-flex w-50">
+		<div class="preview card card-body bg-light rounded-1"></div>
 	</div>
 </div>