From 1e0b7070185b748e27a301acfc325bfb38be7b31 Mon Sep 17 00:00:00 2001
From: David Yip <yipdw@member.fsf.org>
Date: Sat, 13 Jan 2018 11:41:06 -0600
Subject: [PATCH] Add the shrinking glitchy elefriend.  #294.

---
 .../flavours/glitch/features/drawer/index.js  |  7 ++++--
 .../glitch/styles/components/drawer.scss      | 24 ++++++++++++++++---
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/app/javascript/flavours/glitch/features/drawer/index.js b/app/javascript/flavours/glitch/features/drawer/index.js
index c8eabb4f3a..ba56f1a30c 100644
--- a/app/javascript/flavours/glitch/features/drawer/index.js
+++ b/app/javascript/flavours/glitch/features/drawer/index.js
@@ -94,9 +94,12 @@ class Drawer extends React.Component {
           submitted={submitted}
           value={searchValue}
         />
-        <div {...drawerAttrs}>
+        <div className='contents'>
           <DrawerAccount account={account} />
-          <Composer />
+          <div className='drawer__inner'>
+            <Composer />
+            {multiColumn && <div className="mastodon mbstobon-bg-1" />}
+          </div>
           <DrawerResults
             results={results}
             visible={submitted && !searchHidden}
diff --git a/app/javascript/flavours/glitch/styles/components/drawer.scss b/app/javascript/flavours/glitch/styles/components/drawer.scss
index 423141aecf..75b5d6b041 100644
--- a/app/javascript/flavours/glitch/styles/components/drawer.scss
+++ b/app/javascript/flavours/glitch/styles/components/drawer.scss
@@ -50,9 +50,27 @@
     contain: strict;
   }
 
-  @for $i from 1 through 3 {
-    .mbstobon-bg-#{$i} {
-      background: url("~flavours/glitch/images/mbstobon-ui-#{$i}.png") no-repeat left bottom / contain;
+  .drawer__inner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    box-sizing: border-box;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    overflow-y: auto;
+    width: 100%;
+    height: 100%;
+
+    .mastodon {
+      flex: 1;
+
+      @for $i from 1 through 3 {
+        &.mbstobon-bg-#{$i} {
+          background: url("~flavours/glitch/images/mbstobon-ui-#{$i}.png") no-repeat left bottom / contain;
+        }
+      }
     }
   }
 }