fix: form buttons in title component

diff --git a/src/app/title/title.component.css b/src/app/title/title.component.css
index 96fb0bae0bad2fec9afb27675df241884e80fee3..e387a15f800f416008f5c628dc371020882fc1b0 100644 (file)
--- a/src/app/title/title.component.css
+++ b/src/app/title/title.component.css
@@ -21,18 +21,17 @@
 .form {
        display: flex;
        flex-direction: column;
-       align-items: center;
-       margin: 0.5em;
-}
-
-.form label {
-       display: block;
+       justify-content: center;
        margin: 0.5em 0;
 }
 
 .form input {
-       display: block;
-       width: 95%;
+       margin-bottom: 0.5em;
+}
+
+.form label {
+       align-self: center;
+       margin: 0.5em 0;
 }
 
 h1 {
@@ -55,18 +54,24 @@ h1 {
 
        .form {
                flex-direction: row;
-               justify-content: center;
+               justify-content: flex-start;
+               margin: 0.5em;
        }
 
        .form label {
-               margin-right: 0.5em;
+               flex-basis: 5%;
+               margin: 0 0.5em 0 0;
        }
 
        .form input {
-               margin-right: 0.5em;
+               flex-basis: 75%;
+               margin: 0 0.5em 0 0;
        }
 
-       .form
+       .form .button {
+               flex-basis: 20%;
+               margin: 0;
+       }
 
        h1 {
                margin: 1em 0.2em;