From adfe4cacc6107e209fb1c6e5151971af44f94c1b Mon Sep 17 00:00:00 2001
From: Sumanth V Rao <sumanthvrao@gmail.com>
Date: Thu, 27 Aug 2020 09:03:56 +0530
Subject: [PATCH] css: Add vertical scrollbar styling for view-source textarea.

This styles the vertical scrollbar similar to the horizontal
one for <pre/> (which can be seen in narrow windows). Strictly
speaking, this change shouldn't go in rendered_markdown.scss, but
placing it there helps unify the two scrollbar stylings rather than
duplicating them.
---
 static/styles/rendered_markdown.css | 32 ++++++++++++++++-------------
 1 file changed, 18 insertions(+), 14 deletions(-)

diff --git a/static/styles/rendered_markdown.css b/static/styles/rendered_markdown.css
index 5e92c3adf7..95b3cdc2aa 100644
--- a/static/styles/rendered_markdown.css
+++ b/static/styles/rendered_markdown.css
@@ -563,22 +563,26 @@ pre {
     white-space: inherit;
 }
 
-/* Ensure the horizontal scrollbar is visible on Mac */
-pre::-webkit-scrollbar {
-    height: 8px;
+/* Both the horizontal scrollbar in <pre/> as well as
+   vertical scrollbar in the <textarea/> is styled similarly. */
+#message_edit_form textarea,
+pre {
+    /* Ensure the horizontal scrollbar is visible on Mac */
+    &::-webkit-scrollbar {
+        height: 8px;
+        width: 10px;
+        background-color: hsla(0, 0%, 0%, 0.05);
+    }
 
-    background-color: hsla(0, 0%, 0%, 0.05);
-}
+    &::-webkit-scrollbar-thumb {
+        background-color: hsla(0, 0%, 0%, 0.3);
+        border-radius: 20px;
+        transition: all 0.2s ease;
+    }
 
-pre::-webkit-scrollbar-thumb {
-    background-color: hsla(0, 0%, 0%, 0.3);
-    border-radius: 20px;
-
-    transition: all 0.2s ease;
-}
-
-pre::-webkit-scrollbar-thumb:hover {
-    background-color: hsla(0, 0%, 0%, 0.6);
+    &::-webkit-scrollbar-thumb:hover {
+        background-color: hsla(0, 0%, 0%, 0.6);
+    }
 }
 
 pre code {