Use grid instead of flexbox for message_area for better gaps.

frontends/etiquette_flask/static/css/common.css

@@ -201,17 +201,26 @@ button:active
 
 #message_area
 {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+    display: grid;
+    grid-auto-flow: row;
+    grid-auto-rows: min-content;
+    grid-gap: 8px;
+    padding: 8px;
     overflow-y: auto;
     background-color: var(--color_transparency);
 }
+#message_area > :last-child
+{
+    /*
+    For some reason, the message_area's 8px padding doesn't apply to the bottom
+    when the container is scrolled.
+    */
+    margin-bottom: 8px;
+}
+
 .message_bubble
 {
-    width: 80%;
-    margin: 4px;
-
+    padding: 2px;
     word-wrap: break-word;
 }
 .message_bubble *

frontends/etiquette_flask/templates/photo.html

@@ -56,8 +56,6 @@
 }
 #message_area
 {
-    display: flex;
-
     min-height: 30px;
     max-height: none;
     margin: 8px;