From f4faa0b7d19fb84924495cfea8d1082fab87b7ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Soner=20U=C5=9Fakl=C4=B1?=
 <barisusakli@gmail.com>
Date: Mon, 20 Nov 2023 18:33:02 -0500
Subject: [PATCH] feat: better layout for manage chat room modal

---
 public/src/client/chats/manage.js |  1 +
 src/views/modals/manage-room.tpl  | 54 +++++++++++++++++--------------
 2 files changed, 31 insertions(+), 24 deletions(-)

diff --git a/public/src/client/chats/manage.js b/public/src/client/chats/manage.js
index fce6db3505..72fbf2ab1f 100644
--- a/public/src/client/chats/manage.js
+++ b/public/src/client/chats/manage.js
@@ -32,6 +32,7 @@ define('forum/chats/manage', [
 			});
 			modal = bootbox.dialog({
 				title: '[[modules:chat.manage-room]]',
+				size: 'large',
 				message: html,
 				onEscape: true,
 			});
diff --git a/src/views/modals/manage-room.tpl b/src/views/modals/manage-room.tpl
index 0469897464..08c96ccb0b 100644
--- a/src/views/modals/manage-room.tpl
+++ b/src/views/modals/manage-room.tpl
@@ -1,19 +1,5 @@
 <div class="">
-	<label class="form-label">[[modules:chat.add-user]]</label>
-	<input component="chat/manage/user/add/search" class="form-control" type="text" placeholder="[[global:user-search-prompt]]" />
-	<p class="text-danger"></p>
-	<p class="form-text">[[modules:chat.add-user-help]]</p>
-
-	<hr />
-
-	<label class="form-label">[[global:users]]</label>
-	<input component="chat/manage/user/list/search" class="form-control mb-1" type="text" placeholder="[[global:user-search-prompt]]" />
-	<ul component="chat/manage/user/list" class="list-group overflow-auto pe-1 mb-3" style="max-height: 300px;">
-		<li class="list-group-item"><i class="fa fa-spinner fa-spin"></i> [[modules:chat.retrieving-users]]</li>
-	</ul>
-
 	{{{ if user.isAdmin }}}
-	<hr/>
 	<div class="d-flex gap-2 mb-3 align-items-center justify-content-between">
 		<label class="form-label text-nowrap mb-0">[[modules:chat.default-notification-setting]]</label>
 		<select component="chat/room/notification/setting" class="form-select" style="width: 200px;">
@@ -22,17 +8,37 @@
 			<option value="3" {{{ if (room.notificationSetting == "3") }}}selected{{{ end }}}>[[modules:chat.notification-setting-all-messages]]</option>
 		</select>
 	</div>
-
-	{{{ if room.public }}}
-
-	<label class="form-label">[[modules:chat.select-groups]]</label>
-
-	<select component="chat/room/groups" class="form-select mb-3" multiple size="10">
-		{{{ each groups }}}
-		<option value="{./displayName}" {{{ if ./selected }}}selected{{{ end }}}>{./displayName}</option>
-		{{{ end }}}
-	</select>
+	<hr/>
 	{{{ end }}}
+
+	<label class="form-label">[[modules:chat.add-user]]</label>
+	<input component="chat/manage/user/add/search" class="form-control" type="text" placeholder="[[global:user-search-prompt]]" />
+	<p class="text-danger"></p>
+	<p class="form-text">[[modules:chat.add-user-help]]</p>
+
+	<hr />
+
+	<div class="row">
+		<div class="col-12 {{{ if (user.isAdmin && room.public) }}}col-md-6{{{ end }}}">
+			<label class="form-label">[[global:users]]</label>
+			<input component="chat/manage/user/list/search" class="form-control mb-1" type="text" placeholder="[[global:user-search-prompt]]" />
+			<ul component="chat/manage/user/list" class="list-group overflow-auto" style="max-height: 300px;">
+				<li class="list-group-item"><i class="fa fa-spinner fa-spin"></i> [[modules:chat.retrieving-users]]</li>
+			</ul>
+		</div>
+		{{{ if (user.isAdmin && room.public) }}}
+		<div class="col-12 col-md-6 d-flex flex-column">
+			<label class="form-label">[[modules:chat.select-groups]]</label>
+			<select component="chat/room/groups" class="form-select flex-fill" multiple>
+				{{{ each groups }}}
+				<option value="{./displayName}" {{{ if ./selected }}}selected{{{ end }}}>{./displayName}</option>
+				{{{ end }}}
+			</select>
+		</div>
+		{{{ end }}}
+	</div>
+	{{{ if user.isAdmin }}}
+	<hr/>
 	<div class="d-flex justify-content-end">
 		<button component="chat/manage/save" class="btn btn-sm btn-primary">[[global:save]]</button>
 	</div>