fix: more fixes for tiny screen sizes (#1509)

src/routes/_components/IconButton.html

@@ -3,6 +3,7 @@
         aria-label={label}
         aria-pressed={pressable ? !!pressed : undefined}
         aria-hidden={ariaHidden}
+        tabindex="{ariaHidden ? '-1' : '0'}"
         class={computedClass}
         {disabled}
         ref:node

src/routes/_components/compose/ComposeAuthor.html

@@ -64,10 +64,14 @@
 
   @media (max-width: 767px) {
     .compose-box-avatar {
-      grid-area: avatar;
       margin-right: 5px;
     }
   }
+  @media (max-width: 240px) {
+    .compose-box-avatar {
+      margin-right: 0;
+    }
+  }
 </style>
 <script>
   import Avatar from '../Avatar.html'

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

@@ -64,16 +64,27 @@
   }
 
   @media (max-width: 320px) {
+    :global(.emoji-container .emoji-mart-preview) {
+      height: 60px;
+    }
+  }
+
+  @media (max-width: 240px) {
     :global(.modal-dialog .modal-dialog-contents.emoji-dialog) {
       max-width: 100%;
       max-height: 100%;
     }
     .emoji-container {
-      max-width: calc(100vw - 10px);
+      max-width: 100vw;
+      width: 100%;
     }
-    :global(.emoji-container .emoji-mart-preview) {
-      height: 60px;
+    :global(.emoji-container .emoji-mart) {
+      width: 100% !important;
     }
+   :global(.emoji-container .emoji-mart-anchors img, .emoji-container .emoji-mart-anchors svg) {
+     width: 14px;
+     height: 14px;
+   }
   }
 </style>
 <script>
@@ -146,7 +157,7 @@
       }),
       perLine: ({ $isSmallMobileSize, $isTinyMobileSize, $isMobileSize, $isVeryTinyMobileSize }) => (
         $isVeryTinyMobileSize
-          ? 6
+          ? 5
           : $isTinyMobileSize
             ? 7
             : $isSmallMobileSize

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

@@ -4,14 +4,17 @@
     <button
         class="generic-dialog-list-button focus-after"
         on:click="fire('click', item)">
-      <SvgIcon className="generic-dialog-list-item-svg" href={item.icon} />
-      <span class="generic-dialog-list-button-span">
-        {item.label}
-      </span>
-      {#if selectable}
-        <SvgIcon className="generic-dialog-list-item-svg {item.selected ? '' : 'hidden'}"
-                 href="#fa-check" />
-      {/if}
+      <!-- Extra wrapper inside button is required for KaiOS. Seems old Firefox does not like flex buttons. -->
+      <div class="generic-dialog-list-button-inner">
+        <SvgIcon className="generic-dialog-list-item-svg" href={item.icon} />
+        <span class="generic-dialog-list-button-span">
+          {item.label}
+        </span>
+        {#if selectable}
+          <SvgIcon className="generic-dialog-list-item-svg {item.selected ? '' : 'hidden'}"
+                   href="#fa-check" />
+        {/if}
+      </div>
     </button>
   </li>
   {/each}
@@ -41,6 +44,8 @@
     background: var(--settings-list-item-bg);
     border: none;
     margin: 0;
+  }
+  .generic-dialog-list-button-inner {
     display: flex;
     flex-direction: row;
   }

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

@@ -13,7 +13,7 @@
         <h1 class="modal-dialog-title">{title}</h1>
       {/if}
       <div class="close-dialog-button-wrapper">
-        <button class="close-dialog-button"
+        <button class="close-dialog-button focus-after"
                 data-a11y-dialog-hide aria-label="Close dialog">
           <SvgIcon className="close-dialog-button-svg" href="#fa-times" />
         </button>
@@ -126,6 +126,14 @@
     overflow-y: hidden;
   }
 
+  @media(min-width: 768px) {
+    /* On desktop, some dialogs look bad if they expand to fit all the way. So we shrink
+       them to fit if shrinkWidthToFit is true.*/
+    .modal-dialog-contents.shrink-width-to-fit {
+      flex: none;
+    }
+  }
+
   @media (max-width: 320px) {
     .modal-dialog-title {
       font-size: 1.3em;
@@ -137,11 +145,9 @@
     }
   }
 
-  @media(min-width: 768px) {
-    /* On desktop, some dialogs look bad if they expand to fit all the way. So we shrink
-       them to fit if shrinkWidthToFit is true.*/
-    .modal-dialog-contents.shrink-width-to-fit {
-      flex: none;
+  @media (max-width: 240px) {
+    .modal-dialog-contents {
+      min-width: calc(100% - 20px);
     }
   }
 </style>

src/routes/_components/settings/instance/ThemeSettings.html

@@ -81,6 +81,12 @@
       margin-top: 0.5em;
     }
   }
+
+  @media (max-width: 240px) {
+    .theme-groups {
+      grid-row-gap: 25px; /* TODO: "Dark background" text overlaps with previous div on KaiOS for some reason */
+    }
+  }
 </style>
 <script>
   import { changeTheme } from '../../../_actions/instances'

src/routes/_components/status/Media.html

@@ -84,6 +84,12 @@
   .show-image-button {
     cursor: zoom-in;
   }
+
+  @media (max-width: 240px) {
+    .inline-media {
+      min-height: 100px; /* TODO: hack for KaiOS, which renders the grouped-images style as 0 height */
+    }
+  }
 </style>
 <script>
   import { DEFAULT_MEDIA_WIDTH, DEFAULT_MEDIA_HEIGHT, ONE_TRANSPARENT_PIXEL } from '../../_static/media'

src/routes/_components/status/StatusPoll.html

@@ -129,6 +129,7 @@
     margin: 10px 0 0 0;
     padding: 0;
     list-style: none;
+    overflow-x: hidden;
   }
 
   .poll-stat button {

src/scss/focus.scss

@@ -31,7 +31,7 @@
 
 // For KaiOS, do some additional things to improve the focus styles, which don't show up well
 // for some reason
-@media (max-width: 320px) {
+@media (max-width: 240px) {
   *:focus, .focus {
     outline: 3px solid var(--focus-outline);
   }
@@ -43,4 +43,24 @@
   button:focus {
     opacity: 0.7;
   }
+
+  // add extra "focus-after"-like styles for buttons to increase visibility
+  button.icon-button {
+    position: relative;
+  }
+
+  button.icon-button:focus {
+    outline: none;
+  }
+
+  button.icon-button:focus::after {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    content: '';
+    border: 3px solid var(--focus-outline);
+    pointer-events: none;
+  }
 }