responsive stream 🆒

Author: ckj

src/sentry/static/sentry/less/sentry.less

@@ -2550,3 +2550,92 @@ table.integrations {
   box-shadow: none;
   background: #fff;
 }
+
+/* Small screens */
+
+@media(max-width:767px){
+
+  header {
+    padding: 15px 0 13px;
+
+    .icon-sentry-logo {
+      font-size: 16px;
+      padding-top: 3px;
+    }
+
+    .dropdown, .project-dropdown {
+      position: static;
+      padding-top: 3px;
+
+      .team-name {
+        font-size: 14px;
+      }
+
+      .dropdown-menu {
+        width: auto;
+        left: 0;
+        right: 0;
+        top: 40px;
+        border-radius: 0;
+        max-height: 9999px;
+        overflow-x: hidden;
+
+        ul li {
+          width: 100%;
+          font-size: 16px;
+          margin: 0;
+
+          a {
+            padding: 10px 20px;
+            left: 0;
+            margin-left: -20px;
+            margin-right: -20px;
+          }
+        }
+      }
+    }
+  }
+
+  /* Stream */
+
+  .primary-filters {
+    padding-right: 15px;
+    margin-bottom: 10px;
+  }
+  .search {
+    margin-bottom: -5px;
+    .search-input {
+      font-size: 12px;
+      line-height: 22px;
+    }
+  }
+
+  .group-header-container {
+    margin-left: -15px;
+    margin-right: -15px;
+    .container {
+      left: 0;
+      margin: 0;
+      padding: 0
+    }
+    &.affix {
+      padding-left: 15px;
+      padding-right: 0;
+    }
+  }
+
+  .group-list, .events {
+    display: block;
+    width: auto;
+    margin-left: -15px;
+    margin-right: -15px;
+
+    li.group {
+      display: block;
+
+      .event-cell {
+        display: block;
+      }
+    }
+  }
+}

src/sentry/templates/sentry/groups/group_list.html

@@ -24,7 +24,7 @@
                 <a href="#" class="btn btn-default btn-sm"><span class="icon icon-bookmark"></span></a>
             </div>
             <div class="btn-group">
-                <a class="btn btn-default btn-sm" data-action="pause" data-pause-label="{% trans "Updates are paused. Click to enable." %}" data-play-label="{% trans "Updates are live. Click to pause." %}" href="https://github.com/%3Cspan%20class="pl-s">javascript:void(0)">
+                <a class="btn btn-default btn-sm hidden-xs" data-action="pause" data-pause-label="{% trans "Updates are paused. Click to enable." %}" data-play-label="{% trans "Updates are live. Click to pause." %}" href="https://github.com/%3Cspan%20class="pl-s">javascript:void(0)">
                     <span class="icon icon-pause"></span>
                 </a>
             </div>
@@ -129,7 +129,7 @@ <h3><a href="<% group.permalink %>"><% group.title %></a></h3>
                   &middot; <time time-since="group.firstSeen"></time>
               </div>
             </div>
-            <div class="event-assignee event-cell">
+            <div class="event-assignee event-cell hidden-xs">
                 <assignee-selector></assignee-selector>
             </div>
             <div class="hidden-sm hidden-xs event-graph align-right event-cell">