From 4db940496dc638b1c7d31c64b1c150ee88749960 Mon Sep 17 00:00:00 2001
From: Isham Mahajan <mahajan.isham@gmail.com>
Date: Wed, 5 Jun 2019 19:12:47 +0530
Subject: [PATCH 1/3] css: Refactor padding rules for `message` elements.

As the title says. Padding for a `.loading` was also getting
affected, hence that has been repositioned along with its brethen as
well.
---
 src/webview/css/css.js | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/webview/css/css.js b/src/webview/css/css.js
index 82e86eefcbe..1438f7adc5b 100644
--- a/src/webview/css/css.js
+++ b/src/webview/css/css.js
@@ -21,6 +21,12 @@ body {
   width: 100%;
   max-width: 100%;
 }
+body > .message-full {
+  padding: 16px;
+}
+body > .message-brief {
+  padding: 0 16px 16px 80px;
+}
 a {
   color: hsl(200, 100%, 40%);
 }
@@ -100,12 +106,8 @@ hr {
 .loading {
   display: flex;
   word-wrap: break-word;
-  padding: 16px;
   -webkit-tap-highlight-color: transparent;
 }
-.message-brief {
-  padding: 0 16px 16px 80px;
-}
 .static-timestamp {
   color: hsl(0, 0%, 60%);
   font-size: 0.9rem;
@@ -237,6 +239,9 @@ hr {
   background: hsl(0, 0%, 27%);
   color: white;
 }
+.loading {
+  padding: 16px;
+}
 .loading-avatar {
   border-radius: 3px;
   background: hsla(0, 0%, 50%, 0.9);

From 16aedcf718e2ea801603b5b0fe8984521e15b6e8 Mon Sep 17 00:00:00 2001
From: Isham Mahajan <mahajan.isham@gmail.com>
Date: Tue, 18 Jun 2019 13:41:48 +0530
Subject: [PATCH 2/3] mentions: Fix highlight on mention extending
 disproportionately.

Mentions highlighting extends to the bottom and not at all at the
top. This commit fixes that, through some CSS which might be
confusing to a reader who is already familiar with the current
codebase.

Because of the changes made in this commit there are a few cases
where the design is not exactly the same as before this commit. One,
which `.message + .message-full` rule temporarily fixes, is where a
message-full directly follows any other message. (The bug' was that
there appears a loss of 24px of `padding-top`.)

Second, and third, are introduced at the extremes of the message
list. At the very top of the message list some extra padding exists
because the topmost element will always be a `timerow`. And, the
bottom most element will have a reduced padding -- because of the
fact that we're changing the bottom padding of all message elements
by 8px (16px -> 8px), and the bottom most element (which has
padding) will always be a messages.

Fixes #3513.
---
 src/webview/css/css.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/webview/css/css.js b/src/webview/css/css.js
index 1438f7adc5b..7e8f14ed957 100644
--- a/src/webview/css/css.js
+++ b/src/webview/css/css.js
@@ -21,11 +21,17 @@ body {
   width: 100%;
   max-width: 100%;
 }
+body > .timerow, body > .header {
+  margin: 8px 0;
+}
 body > .message-full {
-  padding: 16px;
+  padding: 8px 16px;
 }
 body > .message-brief {
-  padding: 0 16px 16px 80px;
+  padding: 8px 16px 8px 80px;
+}
+.message + .message-full {
+  padding-top: 24px;
 }
 a {
   color: hsl(200, 100%, 40%);

From 0f90e3ad3c254d2b0c5074dae17083e641710b65 Mon Sep 17 00:00:00 2001
From: Isham Mahajan <mahajan.isham@gmail.com>
Date: Thu, 6 Jun 2019 17:03:02 +0530
Subject: [PATCH 3/3] css: Remove extra spacing between two message-fulls.

When two message-full objects come adjacent to one another, the
distance between them becomes 3rem, which is not desirable at all.

This commit removes some of the code produced in the parent commit
which was written in order to keep things consistent and not change
the design of the webview too much in one commit. The removed code
used to add extra padding to make the total 3rem.
---
 src/webview/css/css.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/webview/css/css.js b/src/webview/css/css.js
index 7e8f14ed957..5350ed325c1 100644
--- a/src/webview/css/css.js
+++ b/src/webview/css/css.js
@@ -30,9 +30,6 @@ body > .message-full {
 body > .message-brief {
   padding: 8px 16px 8px 80px;
 }
-.message + .message-full {
-  padding-top: 24px;
-}
 a {
   color: hsl(200, 100%, 40%);
 }