Replace the flex layout in favor of a grid layout

This commit replaces the initial CSS flexbox layout for forms of the
admin theme with a more elegant approach called "grid layout". :)

Some interesting information:
https://www.w3schools.com/css/css_grid.asp
https://blog.logrocket.com/flexbox-vs-css-grid/

11 files changed, 265 insertions, 277 deletions

diff --git a/theme/admin/html/auth.php b/theme/admin/html/auth.php
index c1dedda..a7b8b74 100644
--- a/theme/admin/html/auth.php
+++ b/theme/admin/html/auth.php
@@ -14,21 +14,23 @@
 <form action="" method="POST">
 	<input type="hidden" name="token" value="<?=$FORM['TOKEN']?>" />
 
-	<div class="flex">
-		<div class="flex-item">
-			<div class="form-icon-flex"><i class="fa fa-user-secret"></i></div>
-			<div class="form-label-flex"><label for="form_username"><?=$Language->text('label_username')?></label></div>
-			<div class="form-field-flex"><input id="form_username" name="username" value="<?=escapeHTML($FORM['DATA']['USERNAME'])?>" /></div>
+	<div class="form-grid two-columns">
+		<label for="form_username">
+			<i class="fa fa-user-secret"></i><?=$Language->text('label_username')?></label>
+
+		<div class="form-grid-item">
+			<input id="form_username" name="username" value="<?=escapeHTML($FORM['DATA']['USERNAME'])?>" />
 		</div>
-	</div>
-	<div class="flex">
-		<div class="flex-item">
-			<div class="form-icon-flex"><i class="fa fa-key"></i></div>
-			<div class="form-label-flex"><label for="form_password"><?=$Language->text('label_password')?></label></div>
-			<div class="form-field-flex"><input type="password" id="form_password" name="password" /></div>
+
+		<label for="form_password">
+			<i class="fa fa-key"></i><?=$Language->text('label_password')?></label>
+
+		<div class="form-grid-item">
+			<input type="password" id="form_password" name="password" />
 		</div>
 	</div>
-	<div class="flex flex-padding background">
+
+	<div class="form-border-box background padding nobordertop">
 		<input type="submit" name="auth" value="<?=$Language->text('login')?>" />
 	</div>
 </form>
diff --git a/theme/admin/html/database.php b/theme/admin/html/database.php
index 5062ae1..b661a28 100644
--- a/theme/admin/html/database.php
+++ b/theme/admin/html/database.php
@@ -14,17 +14,17 @@
 <form action="" method="POST">
 	<input type="hidden" name="token" value="<?=$FORM['TOKEN']?>" />
 
-	<div class="flex">
+	<div class="form-border-box">
 		<textarea id="content-editor" placeholder="<?=$Language->text('database_warning')?>" name="command"><?=escapeHTML($FORM['COMMAND'])?></textarea>
 	</div>
 
 <?php if($FORM['RESULT']): ?>
-	<div class="flex flex-padding background flex-direction-column">
+	<div class="form-border-box background padding">
 		<pre id="database-result"><?=escapeHTML($FORM['RESULT'])?></pre>
 	</div>
 <?php endif; ?>
 
-	<div class="flex flex-padding background">
+	<div class="form-border-box background padding">
 		<input id="insert-button" type="submit" name="execute" value="Execute" />
 	</div>
 </form>
diff --git a/theme/admin/html/page/form.php b/theme/admin/html/page/form.php
index d26b207..eee61bf 100644
--- a/theme/admin/html/page/form.php
+++ b/theme/admin/html/page/form.php
@@ -12,49 +12,55 @@
 	<input type="hidden" name="token" value="<?=$FORM['TOKEN']?>" />
 
 <?php if($FORM['TYPE'] !== 'DELETE'): ?>
-	<div class="flex flex-responsive">
-		<div class="flex-item">
-			<div class="form-icon-flex"><i class="fa fa-database"></i></div>
-			<div class="form-label-flex"><label for="form_id">ID</label></div>
-			<div class="form-field-flex"><input<?=($FORM['TYPE'] === 'UPDATE') ? ' disabled="disabled"' : '';?> id="form_id" name="id" type="number" placeholder="AUTO_INCREMENT" value="<?=escapeHTML($FORM['DATA']['ID'])?>" /></div>
+	<div class="form-grid">
+		<label for="form_id">
+			<i class="fa fa-database"></i>ID</label>
+
+		<div class="form-grid-item">
+			<input<?=($FORM['TYPE'] === 'UPDATE') ? ' disabled="disabled"' : '';?> id="form_id" name="id" type="number" placeholder="AUTO_INCREMENT" value="<?=escapeHTML($FORM['DATA']['ID'])?>" />
 		</div>
-		<div class="flex-item">
-			<div class="form-icon-flex"><i class="fa fa-user"></i></div>
-			<div class="form-label-flex"><label for="form_user"><?=$Language->text('label_user')?></label></div>
-			<div class="form-field-flex">
-				<select id="form_user" name="user">
-					<?php foreach($FORM['USER_LIST'] as $user): ?>
-						<option value="<?=$user['ID']?>"<?=($FORM['DATA']['USER'] === $user['ID']) ? ' selected' : '' ?>><?=escapeHTML($user['FULLNAME'])?> [<?=$user['USERNAME']?>]</option>
-					<?php endforeach; ?>
-				</select>
-			</div>
+
+		<label for="form_user">
+			<i class="fa fa-user"></i><?=$Language->text('label_user')?></label>
+
+		<div class="form-grid-item">
+			<select id="form_user" name="user">
+				<?php foreach($FORM['USER_LIST'] as $user): ?>
+					<option value="<?=$user['ID']?>"<?=($FORM['DATA']['USER'] === $user['ID']) ? ' selected' : '' ?>><?=escapeHTML($user['FULLNAME'])?> [<?=$user['USERNAME']?>]</option>
+				<?php endforeach; ?>
+			</select>
 		</div>
