fix: improve style on very small mobile screens (#1505)

src/routes/_components/FreeTextLayout.html

@@ -11,4 +11,13 @@
   :global(.free-text) {
     overflow-y: auto; /* fixes weird iOS Safari bug where scrolling gets stuck */
   }
+
+  @media (max-width: 240px) {
+    :global(.free-text) {
+      margin: 10px;
+    }
+    :global(.free-text p) {
+      margin: 15px 0;
+    }
+  }
 </style>

src/routes/_components/NotLoggedInHome.html

@@ -40,6 +40,12 @@
       font-size: 2.7em;
     }
   }
+
+  @media (max-width: 240px) {
+    .not-logged-in-home h1 {
+      font-size: 2.5em;
+    }
+  }
 </style>
 <script>
   import FreeTextLayout from './FreeTextLayout.html'

src/routes/_components/community/PageListItem.html

@@ -60,6 +60,19 @@
     }
   }
 
+  @media (max-width: 240px) {
+    .page-list-item a {
+      padding: 10px 5px;
+      font-size: 0.9em;
+    }
+    :global(.page-list-item-svg) {
+      margin-right: 5px;
+    }
+    :global(.page-list-item a button.icon-button) {
+      padding: 6px 5px;
+    }
+  }
+
 </style>
 <script>
   import { store } from '../../_store/store'

src/routes/_components/compose/ComposeAuthor.html

@@ -6,7 +6,7 @@
    on:click="onClick(event)"
 >
   <!-- the avatar is duplicated information, so hide from tab order and screenreaders -->
-  <Avatar account={verifyCredentials} size="small"/>
+  <Avatar account={verifyCredentials} size={avatarSize} />
 </a>
 <a class="compose-box-display-name {loaded ? 'loaded' : 'not-loaded'}"
    {href}
@@ -96,7 +96,8 @@
         }
       },
       id: ({ verifyCredentials }) => (verifyCredentials && verifyCredentials.id),
-      href: ({ id }) => (id ? `/accounts/${id}` : '#')
+      href: ({ id }) => (id ? `/accounts/${id}` : '#'),
+      avatarSize: ({ $isVeryTinyMobileSize }) => $isVeryTinyMobileSize ? 'extra-small' : 'small'
     },
     methods: {
       onClick (e) {

src/routes/_components/compose/ComposeBox.html

@@ -84,6 +84,12 @@
       overflow-x: hidden;
     }
   }
+
+  @media (max-width: 240px) {
+    .compose-box {
+      padding: 10px 5px 0 5px;
+    }
+  }
 </style>
 <script>
   import ComposeToolbar from './ComposeToolbar.html'

src/routes/_components/compose/ComposeToolbar.html

@@ -60,6 +60,12 @@
       padding-right: 5px;
     }
   }
+  @media (max-width: 240px) {
+    :global(button.icon-button.compose-toolbar-button .icon-button-svg) {
+      width: 20px;
+      height: 20px;
+    }
+  }
 </style>
 <script>
   import IconButton from '../IconButton.html'

src/routes/_components/dialog/components/EmojiDialog.html

@@ -5,6 +5,7 @@
   shrinkWidthToFit={true}
   background="var(--main-bg)"
   on:show="onShow()"
