about summary refs log tree commit diff
path: root/app/javascript/flavours/glitch/styles
diff options
context:
space:
mode:
authorThibaut Girka <thib@sitedethib.com>2019-01-20 11:52:06 +0100
committerThibaut Girka <thib@sitedethib.com>2019-01-20 11:52:06 +0100
commita93cb340bd1f7ce6f42943024a4a3431f5671b14 (patch)
tree9d884057b0cbb3076a90af85763909b0ca23e29e /app/javascript/flavours/glitch/styles
parent8001a9b97bded0329f91397f2316328a8ba0d97a (diff)
[Glitch] Fix new hashtag page's items not being full-width on mobile
Port b506ce119766bb3308f934e2d3de143b3ac6f5ad to glitch-soc
Diffstat (limited to 'app/javascript/flavours/glitch/styles')
-rw-r--r--app/javascript/flavours/glitch/styles/containers.scss2
-rw-r--r--app/javascript/flavours/glitch/styles/widgets.scss10
2 files changed, 10 insertions, 2 deletions
diff --git a/app/javascript/flavours/glitch/styles/containers.scss b/app/javascript/flavours/glitch/styles/containers.scss
index 82d4050d7..fd334f869 100644
--- a/app/javascript/flavours/glitch/styles/containers.scss
+++ b/app/javascript/flavours/glitch/styles/containers.scss
@@ -297,7 +297,7 @@
         color: $primary-text-color;
       }
 
-      @media screen and (max-width: $no-gap-breakpoint) {
+      @media screen and (max-width: 550px) {
         &.optional {
           display: none;
         }
diff --git a/app/javascript/flavours/glitch/styles/widgets.scss b/app/javascript/flavours/glitch/styles/widgets.scss
index 0699900dc..c97337e4e 100644
--- a/app/javascript/flavours/glitch/styles/widgets.scss
+++ b/app/javascript/flavours/glitch/styles/widgets.scss
@@ -432,6 +432,10 @@ $fluid-breakpoint: $maximum-width + 20px;
 .statuses-grid {
   min-height: 600px;
 
+  @media screen and (max-width: 640px) {
+    width: 100% !important; // Masonry layout is unnecessary at this width
+  }
+
   &__item {
     width: (960px - 20px) / 3;
 
@@ -439,6 +443,10 @@ $fluid-breakpoint: $maximum-width + 20px;
       width: (940px - 20px) / 3;
     }
 
+    @media screen and (max-width: 640px) {
+      width: 100%;
+    }
+
     @media screen and (max-width: $no-gap-breakpoint) {
       width: 100vw;
     }
@@ -448,7 +456,7 @@ $fluid-breakpoint: $maximum-width + 20px;
     border-radius: 4px;
 
     @media screen and (max-width: $no-gap-breakpoint) {
-      border-bottom: 1px solid lighten($ui-base-color, 12%);
+      border-top: 1px solid lighten($ui-base-color, 16%);
     }
 
     &.compact {