-	</div>
-	<div class="flex flex-responsive">
-		<div class="flex-item">
-			<div class="form-icon-flex"><i class="fa fa-file-text-o"></i></div>
-			<div class="form-label-flex"><label for="form_name"><?=$Language->text('label_name')?></label></div>
-			<div class="form-field-flex"><input id="form_name" name="name" value="<?=escapeHTML($FORM['DATA']['NAME'])?>" /></div>
+
+		<label for="form_name">
+			<i class="fa fa-file-text-o"></i><?=$Language->text('label_name')?></label>
+
+		<div class="form-grid-item">
+			<input id="form_name" name="name" value="<?=escapeHTML($FORM['DATA']['NAME'])?>" />
 		</div>
-		<div class="flex-item">
-			<div class="form-icon-flex"><i class="fa fa-link"></i></div>
-			<div class="form-label-flex"><label for="form_slug"><?=$Language->text('label_slug')?></label></div>
-			<div class="form-field-flex"><input id="form_slug" name="slug" value="<?=escapeHTML($FORM['DATA']['SLUG'])?>" /></div>
+
+		<label for="form_slug">
+			<i class="fa fa-link"></i><?=$Language->text('label_slug')?></label>
+
+		<div class="form-grid-item">
+			<input id="form_slug" name="slug" value="<?=escapeHTML($FORM['DATA']['SLUG'])?>" />
 		</div>
-	</div>
-	<div class="flex flex-responsive">
-		<div class="flex-item">
-			<div class="form-icon-flex"><i class="fa fa-clock-o"></i></div>
-			<div class="form-label-flex"><label for="form_time_insert"><?=$Language->text('label_insert')?></label></div>
-			<div class="form-field-flex"><input id="form_time_insert" name="time_insert" placeholder="YYYY-MM-DD HH:II:SS" value="<?=escapeHTML($FORM['DATA']['TIME_INSERT'])?>" /></div>
+
+		<label for="form_time_insert">
+			<i class="fa fa-clock-o"></i><?=$Language->text('label_insert')?></label>
+
+		<div class="form-grid-item">
+			<input id="form_time_insert" name="time_insert" placeholder="YYYY-MM-DD HH:II:SS" value="<?=escapeHTML($FORM['DATA']['TIME_INSERT'])?>" />
 		</div>
-		<div class="flex-item">
-			<div class="form-icon-flex"><i class="fa fa-clock-o"></i></div>
-			<div class="form-label-flex"><label for="form_time_update"><?=$Language->text('label_update')?></label></div>
-			<div class="form-field-flex"><input id="form_time_update" name="time_update" placeholder="<?=escapeHTML($FORM['DATA']['TIME_UPDATE'] ? $FORM['DATA']['TIME_UPDATE'] : 'CURRENT_TIMESTAMP')?>" value="" /></div>
+
+		<label for="form_time_update">
+			<i class="fa fa-clock-o"></i><?=$Language->text('label_update')?></label>
+
+		<div class="form-grid-item">
+			<input id="form_time_update" name="time_update" placeholder="<?=escapeHTML($FORM['DATA']['TIME_UPDATE'] ? $FORM['DATA']['TIME_UPDATE'] : 'CURRENT_TIMESTAMP')?>" value="" />
 		</div>
 	</div>
-	<div class="flex flex-direction-column">
+
+	<div id="content-editor-wrapper" class="form-border-box">
 		<div id="button-list-wrapper">
 			<ul id="markdown-list" class="button-list markdown">
 				<li data-markdown="bold" class="fa fa-bold" title="<?=$Language->text('markdown_bold')?>"></li>
@@ -70,23 +76,23 @@
 		</div>
 		<textarea id="content-editor" name="body" placeholder="[…]"><?=escapeHTML($FORM['DATA']['BODY'])?></textarea>
 	</div>
-	<div class="flex flex-padding background flex-emoticons">
+	<div id="emoticon-list-wrapper" class="form-border-box background padding">
 		<ul id="emoticon-list" class="button-list emoticons">
 			<?php foreach(getUnicodeEmoticons() as $emoticon => $explanation):?>
 				<li data-emoticon="<?=$emoticon?>" title="<?=$explanation?>"><?=$emoticon?></li>
 			<?php endforeach; ?>
 		</ul>
 	</div>
-	<div class="flex flex-padding background">
+	<div class="form-border-box background padding">
 		<input id="form_argv" name="argv" maxlength="250" placeholder="[ARGUMENT_ONE=foo|ARGUMENT_TWO=bar …]" value="<?=escapeHTML($FORM['DATA']['ARGV'])?>" />
 	</div>
 <?php else: ?>
