style error message better

components/wizard/index.tsx

@@ -73,14 +73,12 @@ function WizardInternal() {
         <DateSelect />
         <Reason />
         <Contact />
-        <div>
+        <div className="flex items-end">
           <button type="submit" disabled={postData} className="btn btn-blue">
             {postData ? 'Speichern...' : 'Absenden'}
           </button>
           {postDataError && (
-            <div className="error-message">
-              <strong>Error:</strong> {postDataError}
-            </div>
+            <div className="error-message flex-grow">{postDataError}</div>
           )}
         </div>
       </form>

styles/index.css

@@ -112,8 +112,12 @@
 }
 
 .error-message {
-  @apply inline-block bg-red-200 border-solid border-2 border-red-700 rounded text-red-700 py-1 px-2;
-  max-width: 10rem;
+  @apply flex items-center bg-red-200 border-solid border border-red-700 rounded text-red-700 py-2 px-3;
+}
+
+.error-message:before {
+  @apply mr-2;
+  content: '\274c';
 }
 
 .Calendar-grid {