From 0e65d6e9198a300d97198ed6c2f15c10cc1e0249 Mon Sep 17 00:00:00 2001
From: Patrick Gebhardt <pjgebhardt@icloud.com>
Date: Tue, 23 Jun 2020 23:33:22 +0200
Subject: [PATCH] Fix search layout

---
 .../components/search-input/search-input.component.html   | 4 ++--
 .../components/search-input/search-input.component.scss   | 8 +++++++-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/components/search-input/search-input.component.html b/frontend/src/app/components/search-input/search-input.component.html
index ba983a0..ee2fedb 100644
--- a/frontend/src/app/components/search-input/search-input.component.html
+++ b/frontend/src/app/components/search-input/search-input.component.html
@@ -53,7 +53,7 @@
       <!--   Date   -->
       <section class="group">
         <span class="title">Date</span>
-        <div class=" content vertical-wrap">
+        <div class="content vertical-wrap">
           <mat-form-field appearance="outline">
             <mat-label>Start</mat-label>
             <input (change)="checkDates()" [(ngModel)]="from" [min]="today" matInput required type="date">
@@ -68,7 +68,7 @@
       <section class="group">
         <span class="title">Text</span>
         <div class="content vertical-wrap">
-          <mat-form-field class="text-input">
+          <mat-form-field appearance="outline" class="text-input">
             <mat-label>Text search</mat-label>
             <input [(ngModel)]="textFilter" matInput>
             <button (click)="textFilter = ''" *ngIf="textFilter.length" mat-icon-button matSuffix>
diff --git a/frontend/src/app/components/search-input/search-input.component.scss b/frontend/src/app/components/search-input/search-input.component.scss
index 817a977..ae6c41d 100644
--- a/frontend/src/app/components/search-input/search-input.component.scss
+++ b/frontend/src/app/components/search-input/search-input.component.scss
@@ -68,6 +68,12 @@
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  justify-content: space-around;
+  justify-content: space-between;
+  align-items: center;
+
+  > * {
+    width: 45%;
+    min-width: 15rem;
+  }
 }