-	<div class="flex flex-padding background flex-direction-column">
+	<div class="form-border-box background padding">
 		<?=$HTML?>
 	</div>
 <?php endif; ?>
 
-	<div class="flex flex-padding background">
+	<div class="form-border-box background padding">
 		<?php if($FORM['TYPE'] === 'INSERT'): ?>
 			<input id="insert-button" type="submit" name="insert" value="<?=$Language->text('insert')?>" />
 		<?php elseif($FORM['TYPE'] === 'UPDATE'): ?>
diff --git a/theme/admin/html/page/search.php b/theme/admin/html/page/search.php
index a48f604..6506d34 100644
--- a/theme/admin/html/page/search.php
+++ b/theme/admin/html/page/search.php
@@ -2,10 +2,10 @@
 <p><?=$Language->text('search_page_desc')?></p>
 
 <form id="search-form" method="GET">
-	<div class="flex flex-padding background">
+	<div class="form-border-box background padding">
 		<input id="search-text" type="search" name="q" placeholder="<?=$Language->text('placeholder_search')?>" value="<?=escapeHTML($QUERY)?>" />
 	</div>
-	<div class="flex flex-padding background">
+	<div class="form-border-box background padding">
 		<input id="update-button" type="submit" value="<?=$Language->text('search')?>" />
 	</div>
 </form>
@@ -14,4 +14,4 @@
 	<?php foreach($PAGES as $page): ?>
 		<?php echo $page; ?>
 	<?php endforeach; ?>
-</div>
\ No newline at end of file
+</div>
diff --git a/theme/admin/html/post/form.php b/theme/admin/html/post/form.php
index e6966ea..58ac122 100644
--- a/theme/admin/html/post/form.php
+++ b/theme/admin/html/post/form.php
@@ -12,49 +12,55 @@
 	<input type="hidden" name="token" value="<?=$FORM['TOKEN']?>" />
 
 <?php if($FORM['TYPE'] !== 'DELETE'): ?>
-	<div class="flex flex-responsive">
-		<div class="flex-item">
-			<div class="form-icon-flex"><i class="fa fa-database"></i></div>
-			<div class="form-label-flex"><label for="form_id">ID</label></div>
-			<div class="form-field-flex"><input<?=($FORM['TYPE'] === 'UPDATE') ? ' disabled="disabled"' : '';?> id="form_id" name="id" type="number" placeholder="AUTO_INCREMENT" value="<?=escapeHTML($FORM['DATA']['ID'])?>" /></div>
+	<div class="form-grid">
+		<label for="form_id">
+			<i class="fa fa-database"></i>ID</label>
+
+		<div class="form-grid-item">
+			<input<?=($FORM['TYPE'] === 'UPDATE') ? ' disabled="disabled"' : '';?> id="form_id" name="id" type="number" placeholder="AUTO_INCREMENT" value="<?=escapeHTML($FORM['DATA']['ID'])?>" />
 		</div>
-		<div class="flex-item">
-			<div class="form-icon-flex"><i class="fa fa-user"></i></div>
-			<div class="form-label-flex"><label for="form_user"><?=$Language->text('label_user')?></label></div>
-			<div class="form-field-flex">
-				<select id="form_user" name="user">
-					<?php foreach($FORM['USER_LIST'] as $user): ?>
-						<option value="<?=$user['ID']?>"<?=($FORM['DATA']['USER'] === $user['ID']) ? ' selected' : '' ?>><?=escapeHTML($user['FULLNAME'])?> [<?=$user['USERNAME']?>]</option>
-					<?php endforeach; ?>
-				</select>
-			</div>
+
+		<label for="form_user">
+			<i class="fa fa-user"></i><?=$Language->text('label_user')?></label>
+
+		<div class="form-grid-item">
+			<select id="form_user" name="user">
+				<?php foreach($FORM['USER_LIST'] as $user): ?>
+					<option value="<?=$user['ID']?>"<?=($FORM['DATA']['USER'] === $user['ID']) ? ' selected' : '' ?>><?=escapeHTML($user['FULLNAME'])?> [<?=$user['USERNAME']?>]</option>
+				<?php endforeach; ?>
+			</select>
 		</div>
-	</div>
-	<div class="flex flex-responsive">
-		<div class="flex-item">
-			<div class="form-icon-flex"><i class="fa fa-newspaper-o"></i></div>
-			<div class="form-label-flex"><label for="form_name"><?=$Language->text('label_name')?></label></div>
-			<div class="form-field-flex"><input id="form_name" name="name" value="<?=escapeHTML($FORM['DATA']['NAME'])?>" /></div>
+
+		<label for="form_name">
+			<i class="fa fa-newspaper-o"></i><?=$Language->text('label_name')?></label>
+
+		<div class="form-grid-item">
+			<input id="form_name" name="name" value="<?=escapeHTML($FORM['DATA']['NAME'])?>" />
 		</div>
-		<div class="flex-item">
-			<div class="form-icon-flex"><i class="fa fa-link"></i></div>
-			<div class="form-label-flex"><label for="form_slug"><?=$Language->text('label_slug')?></label></div>
-			<div class="form-field-flex"><input id="form_slug" name="slug" value="<?=escapeHTML($FORM['DATA']['SLUG'])?>" /></div>
+
+		<label for="form_slug">
+			<i class="fa fa-link"></i><?=$Language->text('label_slug')?></label>
+
+		<div class="form-grid-item">
+			<input id="form_slug" name="slug" value="<?=escapeHTML($FORM['DATA']['SLUG'])?>" />
 		</div>
