From 91c491fd8d0063fdabf76ad5f40e61c278e484b3 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Tue, 24 Sep 2019 00:29:42 -0700
Subject: [PATCH] fix: more CSS tweaks for very small screens (#1527)

---
 .../dialog/components/GenericDialogList.html  |  4 +++
 .../_components/profile/AccountProfile.html   | 29 +++++++++++++++++++
 .../profile/AccountProfileDetails.html        | 17 +++++++----
 .../profile/AccountProfileFollow.html         |  9 +++++-
 .../profile/AccountProfileHeader.html         |  7 +++--
 .../_components/status/StatusContent.html     | 10 +++++++
 6 files changed, 68 insertions(+), 8 deletions(-)

diff --git a/src/routes/_components/dialog/components/GenericDialogList.html b/src/routes/_components/dialog/components/GenericDialogList.html
index 47b65490..253ede4c 100644
--- a/src/routes/_components/dialog/components/GenericDialogList.html
+++ b/src/routes/_components/dialog/components/GenericDialogList.html
@@ -87,6 +87,10 @@
   }
 
   @media (max-width: 320px) {
+    .generic-dialog-list {
+      overflow-y: auto;
+      -webkit-overflow-scrolling: touch;
+    }
     .generic-dialog-list-button {
       padding: 10px 10px;
     }
diff --git a/src/routes/_components/profile/AccountProfile.html b/src/routes/_components/profile/AccountProfile.html
index 1a762ac6..175203d3 100644
--- a/src/routes/_components/profile/AccountProfile.html
+++ b/src/routes/_components/profile/AccountProfile.html
@@ -61,6 +61,10 @@
   }
 
   @media (max-width: 767px) {
+    .account-profile {
+      padding-top: 100px;
+    }
+    
     .account-profile-grid {
       display: grid;
       grid-template-areas: "avatar     name          follow"
@@ -75,6 +79,31 @@
       padding: 10px;
     }
   }
+
+  @media (max-width: 320px) {
+    .account-profile {
+      padding-top: 50px;
+    }
+  }
+
+  @media (max-width: 240px) {
+    .account-profile {
+      padding-top: 0;
+    }
+    .account-profile-grid {
+      grid-template-areas: "avatar      name"
+                           "avatar      label"
+                           "username    username"
+                           "followed-by followed-by"
+                           "follow      follow"
+                           "note        note"
+                           "meta        meta"
+                           "details     details";
+      grid-template-columns: min-content 1fr;
+      grid-column-gap: 5px;
+      grid-row-gap: 0;
+    }
+  }
 </style>
 <script>
   import AccountProfileHeader from './AccountProfileHeader.html'
diff --git a/src/routes/_components/profile/AccountProfileDetails.html b/src/routes/_components/profile/AccountProfileDetails.html
index ebdce2f3..e29b720b 100644
--- a/src/routes/_components/profile/AccountProfileDetails.html
+++ b/src/routes/_components/profile/AccountProfileDetails.html
@@ -47,13 +47,13 @@
 <style>
   .account-profile-details {
     grid-area: details;
-    display: flex;
+    display: grid;
     margin: 0 5px;
     align-items: center;
+    grid-template-columns: 1fr 1fr 1fr min-content;
   }
 
   .account-profile-details-item {
-    flex: 1;
     display: flex;
     flex-direction: row;
     padding: 5px;
@@ -106,13 +106,20 @@
       margin-left: 0;
       text-align: center;
     }
-  }
-
-  @media (max-width: 767px) {
     .account-profile-details-item {
       font-size: 1em;
     }
   }
+
+  @media (max-width: 240px) {
+    .account-profile-details {
+      grid-template-columns: 1fr 1fr 1fr;
+    }
+    .account-profile-more-options {
+      justify-self: flex-end;
+      grid-column: 1 / 4;
+    }
+  }
 </style>
 <script>
   import IconButton from '../IconButton.html'
diff --git a/src/routes/_components/profile/AccountProfileFollow.html b/src/routes/_components/profile/AccountProfileFollow.html
index b89dfcbf..7f6bb286 100644
--- a/src/routes/_components/profile/AccountProfileFollow.html
+++ b/src/routes/_components/profile/AccountProfileFollow.html
@@ -1,10 +1,11 @@
 <div class="account-profile-follow {shown ? 'shown' : ''}">
   <IconButton
+    className="account-profile-follow-icon-button"
     label={followLabel}
     href={followIcon}
     pressable="true"
     pressed={following}
-    big="true"
+    big={!$isVeryTinyMobileSize}
     on:click="onFollowButtonClick(event)"
     ref:icon
   />
@@ -18,6 +19,12 @@
   .account-profile-follow.shown {
     display: block;
   }
+
+  @media (max-width: 240px) {
+    .account-profile-follow {
+      justify-self: flex-end;
+    }
+  }
 </style>
 <script>
   import IconButton from '../IconButton.html'
diff --git a/src/routes/_components/profile/AccountProfileHeader.html b/src/routes/_components/profile/AccountProfileHeader.html
index 89a171e6..40e23f39 100644
--- a/src/routes/_components/profile/AccountProfileHeader.html
+++ b/src/routes/_components/profile/AccountProfileHeader.html
@@ -3,7 +3,7 @@
   <button class="account-profile-avatar-button"
           aria-label="Click to see avatar"
           on:click="onAvatarClick()" >
-    <Avatar {account} size="big" />
+    <Avatar {account} size={avatarSize} />
   </button>
 </div>
 <div class="account-profile-name">
@@ -138,7 +138,10 @@
           : displayName
       },
       bot: ({ account }) => !!account.bot,
-      label: ({ bot }) => bot ? 'bot' : ''
+      label: ({ bot }) => bot ? 'bot' : '',
+      avatarSize: ({ $isVeryTinyMobileSize, $isTinyMobileSize }) => (
+        $isVeryTinyMobileSize ? 'small' : $isTinyMobileSize ? 'medium' : 'big'
+      )
     },
     methods: {
       async onAvatarClick () {
diff --git a/src/routes/_components/status/StatusContent.html b/src/routes/_components/status/StatusContent.html
index 7e70d644..a48596ad 100644
--- a/src/routes/_components/status/StatusContent.html
+++ b/src/routes/_components/status/StatusContent.html
@@ -81,6 +81,16 @@
     text-decoration: underline;
   }
 
+  @media (max-width: 240px) {
+    :global(
+      .status-content p:last-child,
+      .status-content blockquote:last-child,
+      .status-content ul:last-child,
+      .status-content ol:last-child) {
+      margin: 0 0 10px; /* looks better on KaiOS with some spacing here */
+    }
+  }
+
 </style>
 <script>
   import { mark, stop } from '../../_utils/marks'