From aa30d5903df46d75615f76a6dd3c837f9e7610f8 Mon Sep 17 00:00:00 2001
From: Ethan Dalool <git@voussoir.net>
Date: Tue, 13 Jun 2017 21:35:13 -0700
Subject: [PATCH] Don't clip editor_area bg when scrollbar appears.

Instead of applying the background-color to the holder, apply it to the editor
area and message area separately. Then they can flex differently so that
the editor always maintains full height, and the message area shrinks to
a minimum of 30px.
---
 .../etiquette_flask/templates/photo.html      | 24 ++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/frontends/etiquette_flask/templates/photo.html b/frontends/etiquette_flask/templates/photo.html
index 8d50d16..6aab491 100644
--- a/frontends/etiquette_flask/templates/photo.html
+++ b/frontends/etiquette_flask/templates/photo.html
@@ -32,18 +32,34 @@
     flex-direction: column;
 
     max-width: 300px;
-    padding: 8px;
+    /*padding: 8px;*/
 
-    background-color: rgba(0, 0, 0, 0.1);
 }
 #editor_area
 {
     flex: 3;
+    padding: 8px;
+
+    background-color: rgba(0, 0, 0, 0.1);
+
     word-wrap: break-word;
 }
+#message_area_bg
+{
+    display: flex;
+    flex: 0 1 100%;
+
+    height: 100%;
+    min-height: 30px;
+    padding: 8px;
+
+    background-color: rgba(0, 0, 0, 0.1);
+}
 #message_area
 {
     flex: auto;
+
+    max-height: none;
 }
 .photo_viewer
 {
@@ -200,7 +216,9 @@
         {% endif %}
         </ul>
     </div>
-    <div id="message_area">
+    <div id="message_area_bg">
+        <div id="message_area">
+        </div>
     </div>
     </div>
 </div>