-	</div>
-	<div class="flex flex-responsive">
-		<div class="flex-item">
-			<div class="form-icon-flex"><i class="fa fa-clock-o"></i></div>
-			<div class="form-label-flex"><label for="form_time_insert"><?=$Language->text('label_insert')?></label></div>
-			<div class="form-field-flex"><input id="form_time_insert" name="time_insert" placeholder="YYYY-MM-DD HH:II:SS" value="<?=escapeHTML($FORM['DATA']['TIME_INSERT'])?>" /></div>
+
+		<label for="form_time_insert">
+			<i class="fa fa-clock-o"></i><?=$Language->text('label_insert')?></label>
+
+		<div class="form-grid-item">
+			<input id="form_time_insert" name="time_insert" placeholder="YYYY-MM-DD HH:II:SS" value="<?=escapeHTML($FORM['DATA']['TIME_INSERT'])?>" />
 		</div>
-		<div class="flex-item">
-			<div class="form-icon-flex"><i class="fa fa-clock-o"></i></div>
-			<div class="form-label-flex"><label for="form_time_update"><?=$Language->text('label_update')?></label></div>
-			<div class="form-field-flex"><input id="form_time_update" name="time_update" placeholder="<?=escapeHTML($FORM['DATA']['TIME_UPDATE'] ? $FORM['DATA']['TIME_UPDATE'] : 'CURRENT_TIMESTAMP')?>" value="" /></div>
+
+		<label for="form_time_update">
+			<i class="fa fa-clock-o"></i><?=$Language->text('label_update')?></label>
+
+		<div class="form-grid-item">
+			<input id="form_time_update" name="time_update" placeholder="<?=escapeHTML($FORM['DATA']['TIME_UPDATE'] ? $FORM['DATA']['TIME_UPDATE'] : 'CURRENT_TIMESTAMP')?>" value="" />
 		</div>
 	</div>
-	<div class="flex flex-direction-column">
+
+	<div id="content-editor-wrapper" class="form-border-box">
 		<div id="button-list-wrapper">
 			<ul id="markdown-list" class="button-list markdown">
 				<li data-markdown="bold" class="fa fa-bold" title="<?=$Language->text('markdown_bold')?>"></li>
@@ -70,23 +76,23 @@
 		</div>
 		<textarea id="content-editor" name="body" placeholder="[…]"><?=escapeHTML($FORM['DATA']['BODY'])?></textarea>
 	</div>
-	<div class="flex flex-padding background flex-emoticons">
+	<div id="emoticon-list-wrapper" class="form-border-box background padding">
 		<ul id="emoticon-list" class="button-list emoticons">
 			<?php foreach(getUnicodeEmoticons() as $emoticon => $explanation):?>
 				<li data-emoticon="<?=$emoticon?>" title="<?=$explanation?>"><?=$emoticon?></li>
 			<?php endforeach; ?>
 		</ul>
 	</div>
-	<div class="flex flex-padding background">
+	<div class="form-border-box background padding">
 		<input id="form_argv" name="argv" maxlength="250" placeholder="[ARGUMENT_ONE=foo|ARGUMENT_TWO=bar …]" value="<?=escapeHTML($FORM['DATA']['ARGV'])?>" />
 	</div>
 <?php else: ?>
-	<div class="flex flex-padding background flex-direction-column">
+	<div class="form-border-box background padding">
 		<?=$HTML?>
 	</div>
 <?php endif; ?>
 
-	<div class="flex flex-padding background">
+	<div class="form-border-box background padding">
 		<?php if($FORM['TYPE'] === 'INSERT'): ?>
 			<input id="insert-button" type="submit" name="insert" value="<?=$Language->text('insert')?>" />
 		<?php elseif($FORM['TYPE'] === 'UPDATE'): ?>
diff --git a/theme/admin/html/post/search.php b/theme/admin/html/post/search.php
index 4476786..1289879 100644
--- a/theme/admin/html/post/search.php
+++ b/theme/admin/html/post/search.php
@@ -2,10 +2,10 @@
 <p><?=$Language->text('search_post_desc')?></p>
 
 <form id="search-form" method="GET">
-	<div class="flex flex-padding background">
+	<div class="form-border-box background padding">
 		<input id="search-text" type="search" name="q" placeholder="<?=$Language->text('placeholder_search')?>" value="<?=escapeHTML($QUERY)?>" />
 	</div>
-	<div class="flex flex-padding background">
+	<div class="form-border-box background padding">
 		<input id="update-button" type="submit" value="<?=$Language->text('search')?>" />
 	</div>
 </form>
@@ -14,4 +14,4 @@
 	<?php foreach($POSTS as $post): ?>
 		<?php echo $post; ?>
 	<?php endforeach; ?>
-</div>
\ No newline at end of file
+</div>
diff --git a/theme/admin/html/user/form.php b/theme/admin/html/user/form.php
index 970a6d9..7e370e5 100644
--- a/theme/admin/html/user/form.php
+++ b/theme/admin/html/user/form.php
@@ -12,55 +12,65 @@
 	<input type="hidden" name="token" value="<?=$FORM['TOKEN']?>" />
 
 <?php if($FORM['TYPE'] !== 'DELETE'): ?>
