From e19a617de1c2b3102291d885be5d08bf9388ccbc Mon Sep 17 00:00:00 2001
From: shpuld <shp@cock.li>
Date: Mon, 13 Nov 2017 18:39:27 +0200
Subject: [PATCH 1/2] Add a scrollbar for tall spammy posts.

---
 src/components/status/status.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 84397bfa..6ebc36e9 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -190,6 +190,10 @@
 
      .status-content {
          margin: 3px 15px 4px 0;
+         max-height: 400px;
+         overflow-y: auto;
+         overflow-x: hidden;
+         
          img, video {
            max-width: 100%;
            max-height: 400px;

From a169abcec25a85e0104cd00ef0db10939ef5d6fc Mon Sep 17 00:00:00 2001
From: shpuld <shp@cock.li>
Date: Mon, 13 Nov 2017 19:23:43 +0200
Subject: [PATCH 2/2] Give tall notifications either a scrollbar (mentions), or
 just cap them and use a cool hider (fav/rt).

---
 src/components/notifications/notifications.js |  5 +++++
 .../notifications/notifications.scss          | 20 +++++++++++++++++++
 .../notifications/notifications.vue           |  6 ++++--
 3 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index c0c86c68..5f0d7f26 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -23,6 +23,11 @@ const Notifications = {
     },
     unseenCount () {
       return this.unseenNotifications.length
+    },
+    hiderStyle () {
+      return {
+        background: `linear-gradient(to bottom, rgba(0, 0, 0, 0), ${this.$store.state.config.colors['base00']} 80%)`
+      }
     }
   },
   components: {
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 84dd36fa..db7b0843 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -44,6 +44,8 @@
       min-width: 0px;
       word-wrap: break-word;
       line-height:18px;
+      position: relative;
+      overflow: hidden;
 
       .icon-retweet.lit {
         color: $green;
@@ -57,6 +59,11 @@
         color: $blue;
       }
 
+      .status-content {
+        margin: 0;
+        max-height: 300px;
+      }
+
       h1 {
         word-break: break-all;
         margin: 0 0 0.3em;
@@ -89,6 +96,19 @@
     }
   }
 
+  .notification-content {
+    max-height: 12em;
+    overflow-y: hidden;
+    //text-overflow: ellipsis;
+  }
+
+  .notification-gradient {
+    position: absolute;
+    width: 100%;
+    height: 4em;
+    margin-top:8em;
+  }
+
   .unseen {
     border-left: 4px solid rgba(255, 16, 8, 0.75);
     padding-left: 6px;
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index dfc7b0c9..1e5f6975 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -20,7 +20,8 @@
                 <i class="fa icon-star"></i>
                 <small><router-link :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small>
               </h1>
-            <div v-html="notification.status.statusnet_html"></div>
+              <div class="notification-gradient" :style="hiderStyle"></div>
+              <div class="notification-content" v-html="notification.status.statusnet_html"></div>
             </div>
             <div v-if="notification.type === 'repeat'">
               <h1>
@@ -28,7 +29,8 @@
                 <i class="fa icon-retweet lit"></i>
                 <small><router-link :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small>
               </h1>
-            <div v-html="notification.status.statusnet_html"></div>
+              <div class="notification-gradient" :style="hiderStyle"></div>
+              <div class="notification-content" v-html="notification.status.statusnet_html"></div>
             </div>
             <div v-if="notification.type === 'mention'">
               <h1>