From d78bf6b36610458302b055f30a988b31e9bc9458 Mon Sep 17 00:00:00 2001
From: Stubenhocker1399 <Stubenhocker1399@gmail.com>
Date: Wed, 11 Sep 2019 14:24:53 +0200
Subject: [PATCH] Fix filter bar on mobile & slim layout

---
 .../components/shared/chat-log/chat-log.pug   |  2 +-
 .../components/shared/chat-log/chat-log.scss  | 19 +++++++++++++++----
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/ts/components/shared/chat-log/chat-log.pug b/src/ts/components/shared/chat-log/chat-log.pug
index ba43e59..a69607d 100644
--- a/src/ts/components/shared/chat-log/chat-log.pug
+++ b/src/ts/components/shared/chat-log/chat-log.pug
@@ -13,7 +13,7 @@
 				| Party
 			a.link-plain.chat-log-tab(#whisperTab tabindex (click)="switchTab('whisper')")
 				| Whisper
-			a.link-plain.chat-log-tab([style.background-color]="filterColor" (click)="focus()")
+			a.link-plain.chat-log-tab.chat-log-filter-tab([style.background-color]="filterColor" (click)="focus()")
 				fa-icon.search-icon([icon]="searchIcon")
 				input.chat-log-filter(#filterInput type="text" (keyup.enter)="(unFocus())" (keyup.esc)="(unFocus())" [placeholder]="'Filter'" (keyup)="filterChat()")
 		.chat-log-scroll-outer()
diff --git a/src/ts/components/shared/chat-log/chat-log.scss b/src/ts/components/shared/chat-log/chat-log.scss
index 398cc7b..084592e 100644
--- a/src/ts/components/shared/chat-log/chat-log.scss
+++ b/src/ts/components/shared/chat-log/chat-log.scss
@@ -160,17 +160,27 @@ $resizer-offset: $resizer-size / 2;
 }
 
 .search-icon {
-	padding-right: 5px;
+	position: relative;
+	float: left;
+	width: 0;
+	bottom: -1px;
+	left: 0;
+    z-index: 2;
+}
+
+.chat-log-filter-tab {
+	width: 100px;
 }
 
 .chat-log-filter {
 	padding-bottom: 5px;
 	border: none;
-	width: 100px;
 	background-color: rgba(0, 0, 0, 0);
 	border: none;
 	outline: none;
-    color: white;
+	color: white;
+	padding-left: 20px;
+	width: 100%;
 }
 
 .chat-log-filter::-webkit-input-placeholder {
@@ -200,11 +210,12 @@ $resizer-offset: $resizer-size / 2;
 }
 
 @media only screen and (max-width: 360px) {
-	.chat-log-filter {
+	.chat-log-filter-tab  {
 		position: absolute;
 		left: 0;
 		bottom: 35px;
 		width: 100%;
+		width: calc(100% - 10px);
 		border-radius: 2px;
 	}
 }