-	<div class="flex flex-responsive">
-		<div class="flex-item">
-			<div class="form-icon-flex"><i class="fa fa-database"></i></div>
-			<div class="form-label-flex"><label for="form_id">ID</label></div>
-			<div class="form-field-flex"><input<?=($FORM['TYPE'] === 'UPDATE') ? ' disabled="disabled"' : '';?> id="form_id" name="id" type="number" placeholder="AUTO_INCREMENT" value="<?=escapeHTML($FORM['DATA']['ID'])?>" /></div>
+	<div class="form-grid">
+		<label for="form_id">
+			<i class="fa fa-database"></i>ID</label>
+
+		<div class="form-grid-item">
+			<input<?=($FORM['TYPE'] === 'UPDATE') ? ' disabled="disabled"' : '';?> id="form_id" name="id" type="number" placeholder="AUTO_INCREMENT" value="<?=escapeHTML($FORM['DATA']['ID'])?>" />
 		</div>
-		<div class="flex-item">
-			<div class="form-icon-flex"><i class="fa fa-key"></i></div>
-			<div class="form-label-flex"><label for="form_password"><?=$Language->text('label_password')?></label></div>
-			<div class="form-field-flex"><input id="form_password" name="password" placeholder="NO CHANGE" type="password" /></div>
+
+		<label for="form_password">
+			<i class="fa fa-key"></i><?=$Language->text('label_password')?></label>
+
+		<div class="form-grid-item">
+			<input id="form_password" name="password" placeholder="NO CHANGE" type="password" />
 		</div>
-	</div>
-	<div class="flex flex-responsive">
-		<div class="flex-item">
-			<div class="form-icon-flex"><i class="fa fa-user"></i></div>
-			<div class="form-label-flex"><label for="form_fullname"><?=$Language->text('label_fullname')?></label></div>
-			<div class="form-field-flex"><input id="form_fullname" name="fullname" value="<?=escapeHTML($FORM['DATA']['FULLNAME'])?>" /></div>
+
+		<label for="form_fullname">
+			<i class="fa fa-user"></i><?=$Language->text('label_fullname')?></label>
+
+		<div class="form-grid-item">
+			<input id="form_fullname" name="fullname" value="<?=escapeHTML($FORM['DATA']['FULLNAME'])?>" />
 		</div>
-		<div class="flex-item">
-			<div class="form-icon-flex"><i class="fa fa-envelope-o"></i></div>
-			<div class="form-label-flex"><label for="form_mailaddr"><?=$Language->text('label_mailaddr')?></label></div>
-			<div class="form-field-flex"><input id="form_mailaddr" name="mailaddr" value="<?=escapeHTML($FORM['DATA']['MAILADDR'])?>" /></div>
+
+		<label for="form_mailaddr">
+			<i class="fa fa-envelope-o"></i><?=$Language->text('label_mailaddr')?></label>
+
+		<div class="form-grid-item">
+			<input id="form_mailaddr" name="mailaddr" value="<?=escapeHTML($FORM['DATA']['MAILADDR'])?>" />
 		</div>
-	</div>
-	<div class="flex flex-responsive">
-		<div class="flex-item">
-			<div class="form-icon-flex"><i class="fa fa-user-secret"></i></div>
-			<div class="form-label-flex"><label for="form_username"><?=$Language->text('label_username')?></label></div>
-			<div class="form-field-flex"><input id="form_username" name="username" value="<?=escapeHTML($FORM['DATA']['USERNAME'])?>" /></div>
+
+		<label for="form_username">
+			<i class="fa fa-user-secret"></i><?=$Language->text('label_username')?></label>
+
+		<div class="form-grid-item">
+			<input id="form_username" name="username" value="<?=escapeHTML($FORM['DATA']['USERNAME'])?>" />
 		</div>
-		<div class="flex-item">
-			<div class="form-icon-flex"><i class="fa fa-link"></i></div>
-			<div class="form-label-flex"><label for="form_slug"><?=$Language->text('label_slug')?></label></div>
-			<div class="form-field-flex"><input id="form_slug" name="slug" value="<?=escapeHTML($FORM['DATA']['SLUG'])?>" /></div>
+
+		<label for="form_slug">
+			<i class="fa fa-link"></i><?=$Language->text('label_slug')?></label>
+
+		<div class="form-grid-item">
+			<input id="form_slug" name="slug" value="<?=escapeHTML($FORM['DATA']['SLUG'])?>" />
 		</div>
-	</div>
-	<div class="flex flex-responsive">
-		<div class="flex-item">
-			<div class="form-icon-flex"><i class="fa fa-clock-o"></i></div>
-			<div class="form-label-flex"><label for="form_time_insert"><?=$Language->text('label_insert')?></label></div>
-			<div class="form-field-flex"><input id="form_time_insert" name="time_insert" placeholder="YYYY-MM-DD HH:II:SS" value="<?=escapeHTML($FORM['DATA']['TIME_INSERT'])?>" /></div>
+
+		<label for="form_time_insert">
+			<i class="fa fa-clock-o"></i><?=$Language->text('label_insert')?></label>
+
+		<div class="form-grid-item">
+			<input id="form_time_insert" name="time_insert" placeholder="YYYY-MM-DD HH:II:SS" value="<?=escapeHTML($FORM['DATA']['TIME_INSERT'])?>" />
 		</div>
