Add the shrinking glitchy elefriend. #294.

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 c8eabb4f3..ba56f1a30 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 423141aec..75b5d6b04 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;
+        }
+      }
     }
   }
 }