Fix intermediary responsive layout, accessibility on navigation in web UI (#19324)

* Fix intermediary responsive layout, accessibility on navigation in web UI

* `yarn test:jest -u`

Co-authored-by: Yamagishi Kazutoshi <ykzts@desire.sh>

2 files changed, 30 insertions, 6 deletions

diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 02c2a14bf..039d0b904 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -2604,12 +2604,14 @@ $ui-header-height: 55px;
 }
 
 @media screen and (max-width: $no-gap-breakpoint - 1px) {
+  $sidebar-width: 285px;
+
   .with-fab .scrollable .item-list:last-child {
     padding-bottom: 5.25rem;
   }
 
   .columns-area__panels__main {
-    width: calc(100% - 55px);
+    width: calc(100% - $sidebar-width);
   }
 
   .columns-area__panels {
@@ -2617,10 +2619,10 @@ $ui-header-height: 55px;
   }
 
   .columns-area__panels__pane--navigational {
-    min-width: 55px;
+    min-width: $sidebar-width;
 
     .columns-area__panels__pane__inner {
-      width: 55px;
+      width: $sidebar-width;
     }
 
     .navigation-panel {
@@ -2630,7 +2632,6 @@ $ui-header-height: 55px;
       height: 100vh;
     }
 
-    .column-link span,
     .navigation-panel__sign-in-banner,
     .navigation-panel__logo,
     .getting-started__trends {
@@ -2655,11 +2656,31 @@ $ui-header-height: 55px;
   }
 }
 
+@media screen and (max-width: $no-gap-breakpoint - 285px - 1px) {
+  $sidebar-width: 55px;
+
+  .columns-area__panels__main {
+    width: calc(100% - $sidebar-width);
+  }
+
+  .columns-area__panels__pane--navigational {
+    min-width: $sidebar-width;
+
+    .columns-area__panels__pane__inner {
+      width: $sidebar-width;
+    }
+
+    .column-link span {
+      display: none;
+    }
+  }
+}
+
 .explore__search-header {
   display: none;
 }
 
-@media screen and (max-width: $no-gap-breakpoint + 285px - 1px) {
+@media screen and (max-width: $no-gap-breakpoint - 1px) {
   .columns-area__panels__pane--compositional {
     display: none;
   }
@@ -3145,6 +3166,9 @@ $ui-header-height: 55px;
   font-size: 16px;
   padding: 15px;
   text-decoration: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 
   &:hover,
   &:focus,
diff --git a/app/javascript/styles/mastodon/variables.scss b/app/javascript/styles/mastodon/variables.scss
index 775a12e68..2f6c41d5f 100644
--- a/app/javascript/styles/mastodon/variables.scss
+++ b/app/javascript/styles/mastodon/variables.scss
@@ -53,7 +53,7 @@ $media-modal-media-max-width: 100%;
 // put margins on top and bottom of image to avoid the screen covered by image.
 $media-modal-media-max-height: 80%;
 
-$no-gap-breakpoint: 890px;
+$no-gap-breakpoint: 1175px;
 
 $font-sans-serif: 'mastodon-font-sans-serif' !default;
 $font-display: 'mastodon-font-display' !default;