-		<div class="flex-item">
-			<div class="form-icon-flex"><i class="fa fa-clock-o"></i></div>
-			<div class="form-label-flex"><label for="form_time_update"><?=$Language->text('label_update')?></label></div>
-			<div class="form-field-flex"><input id="form_time_update" name="time_update" placeholder="<?=escapeHTML($FORM['DATA']['TIME_UPDATE'] ? $FORM['DATA']['TIME_UPDATE'] : 'CURRENT_TIMESTAMP')?>" value="" /></div>
+
+		<label for="form_time_update">
+			<i class="fa fa-clock-o"></i><?=$Language->text('label_update')?></label>
+
+		<div class="form-grid-item">
+			<input id="form_time_update" name="time_update" placeholder="<?=escapeHTML($FORM['DATA']['TIME_UPDATE'] ? $FORM['DATA']['TIME_UPDATE'] : 'CURRENT_TIMESTAMP')?>" value="" />
 		</div>
 	</div>
-	<div class="flex flex-direction-column">
+
+	<div id="content-editor-wrapper" class="form-border-box">
 		<div id="button-list-wrapper">
 			<ul id="markdown-list" class="button-list markdown">
 				<li data-markdown="bold" class="fa fa-bold" title="<?=$Language->text('markdown_bold')?>"></li>
@@ -76,23 +86,23 @@
 		</div>
 		<textarea id="content-editor" name="body" placeholder="[…]"><?=escapeHTML($FORM['DATA']['BODY'])?></textarea>
 	</div>
-	<div class="flex flex-padding background flex-emoticons">
+	<div id="emoticon-list-wrapper" class="form-border-box background padding">
 		<ul id="emoticon-list" class="button-list emoticons">
 			<?php foreach(getUnicodeEmoticons() as $emoticon => $explanation):?>
 				<li data-emoticon="<?=$emoticon?>" title="<?=$explanation?>"><?=$emoticon?></li>
 			<?php endforeach; ?>
 		</ul>
 	</div>
-	<div class="flex flex-padding background">
+	<div class="form-border-box background padding">
 		<input id="form_argv" name="argv" maxlength="250" placeholder="[ARGUMENT_ONE=foo|ARGUMENT_TWO=bar …]" value="<?=escapeHTML($FORM['DATA']['ARGV'])?>" />
 	</div>
 <?php else: ?>
-	<div class="flex flex-padding background flex-direction-column">
+	<div class="form-border-box background padding">
 		<?=$HTML?>
 	</div>
 <?php endif; ?>
 
-	<div class="flex flex-padding background">
+	<div class="form-border-box background padding">
 		<?php if($FORM['TYPE'] === 'INSERT'): ?>
 			<input id="insert-button" type="submit" name="insert" value="<?=$Language->text('insert')?>" />
 		<?php elseif($FORM['TYPE'] === 'UPDATE'): ?>
diff --git a/theme/admin/rsrc/css/import/_responsive.scss b/theme/admin/rsrc/css/import/_responsive.scss
index a8275bf..2d3d62a 100644
--- a/theme/admin/rsrc/css/import/_responsive.scss
+++ b/theme/admin/rsrc/css/import/_responsive.scss
@@ -12,19 +12,6 @@
 # Responsive Level #2
 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
 @media only screen and (max-width: 37.5em) {
-	.flex.flex-responsive {
-		display: block;
-		width: auto;
-
-		> .flex-item {
-			width: 100%;
-
-			+ .flex-item {
-				border-top: 0.05rem solid #AAA;
-			}
-		}
-	}
-
 	#main-navi {
 		font-size: 1rem;
 
@@ -43,10 +30,14 @@
 		}
 	}
 
-	.flex-emoticons {
+	#emoticon-list-wrapper {
 		display: none;
 	}
 
