From da395c5634a513488ae2122a09e487bbe4de1976 Mon Sep 17 00:00:00 2001
From: Thomas Ruoff <ThomasRuoff@gmail.com>
Date: Thu, 24 Dec 2020 00:47:25 +0100
Subject: [PATCH] improve date select

---
 components/wizard/dateSelect.tsx | 60 +++++++++++++++++---------------
 1 file changed, 31 insertions(+), 29 deletions(-)

diff --git a/components/wizard/dateSelect.tsx b/components/wizard/dateSelect.tsx
index d9b210a..b8352ba 100644
--- a/components/wizard/dateSelect.tsx
+++ b/components/wizard/dateSelect.tsx
@@ -16,36 +16,38 @@ export default function DateSelect() {
           start={startDate}
           end={endDate}
           onChange={onChange}
-          className="m-6"
+          className="my-6 max-w-lg"
         />
-        <div className="inline-block mr-6">
-          <label className="flabel inline-block w-6 mr-3" htmlFor="startDate">
-            Von
-          </label>
-          <input
-            required
-            type="date"
-            className="input-text"
-            name="startDate"
-            value={startDate || ''}
-            onChange={onChangeEvent}
-            min={today}
-          />
-        </div>
-        <div className="inline-block">
-          <label className="flabel inline-block w-6 mr-3" htmlFor="endDate">
-            Bis
-          </label>
-          <input
-            required
-            type="date"
-            className="input-text"
-            name="endDate"
-            value={endDate || ''}
-            placeholder="Von"
-            onChange={onChangeEvent}
-            min={startDate || today}
-          />
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+          <div className="">
+            <label className="flabel inline-block mr-3" htmlFor="startDate">
+              Von
+            </label>
+            <input
+              required
+              type="date"
+              className="input-text"
+              name="startDate"
+              value={startDate || ''}
+              onChange={onChangeEvent}
+              min={today}
+            />
+          </div>
+          <div className="">
+            <label className="flabel inline-block mr-3" htmlFor="endDate">
+              Bis
+            </label>
+            <input
+              required
+              type="date"
+              className="input-text"
+              name="endDate"
+              value={endDate || ''}
+              placeholder="Von"
+              onChange={onChangeEvent}
+              min={startDate || today}
+            />
+          </div>
         </div>
       </InputWrapper>
     </>