Fix extra clickable spaces for narrow screen

1 files changed, 64 insertions, 5 deletions

diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
index a14929af9..49d3c9873 100644
--- a/app/javascript/styles/components.scss
+++ b/app/javascript/styles/components.scss
@@ -421,18 +421,77 @@
   cursor: pointer;
 }
 
-// Extra clickable area in the status gutter
-@media screen and (min-width: 1024px) {
+// --- Extra clickable area in the status gutter ---
+.ui.wide {
+  @mixin xtraspaces-full {
+    height: calc(100% + 10px);
+    bottom: -40px;
+  }
+  @mixin xtraspaces-short {
+    height: calc(100% - 35px);
+    bottom: 0;
+  }
+
+  // Avi must go on top if the toot is too short
+  .status__avatar {
+    z-index: 10;
+  }
+
+  // Base styles
   .status__content--with-action > div::after {
     content: '';
     display: block;
-    width: 68px;
-    height: calc(100% + 10px);
+    width: 64px;
     position: absolute;
     left: -68px;
-    bottom: -40px;
+
+    // more than 4 never fit on FullHD, short
+    @include xtraspaces-short;
   }
+
+  @media screen and (min-width: 1800px) {
+    // 4, very wide screen
+    .column:nth-child(2):nth-last-child(4) {
+      &, & ~ .column {
+        .status__content--with-action > div::after {
+          @include xtraspaces-full;
+        }
+      }
+    }
+  }
+
+  // 1 or 2, always fit
+  .column:nth-child(2):nth-last-child(1),
+  .column:nth-child(2):nth-last-child(2),
+  .column:nth-child(2):nth-last-child(3) {
+    &, & ~ .column {
+      .status__content--with-action > div::after {
+        @include xtraspaces-full;
+      }
+    }
+  }
+
+  @media screen and (max-width: 1440px) {
+    // 3, small screen
+    .column:nth-child(2):nth-last-child(3) {
+      &, & ~ .column {
+        .status__content--with-action > div::after {
+          @include xtraspaces-short;
+        }
+      }
+    }
+  }
+
+  // Phone or iPad
+  @media screen and (max-width: 1060px) {
+    .status__content--with-action > div::after {
+      display: none;
+    }
+  }
+
+  // I am very sorry
 }
+// --- end extra clickable spaces ---
 
 .status__content,
 .reply-indicator__content {