+	.form-grid {
+		grid-template-columns: auto auto;
+	}
+
 	.actions {
 		float: none;
 		display: flex;
diff --git a/theme/admin/rsrc/css/main.css b/theme/admin/rsrc/css/main.css
index d440684..2677f19 100644
--- a/theme/admin/rsrc/css/main.css
+++ b/theme/admin/rsrc/css/main.css
@@ -476,79 +476,63 @@ table, td {
 }
 
 /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
-# Form flex-box
+# Grids
 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
-form {
-  border: 0.05rem solid #AAA;
-}
-
-.flex {
-  display: flex;
-  width: 100%;
-  justify-content: center;
-  overflow: hidden;
-  box-sizing: border-box;
-}
-.flex + .flex {
-  border-top: 0.05rem solid #AAA;
-}
-
-.flex > .flex-item {
-  border-right: 0.05rem solid #AAA;
-  display: flex;
-  width: 100%;
+.form-grid {
+  display: grid;
+  grid-template-columns: 8rem auto 8rem auto;
+  border-left: 0.05rem solid #AAA;
+  border-bottom: 0.05rem solid #AAA;
 }
-.flex > .flex-item:last-child {
-  border-right: none;
+.form-grid.two-columns {
+  grid-template-columns: auto auto;
 }
-.flex > .flex-item > div {
+.form-grid > label {
   display: flex;
   align-items: center;
-  padding: 0.5rem;
-  box-sizing: border-box;
+  background: #DDD;
 }
-.flex > .flex-item > div + div {
-  border-left: 0.05rem solid #AAA;
+.form-grid > label .fa {
+  margin-left: 0.5rem;
+  margin-right: 1rem;
 }
-
-.flex.flex-responsive > .flex-item {
-  width: 50%;
-}
-
-.form-icon-flex {
-  background: #DDD;
-  width: 10%;
-  justify-content: center;
+.form-grid-item,
+.form-grid > label {
+  padding: 0.5rem;
+  border-top: 0.05rem solid #AAA;
+  border-right: 0.05rem solid #AAA;
 }
 
-.form-label-flex {
-  background: #DDD;
-  width: 30%;
-  border-left: none !important;
+.form-border-box {
+  border: 0.05rem solid #AAA;
 }
-
-.form-field-flex {
-  width: 60%;
+.form-border-box.padding {
+  padding: 0.5rem;
 }
-
-.background {
+.form-border-box.background {
   background: #DDD;
 }
-
-.flex-padding {
-  padding: 0.5rem;
+.form-border-box.nobordertop {
+  border-top: none;
 }
-
-.flex-direction-column {
-  flex-direction: column;
+.form-border-box + .form-border-box {
+  border-top: none;
 }
 
 /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 # Form buttons
 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+#emoticon-list-wrapper {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  box-sizing: border-box;
+}
+
 #button-list-wrapper {
   border-bottom: 0.05rem solid #AAA;
   background: #EEE;
+  overflow: hidden;
 }
 
 .button-list {
@@ -585,6 +569,9 @@ form {
   border: none;
   margin: 0;
 }
+#content-editor-wrapper {
+  border-top: none;
+}
 
 /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 # Form elements
@@ -606,7 +593,7 @@ input:focus, select:focus, textarea:focus {
 textarea {
   font-family: "Kadwa", "sans-serif";
   box-sizing: border-box;
-  display: inline-block;
+  display: block;
   resize: vertical;
   min-height: 15rem;
   line-height: 1.2rem;
@@ -692,17 +679,6 @@ label:after {
 # Responsive Level #2
 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
 @media only screen and (max-width: 37.5em) {
-  .flex.flex-responsive {
-    display: block;
-    width: auto;
-  }
-  .flex.flex-responsive > .flex-item {
-    width: 100%;
-  }
-  .flex.flex-responsive > .flex-item + .flex-item {
-    border-top: 0.05rem solid #AAA;
-  }
-
   #main-navi {
     font-size: 1rem;
   }
@@ -716,10 +692,14 @@ label:after {
     padding: 0.5rem;
   }
 
-  .flex-emoticons {
+  #emoticon-list-wrapper {
     display: none;
   }
 
+  .form-grid {
+    grid-template-columns: auto auto;
+  }
+
   .actions {
     float: none;
     display: flex;
diff --git a/theme/admin/rsrc/css/main.css.map b/theme/admin/rsrc/css/main.css.map
index 4f2ac93..3c7b8ab 100644
--- a/theme/admin/rsrc/css/main.css.map
+++ b/theme/admin/rsrc/css/main.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["main.scss","import/_responsive.scss","import/_font-awesome.scss","import/_fonts.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;AAEA;EACC;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;;AAEA;EACC;;AAGD;EACC;;;AAIF;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;;AAEA;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAEA;EACC;;AAEA;EACC;;AAIF;EACC;EACA;;AAGD;EACC;;;AAKH;AAAA;AAAA;AAIC;EACC;EACA;EACA;;AAEA;EACC;;AAEA;EACC;;AAIF;EACC;;AAGD;EACC;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;;;AAKH;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAIF;EACC;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAEA;EACC;;AAKH;EACC;EACA;EACA;EACA;;AAEA;EACC;;;AAKH;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;EACA;EACA;;AAGD;EACG;EACA;EACA;;;AAIJ;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;AAAA;AAAA;AAIC;EACC;;AAGD;EACC;;AAGD;EACC;;;AAIF;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAGD;EACC;;AAEA;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAEA;EACC;;AAKH;EACC;EACA;EACA;;AAEA;EACC;;AAKH;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAIF;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAEA;EACC;;AAGD;EACC;EACA;;AAGD;EACC;;;AAKH;AAAA;AAAA;AAGA;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EACC;;;AAKH;EACC;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIA;EACC;EACA;;AAGD;EACC;EACA;;AAEA;EACC;;;AAKH;EACC;EACA;;AAEA;EACC;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;;;AC5tBD;AAAA;AAAA;AAGA;EACC;IACC;AAAqB;IACrB;;;AAIF;AAAA;AAAA;AAGA;EACC;IACC;IACA;;EAEA;IACC;;EAEA;IACC;;;EAKH;IACC;;EAGC;IACC;;EAGD;IACC;;EAIF;IACC;;;EAIF;IACC;;;EAGD;IACC;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACC;;EAEA;IACC;;;EAKH;IACC;;;EAGD;IACC;IACA;;;EAGD;IACC;;;AC7EF;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;ACxID;AAAA;AAAA;AAGA;EACC;EACA;EACA;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA","file":"main.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["main.scss","import/_responsive.scss","import/_font-awesome.scss","import/_fonts.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;AAEA;EACC;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;;AAEA;EACC;;AAGD;EACC;;;AAIF;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;;AAEA;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAEA;EACC;;AAEA;EACC;;AAIF;EACC;EACA;;AAGD;EACC;;;AAKH;AAAA;AAAA;AAIC;EACC;EACA;EACA;;AAEA;EACC;;AAEA;EACC;;AAIF;EACC;;AAGD;EACC;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;;;AAKH;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAIF;EACC;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAEA;EACC;;AAKH;EACC;EACA;EACA;EACA;;AAEA;EACC;;;AAKH;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;EACA;EACA;;AAGD;EACG;EACA;EACA;;;AAIJ;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;AAAA;AAAA;AAIC;EACC;;AAGD;EACC;;AAGD;EACC;;;AAIF;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAGD;EACC;;AAEA;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAEA;EACC;;AAKH;EACC;EACA;EACA;;AAEA;EACC;;AAKH;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAIF;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAEA;EACC;;AAGD;EACC;EACA;;AAGD;EACC;;;AAKH;AAAA;AAAA;AAGA;EACC;EACA;EAEA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAIF;AAAA;EAEC;EACA;EACA;;;AAIF;EACC;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;;AAEA;EACC;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIA;EACC;EACA;;AAGD;EACC;EACA;;AAEA;EACC;;;AAKH;EACC;EACA;;AAEA;EACC;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;;AAIF;AAAA;AAAA;AAGA;EACC;;;AC9tBD;AAAA;AAAA;AAGA;EACC;IACC;AAAqB;IACrB;;;AAIF;AAAA;AAAA;AAGA;EACC;IACC;;EAGC;IACC;;EAGD;IACC;;EAIF;IACC;;;EAIF;IACC;;;EAGD;IACC;;;EAGD;IACC;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACC;;EAEA;IACC;;;EAKH;IACC;;;EAGD;IACC;IACA;;;EAGD;IACC;;;ACpEF;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;ACxID;AAAA;AAAA;AAGA;EACC;EACA;EACA;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA","file":"main.css"}
\ No newline at end of file
diff --git a/theme/admin/rsrc/css/main.scss b/theme/admin/rsrc/css/main.scss
index c60f354..e00c60a 100644
--- a/theme/admin/rsrc/css/main.scss
+++ b/theme/admin/rsrc/css/main.scss
@@ -527,83 +527,72 @@ table, td {
 }
 
 /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
-# Form flex-box
+# Grids
 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
-form {
-	border: 0.05rem solid #AAA;
-}
-
-.flex {
-	display: flex;
-	width: 100%;
-	justify-content: center;
-	overflow: hidden;
-	box-sizing: border-box;
+.form-grid {
+	display: grid;
+	grid-template-columns: 8rem auto 8rem auto;
 
-	+ .flex {
-		border-top: 0.05rem solid #AAA;
-	}
-}
-
-.flex > .flex-item {
-	border-right: 0.05rem solid #AAA;
-	display: flex;
-	width: 100%;
+	border-left: 0.05rem solid #AAA;
+	border-bottom: 0.05rem solid #AAA;
 
-	&:last-child {
-		border-right: none;
+	&.two-columns {
+		grid-template-columns: auto auto;
 	}
 
-	> div {
+	> label {
 		display: flex;
 		align-items: center;
-		padding: 0.5rem;
-		box-sizing: border-box;
+		background: #DDD;
 
-		+ div {
-			border-left: 0.05rem solid #AAA;
+		.fa {
+			margin-left: 0.5rem;
+			margin-right: 1rem;
 		}
 	}
-}
 
-.flex.flex-responsive > .flex-item {
-	width: 50%;
-}
-
-.form-icon-flex {
-	background: #DDD;
-	width: 10%;
-	justify-content: center;
+	&-item,
+	> label {
+		padding: 0.5rem;
+		border-top: 0.05rem solid #AAA;
+		border-right: 0.05rem solid #AAA;
+	}
 }
 
-.form-label-flex {
-	background: #DDD;
-	width: 30%;
-	border-left: none !important;
-}
+.form-border-box {
+	border: 0.05rem solid #AAA;
 
-.form-field-flex {
-	width: 60%;
-}
+	&.padding {
+		padding: 0.5rem;
+	}
 
-.background {
-	background: #DDD;
-}
+	&.background {
+		background: #DDD;
+	}
 
-.flex-padding {
-	padding: 0.5rem;
-}
+	&.nobordertop {
+		border-top: none;
+	}
 
-.flex-direction-column {
-	flex-direction: column;
+	+.form-border-box {
+		border-top: none;
+	}
 }
 
 /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 # Form buttons
 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+#emoticon-list-wrapper {
+	display: flex;
+	width: 100%;
+	justify-content: center;
+	box-sizing: border-box;
+}
+
 #button-list-wrapper {
 	border-bottom: 0.05rem solid #AAA;
 	background: #EEE;
+	overflow: hidden;
 }
 
 .button-list {
@@ -641,6 +630,10 @@ form {
 #content-editor {
 	border: none;
 	margin: 0;
+
+	&-wrapper {
+		border-top: none;
+	}
 }
 
 /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
@@ -664,7 +657,7 @@ input, select, textarea {
 textarea {
 	font-family: "Kadwa", "sans-serif";
 	box-sizing: border-box;
-	display: inline-block;
+	display: block;
 	resize: vertical;
 	min-height: 15rem;
 	line-height: 1.2rem;