Fix most pages on small screens

app/assets/stylesheets/about.scss

@@ -3,7 +3,7 @@
 
 .about-body {
   .wrapper {
-    width: 600px;
+    max-width: 600px;
     margin: 0 auto;
     color: #9baec8;
     padding-top: 200px;
@@ -38,4 +38,10 @@
     font: 16px/16px 'Montserrat', sans-serif;
     font-weight: 300;
   }
+
+  @media screen and (max-width: 360px) {
+    .wrapper {
+      padding: 20px;
+    }
+  }
 }

app/assets/stylesheets/accounts.scss

@@ -63,6 +63,13 @@
     margin-top: 30px;
     position: relative;
     z-index: 2;
+    flex-direction: row;
+  }
+
+  .details-counters {
+    display: flex;
+    flex-direction: row;
+    order: 0;
   }
 
   .counter {
@@ -129,6 +136,26 @@
     line-height: 18px;
     padding: 5px 10px;
     color: #d9e1e8;
+    order: 1;
+  }
+
+  @media screen and (max-width: 360px) {
+    .details {
+      display: block;
+    }
+
+    .bio {
+      text-align: center;
+      margin-bottom: 20px;
+    }
+
+    .counter {
+      flex: 1 1 auto;
+    }
+
+    .counter:last-child {
+      border-right: none;
+    }
   }
 }
 
@@ -186,6 +213,18 @@
     cursor: default;
     color: lighten(#282c37, 10%);
   }
+
+  @media screen and (max-width: 360px) {
+    padding: 30px 20px;
+
+    a, .current, .next_page, .previous_page, .gap {
+      display: none;
+    }
+
+    .next_page, .previous_page {
+      display: inline-block;
+    }
+  }
 }
 
 .accounts-grid {

app/assets/stylesheets/application.scss

@@ -69,7 +69,6 @@ body {
   padding-bottom: 140px;
   text-rendering: optimizelegibility;
   font-feature-settings: "kern";
-  min-width: 380px;
 
   &.app-body {
     position: fixed;
@@ -77,6 +76,10 @@ body {
     height: 100%;
     padding: 0;
   }
+
+  @media screen and (max-width: 360px) {
+    padding-bottom: 0;
+  }
 }
 
 .app-holder {
@@ -99,10 +102,14 @@ body {
 }
 
 .logo-container {
-  width: 400px;
+  max-width: 400px;
   margin: 100px auto;
   cursor: default;
 
+  @media screen and (max-width: 360px) {
+    margin: 30px auto;
+  }
+
   h1 {
     display: block;
     text-align: center;
@@ -145,7 +152,7 @@ body {
 }
 
 .form-container {
-  width: 400px;
+  max-width: 400px;
   margin: 0 auto;
   padding: 20px;
 
@@ -321,6 +328,11 @@ body {
     font-size: 12px;
     font-weight: 400;
     font-family: 'Roboto Mono', monospace;
+
+    a {
+      color: inherit;
+      text-decoration: none;
+    }
   }
 
   .powered-by {

app/assets/stylesheets/stream_entries.scss

@@ -60,8 +60,12 @@
     border-radius: 0;
     box-shadow: none;
 
-    &.activity-stream-headless {
+    .entry {
-      .entry:first-child {
+      &:last-child {
+        border-radius: 0;
+      }
+
+      &:first-child {
         border-radius: 0;
 
         &:last-child {
@@ -71,6 +75,12 @@
     }
   }
 
+  @media screen and (max-width: 360px) {
+    .avatar {
+      display: none;
+    }
+  }
+
   .entry__container {
     display: flex;
   }
@@ -192,6 +202,7 @@
     display: block;
     overflow: hidden;
     padding-left: 10px;
+    margin-bottom: 21px;
 
     li {
       display: block;
@@ -200,7 +211,7 @@
       height: 100px;
       border-radius: 4px;
       margin-right: 4px;
-      margin-bottom: 25px;
+      margin-bottom: 4px;
 
       a {
         display: block;

app/helpers/accounts_helper.rb

@@ -1,5 +1,10 @@
 module AccountsHelper
   def pagination_options
-    { previous_label: "#{fa_icon('chevron-left')} Prev".html_safe, next_label: "Next #{fa_icon('chevron-right')}".html_safe, inner_window: 2 }
+    {
+      previous_label: "#{fa_icon('chevron-left')} Prev".html_safe,
+      next_label: "Next #{fa_icon('chevron-right')}".html_safe,
+      inner_window: 1,
+      outer_window: 0
+    }
   end
 end

app/models/user.rb

@@ -6,8 +6,6 @@ class User < ApplicationRecord
 
   validates :account, presence: true
 
-  has_many :oauth_applications, class_name: 'Doorkeeper::Application', as: :owner
-
   scope :prolific, -> { joins('inner join statuses on statuses.account_id = users.account_id').select('users.*, count(statuses.id) as statuses_count').group('users.id').order('statuses_count desc') }
   scope :recent,   -> { order('created_at desc') }
   scope :admins,   -> { where(admin: true) }

app/views/accounts/_header.html.haml

@@ -4,17 +4,19 @@
     = display_name(@account)
     %small= "@#{@account.username}"
   .details
-    .counter{ class: active_nav_class(account_url(@account)) }
-      = link_to account_url(@account) do
-        %span.counter-label Posts
-        %span.counter-number= @account.statuses.count
-    .counter{ class: active_nav_class(following_account_url(@account)) }
-      = link_to following_account_url(@account) do
-        %span.counter-label Following
-        %span.counter-number= @account.following.count
-    .counter{ class: active_nav_class(followers_account_url(@account)) }
-      = link_to followers_account_url(@account) do
-        %span.counter-label Followers
-        %span.counter-number= @account.followers.count
     .bio
       %p= @account.note
+
+    .details-counters
+      .counter{ class: active_nav_class(account_url(@account)) }
+        = link_to account_url(@account) do
+          %span.counter-label Posts
+          %span.counter-number= @account.statuses.count
+      .counter{ class: active_nav_class(following_account_url(@account)) }
+        = link_to following_account_url(@account) do
+          %span.counter-label Following
+          %span.counter-number= @account.following.count
+      .counter{ class: active_nav_class(followers_account_url(@account)) }
+        = link_to followers_account_url(@account) do
+          %span.counter-label Followers
+          %span.counter-number= @account.followers.count

app/views/layouts/public.html.haml

@@ -1,7 +1,7 @@
 - content_for :content do
   .container= yield
   .footer
-    %span.domain= Rails.configuration.x.local_domain
+    %span.domain= link_to Rails.configuration.x.local_domain, root_path
     %span.powered-by
       \//
       powered by