+  className="emoji-dialog"
 >
   <div class="emoji-container" {style} ref:container >
     {#if loaded}
@@ -63,6 +64,13 @@
   }
 
   @media (max-width: 320px) {
+    :global(.modal-dialog .modal-dialog-contents.emoji-dialog) {
+      max-width: 100%;
+      max-height: 100%;
+    }
+    .emoji-container {
+      max-width: calc(100vw - 10px);
+    }
     :global(.emoji-container .emoji-mart-preview) {
       height: 60px;
     }
@@ -121,9 +129,10 @@
     }),
     computed: {
       // try to estimate size of emoji-mart based on mobile vs desktop
-      style: ({ $isSmallMobileSize }) => (`
+      style: ({ $isVeryTinyMobileSize, $isSmallMobileSize }) => (`
-        min-width: ${$isSmallMobileSize ? 250 : 300}px;
+        min-width: ${$isVeryTinyMobileSize ? 200 : $isSmallMobileSize ? 250 : 300}px;
-        min-height: ${$isSmallMobileSize ? 300 : 400}px;
+        min-height: ${$isVeryTinyMobileSize ? 0 : $isSmallMobileSize ? 300 : 400}px;
+        ${$isVeryTinyMobileSize ? 'overflow-y: auto; overflow-x: hidden;' : ''}
       `),
       emojiMartPropsJson: ({ emojiMartProps }) => JSON.stringify(emojiMartProps),
       emojiMartProps: ({ perLine, custom }) => ({
@@ -135,8 +144,10 @@
         include: categoriesSort,
         showPreview: true
       }),
-      perLine: ({ $isSmallMobileSize, $isTinyMobileSize, $isMobileSize }) => (
+      perLine: ({ $isSmallMobileSize, $isTinyMobileSize, $isMobileSize, $isVeryTinyMobileSize }) => (
-        $isTinyMobileSize
+        $isVeryTinyMobileSize
+          ? 6
+          : $isTinyMobileSize
             ? 7
             : $isSmallMobileSize
               ? 8

src/routes/_components/settings/SettingsListButton.html

@@ -1,4 +1,9 @@
-<a {href} on:click="fire('click', event)" rel="prefetch" aria-label={ariaLabel || label} class="settings-list-button {className ? className : ''}">
+<a {href}
+   on:click="fire('click', event)"
+   rel="prefetch"
+   aria-label={ariaLabel || label}
+   class="settings-list-button focus-after {className ? className : ''}"
+>
   <span>
     {label}
   </span>

src/routes/_components/settings/SettingsListRow.html

@@ -33,6 +33,12 @@
       padding: 20px 10px;
     }
   }
+
+  @media (max-width: 240px) {
+    .settings-list-item > :global(*) {
+      padding: 10px 10px;
+    }
+  }
 </style>
 <script>
   export default {

src/routes/_components/status/StatusHeader.html

@@ -90,6 +90,15 @@
       margin-left: 10px;
     }
   }
+
+  @media (max-width: 240px) {
+    .status-header {
+      margin-left: 0;
+    }
+    .status-header-avatar {
+      margin-left: 0;
+    }
+  }
 </style>
 <script>
   import Avatar from '../Avatar.html'

src/routes/_components/status/StatusSidebar.html

@@ -40,7 +40,12 @@
     },
     computed: {
       elementId: ({ uuid }) => `status-author-avatar-${uuid}`,
-      size: ({ isStatusInOwnThread }) => isStatusInOwnThread ? 'medium' : 'small'
+      size: ({ isStatusInOwnThread, $isVeryTinyMobileSize }) => {
+        if ($isVeryTinyMobileSize) {
+          return isStatusInOwnThread ? 'small' : 'extra-small'
+        }
+        return isStatusInOwnThread ? 'medium' : 'small'
+      }
     }
   }
 </script>

src/routes/_components/status/StatusToolbar.html

@@ -55,6 +55,12 @@
     }
   }
 
+  @media (max-width: 240px) {
+    :global(.status-toolbar .icon-button-svg) {
+      width: 20px;
+      height: 20px;
+    }
+  }
 </style>
 <script>
   import IconButton from '../IconButton.html'

src/routes/_pages/settings/general.html

@@ -102,6 +102,12 @@
     display: block;
     padding: 5px 0;
   }
+
+  @media (max-width: 240px) {
+    .ui-settings {
+      padding: 20px 10px;
+    }
+  }
 </style>
 <script>
   import SettingsLayout from '../../_components/settings/SettingsLayout.html'

src/routes/_pages/settings/hotkeys.html

@@ -27,6 +27,12 @@
     display: block;
     padding: 5px 0;
   }
+
+  @media (max-width: 240px) {
+    .ui-settings {
+      padding: 20px 10px;
+    }
+  }
 </style>
 <script>
   import SettingsLayout from '../../_components/settings/SettingsLayout.html'

src/routes/_pages/settings/wellness.html

@@ -99,6 +99,12 @@
     margin: 0 10px 0 5px;
     min-width: 18px;
   }
+
+  @media (max-width: 240px) {
+    .ui-settings {
+      padding: 20px 10px;
+    }
+  }
 </style>
 <script>
   import SettingsLayout from '../../_components/settings/SettingsLayout.html'

src/routes/_store/observers/resizeObservers.js

@@ -9,7 +9,8 @@ export function resizeObservers (store) {
     store.set({
       isMobileSize: matchMedia('(max-width: 767px)').matches, //  e.g. iPhone Plus
       isSmallMobileSize: matchMedia('(max-width: 479px)').matches, // e.g. Galaxy S5
-      isTinyMobileSize: matchMedia('(max-width: 320px)').matches // e.g. iPhone 4
+      isTinyMobileSize: matchMedia('(max-width: 320px)').matches, // e.g. iPhone 4
+      isVeryTinyMobileSize: matchMedia('(max-width: 240px)').matches // e.g. Nokia 8110 (KaiOS)
     })
   }
 

src/scss/focus.scss

@@ -0,0 +1,46 @@
+*:focus, .focus {
+  outline: 2px solid var(--focus-outline);
+}
+
+.container:focus {
+  // the outline causes choppy rendering on Edge and isn't visible or necessary anyway
+  // https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/17343598/
+  outline: none;
+}
+
+/* Special class to make focus outlines easier to see in some odd
+ * cases where the outline would be clipped. */
+.focus-after {
+  position: relative;
+}
+
+.focus-after:focus {
+  outline: none;
+}
+
+.focus-after:focus::after {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  content: '';
+  border: 2px solid var(--focus-outline);
+  pointer-events: none;
+}
+
+// For KaiOS, do some additional things to improve the focus styles, which don't show up well
+// for some reason
+@media (max-width: 320px) {
+  *:focus, .focus {
+    outline: 3px solid var(--focus-outline);
+  }
+
+  a:focus, span:focus {
+    background: var(--focus-bg) !important;
+  }
+
+  button:focus {
+    opacity: 0.7;
+  }
+}

src/scss/global.scss

@@ -1,5 +1,6 @@
 @import './fonts.scss';
 @import './variables.scss';
+@import './focus.scss';
 
 body {
   margin: 0;
@@ -10,6 +11,11 @@ body {
   background: var(--body-bg);
   -webkit-tap-highlight-color: transparent; // fix for blue background on spoiler tap on Chrome for Android
   overflow-x: hidden; // Prevent horizontal scrolling on mobile Firefox on small screens
+
+  @media (max-width: 240px) {
+    font-size: 0.75em; /* tiny text for tiny screens */
+  }
+
 }
 
 .main-content {
@@ -148,16 +154,6 @@ ul, li, p {
   opacity: 0;
 }
 
-*:focus, .focus {
-  outline: 2px solid var(--focus-outline);
-}
-
-.container:focus {
-  // the outline causes choppy rendering on Edge and isn't visible or necessary anyway
-  // https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/17343598/
-  outline: none;
-}
-
 button::-moz-focus-inner {
   border: 0;
 }
@@ -215,24 +211,3 @@ textarea {
 .inline-emoji {
   font-family: PinaforeEmoji, sans-serif;
 }
-
-/* Special class to make focus outlines easier to see in some odd
- * cases where the outline would be clipped. */
-.focus-after {
-  position: relative;
-}
-
-.focus-after:focus {
-  outline: none;
-}
-
-.focus-after:focus::after {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  content: '';
-  border: 2px solid var(--focus-outline);
-  pointer-events: none;
-}

src/scss/themes/_base.scss

@@ -129,4 +129,6 @@
   --focal-color: #{$secondary-text-color};
 
   --blurhash-sensitive-text-color: #{lighten($deemphasized-color, 40%)};
+
+  --focus-bg: #{rgba(0, 0, 0, 0.1)};
 }

src/scss/themes/_dark.scss

@@ -50,4 +50,6 @@
   --length-indicator-color: var(--action-button-fill-color);
 
   --blurhash-sensitive-text-color: #{lighten($deemphasized-color, 15%)};
+
+  --focus-bg: #{rgba(255, 255, 255, 0.1)};
 }

src/scss/variables.scss

@@ -10,6 +10,10 @@
     --status-pad-h: 10px;
   }
 
+  @media (max-width: 240px) {
+    --status-pad-h: 5px;
+  }
+
   //
   // Nav and .main-content offset. This is important for things like the sticky header (ComposeStickyButton.html)
   // as well as deciding how to scroll to the nth item in a list (List.html).