Make button styles next to input more consistent

files/style/be.bastelstu.chat.scss

@@ -57,6 +57,7 @@ $chatEmbedMaxWidth: 400px;
 		}
 
 		#content {
+			margin-left: 20px;
 			width: auto !important;
 		}
 
@@ -383,6 +384,20 @@ $chatEmbedMaxWidth: 400px;
 				flex-grow: 0;
 				flex-shrink: 0;
 				margin-right: 5px;
+
+				.icon16 {
+					display: none;
+				}
+
+				@include screen-lg {
+					.icon16 {
+						display: inline-block;
+					}
+
+					.icon24 {
+						display: none;
+					}
+				}
 			}
 
 			> div.chatInputWrapper {

files_wcf/js/Bastelstu.be/Chat/Ui/Settings/SmiliesButton.js

@@ -63,7 +63,7 @@ define([ './ToggleButton'
 		 */
 		setupMobile() {
 			this.shadowToggleButton = document.createElement('span')
-			this.shadowToggleButton.classList.add('smiliesToggleMobileButton')
+			this.shadowToggleButton.classList.add('smiliesToggleMobileButton', 'button', 'small')
 			this.shadowToggleButton.innerHTML = '<span class="icon icon24 fa-smile-o"></span>'
 			this.shadowToggleButton.addEventListener('mousedown', this.onClick.bind(this))
 

templates/room.tpl

@@ -58,6 +58,7 @@
 			<div class="chatAttachButton">
 				<span id="chatAttachmentUploadButton" class="button small" title="{lang}wcf.attachment.attachments{/lang}">
 					<span class="icon icon16 fa-paperclip"></span>
+					<span class="icon icon24 fa-paperclip"></span>
 				</span>
 			</div>
 		{/if}