Improve edit profile and add comment styling

static/styles.css

@@ -229,6 +229,13 @@ nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after
 .form.post-form {
   border: none;
 }
+.form.edit-profile-form {
+  white-space: normal;
+}
+.form.edit-profile-form label {
+  min-width: 5em;
+  font-weight: 600;
+}
 .form button {
   margin: 0.3em auto;
   text-align: center;
@@ -269,6 +276,29 @@ nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after
 .post-box .post-comments .post-comment.add-comment {
   border: 0;
 }
+.post-box .post-comments .post-comment.add-comment form {
+  border: 0;
+  padding: 0;
+}
+.post-box .post-comments .post-comment.add-comment form input {
+  font-size: 0.8rem;
+  margin: 0;
+  padding: 3px;
+  border: #ccc 1px solid;
+  line-height: 1.3;
+}
+.post-box .post-comments .post-comment.add-comment form input[type=submit] {
+  width: auto;
+  border-left: 0;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.post-box .post-comments .post-comment.add-comment form input[type=text] {
+  width: 13em;
+  border-right: 0;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
 .post-box .post-comments .post-comment.add-comment button {
   margin-left: 0.8em;
   width: fit-content;

static/styles.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EAOE;;AALA;EAEE;;;AASJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;;;AAKJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIA;EACE;EACA;;AAEA;EACE;;AAEA;EACE;;;AAMR;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAIA;EACE;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;;;AAMF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;EACA;;;AAMR;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;;AAIJ;EAEE;EACA;EACA;;;AAMR;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAKN;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EAME;EACA;EACA;EAEA;EACA;EACA;;AAXA;EACE;;;AAcN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;;AAGF;EACE","file":"styles.css"}
+{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EAOE;;AALA;EAEE;;;AASJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;;;AAKJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIA;EACE;EACA;;AAEA;EACE;;AAEA;EACE;;;AAMR;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAIA;EACE;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;;;AAMF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;EACA;;;AAMR;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAKN;EACE;EACA;;AAIJ;EAEE;EACA;EACA;;;AAMR;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAKN;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EAME;EACA;EACA;EAEA;EACA;EACA;;AAXA;EACE;;;AAcN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;;AAGF;EACE","file":"styles.css"}

static/styles.scss

@@ -271,6 +271,15 @@ nav, footer {
     border: none;
   }
 
+  &.edit-profile-form {
+    white-space: normal;
+
+    label {
+      min-width: 5em;
+      font-weight: 600;
+    }
+  }
+
   button {
     margin: 0.3em auto;
     text-align: center;
@@ -315,6 +324,33 @@ nav, footer {
       &.add-comment {
         border: 0;
 
+        form {
+          border: 0;
+          padding: 0;
+
+          input {
+            font-size: 0.8rem;
+            margin: 0;
+            padding: 3px;
+            border: #ccc 1px solid;;
+            line-height: 1.3;
+
+            &[type=submit] {
+              width: auto;
+              border-left: 0;
+              border-top-left-radius: 0;
+              border-bottom-left-radius: 0;
+            }
+
+            &[type=text] {
+              width: 13em;
+              border-right: 0;
+              border-top-right-radius: 0;
+              border-bottom-right-radius: 0;
+            }
+          }
+        }
+
         button {
           margin-left: 0.8em;
           width: fit-content;

templates/pages/post.html

@@ -12,8 +12,7 @@
                 <div class="post-comment add-comment">
                     <form method="POST" action="{{ url_for('forms.add_comment', post_id=post.id) }}">
                         {{ form.csrf_token }}
-                        {{ form.text }}
+                        {{ form.text }}<input type=submit value="Add Comment">
-                        <input type=submit value="Add Comment">
                     </form>
                 </div>
             {% endif %}

templates/pages/user_edit.html

@@ -3,7 +3,7 @@
 
 {% block content %}
     <h3>Edit Profile</h3>
-    <form method="POST" class="form">
+    <form method="POST" class="form edit-profile-form">
         {{ form.csrf_token }}
         {{ render_field(form.name) }}
         {{ render_field(form.about_me) }}