Fixes to drawer and CWs

app/javascript/flavours/glitch/features/drawer/index.js

@@ -73,14 +73,11 @@ class Drawer extends React.Component {
       searchValue,
       submitted,
     } = this.props;
-
+    const computedClass = classNames('drawer', `mbstobon-${elefriend}`);
-    let innerDrawerAttrs = {
-      className: classNames('drawer--inner', 'mbstobon-' + elefriend),
-    };
 
     //  The result.
     return (
-      <div className='drawer'>
+      <div className={computedClass}>
         {multiColumn ? (
           <DrawerHeader
             columns={columns}
@@ -99,10 +96,8 @@ class Drawer extends React.Component {
         />
         <div className='contents'>
           <DrawerAccount account={account} />
-          <div {...innerDrawerAttrs}>
           <Composer />
           {multiColumn && <button className='mastodon' onClick={onClickElefriend} />}
-          </div>
           <DrawerResults
             results={results}
             visible={submitted && !searchHidden}

app/javascript/flavours/glitch/styles/components/drawer.scss

@@ -40,7 +40,9 @@
   .react-swipeable-view-container & { height: 100% }
 
   & > .contents {
+    display: flex;
     position: relative;
+    flex-direction: column;
     padding: 0;
     width: 100%;
     height: 100%;
@@ -48,22 +50,8 @@
     overflow-x: hidden;
     overflow-y: auto;
     contain: strict;
-  }
-
-  .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 {
+    & > .mastodon {
       flex: 1;
       border: none;
       cursor: inherit;
@@ -71,14 +59,14 @@
   }
 
   @for $i from 0 through 3 {
-    .drawer--inner.mbstobon-#{$i} {
+    &.mbstobon-#{$i} > .contents {
       @if $i == 3 {
-        background: lighten($ui-base-color, 13%) url('~flavours/glitch/images/wave-drawer.png') no-repeat bottom / 100% auto;
+        background: url('~flavours/glitch/images/wave-drawer.png') no-repeat bottom / 100% auto, lighten($ui-base-color, 13%);
       } @else {
-        background: lighten($ui-base-color, 13%) url('~flavours/glitch/images/wave-drawer-glitched.png') no-repeat bottom / 100% auto;
+        background: url('~flavours/glitch/images/wave-drawer-glitched.png') no-repeat bottom / 100% auto, lighten($ui-base-color, 13%);
       }
 
-      .mastodon {
+      & > .mastodon {
         background: url("~flavours/glitch/images/mbstobon-ui-#{$i}.png") no-repeat left bottom / contain;
 
         @if $i != 3 {

app/javascript/flavours/glitch/styles/components/status.scss

@@ -12,21 +12,12 @@
   word-wrap: break-word;
   font-weight: 400;
   overflow: visible;
-  white-space: pre-wrap;
   padding-top: 5px;
 
   &:focus {
     outline: 0;
   }
 
-  &.status__content--with-spoiler {
-    white-space: normal;
-
-    .status__content__text {
-      white-space: pre-wrap;
-    }
-  }
-
   .emojione {
     width: 20px;
     height: 20px;
@@ -35,6 +26,7 @@
 
   p {
     margin-bottom: 20px;
+    white-space: pre-wrap;
 
     &:last-child {
       margin-bottom: 0;
@@ -69,11 +61,10 @@
   }
 
   .status__content__spoiler {
-    background: lighten($ui-base-color, 30%);
+    display: none;
 
-    &:hover {
+    &.status__content__spoiler--visible {
-      background: lighten($ui-base-color, 33%);
+      display: block;
-      text-decoration: none;
     }
   }
 
@@ -85,14 +76,6 @@
       text-decoration: none;
     }
   }
-
-  .status__content__text {
-    display: none;
-
-    &.status__content__spoiler--visible {
-      display: block;
-    }
-  }
 }
 
 .status__content__spoiler-link {