[PATCH v4 1/9] patch-detail: left align message headers

[Raxel Gutierrez]

Change both of the message containers in the "Commit Message" and
"Comments" to have their content be left-aligned which improves the
proximity of items which boosts the efficiency of gathering information
and performing actions. Before [1] and after [2] images for reference.

[1] https://i.imgur.com/ji2ZINL.png
[2] https://i.imgur.com/Dtn8lm9.png

Signed-off-by: Raxel Gutierrez <raxel at google.com>
---
 htdocs/css/style.css                          | 12 ++++++----
 patchwork/templates/patchwork/submission.html | 23 ++++++++++---------
 2 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/htdocs/css/style.css b/htdocs/css/style.css
index f30988e0..a2a2e3c3 100644
--- a/htdocs/css/style.css
+++ b/htdocs/css/style.css
@@ -296,17 +296,19 @@ table.patch-meta tr th, table.patch-meta tr td {
     color: #f7977a;
 }
 
-.comment .meta {
+.submission-message .meta {
+    display: flex;
+    align-items: center;
     background: #f0f0f0;
     padding: 0.3em 0.5em;
 }
 
-.comment .content {
-    border: 0;
+.submission-message .message-date {
+    margin-left: 8px;
 }
 
-.patch .content {
-    padding: 1em;
+.submission-message .content {
+    border: 0;
 }
 
 .patch-pull-url {
diff --git a/patchwork/templates/patchwork/submission.html b/patchwork/templates/patchwork/submission.html
index 66efa0b5..36b15d0e 100644
--- a/patchwork/templates/patchwork/submission.html
+++ b/patchwork/templates/patchwork/submission.html
@@ -257,14 +257,14 @@
 {% else %}
 <h2>Message</h2>
 {% endif %}
-<div class="comment">
-<div class="meta">
- <span>{{ submission.submitter|personify:project }}</span>
- <span class="pull-right">{{ submission.date }} UTC</span>
-</div>
-<pre class="content">
-{{ submission|commentsyntax }}
-</pre>
+<div class="submission-message">
+  <div class="meta">
+    <span>{{ submission.submitter|personify:project }}</span>
+    <span class="message-date">{{ submission.date }} UTC</span>
+  </div>
+  <pre class="content">
+  {{ submission|commentsyntax }}
+  </pre>
 </div>
 
 {% for item in comments %}
@@ -273,11 +273,12 @@
 {% endif %}
 
 <a name="{{ item.id }}"></a>
-<div class="comment">
+<div class="submission-message">
 <div class="meta">
  <span>{{ item.submitter|personify:project }}</span>
- <span class="pull-right">{{ item.date }} UTC | <a href="{% url 'comment-redirect' comment_id=item.id %}"
-   >#{{ forloop.counter }}</a></span>
+ <span class="message-date">{{ item.date }} UTC |
+   <a href="{% url 'comment-redirect' comment_id=item.id %}">#{{ forloop.counter }}</a>
+  </span>
 </div>
 <pre class="content">
 {{ item|commentsyntax }}
-- 
2.33.0.rc2.250.ged5fa647cd-goog