Fix public hashtag timeline width on mobile, fix scrollbar width compensation (#9824)

* Fix hashtag timeline width being potentially larger than window width

* Add automatic computation of scrollbar width

diff --git a/app/javascript/packs/public.js b/app/javascript/packs/public.js
index a86dc7831326628461815d2890cc1e7b932d24e0..4ab27c769281e433b38a1e9427a82371186b8286 100644 (file)
--- a/app/javascript/packs/public.js
+++ b/app/javascript/packs/public.js
@@ -108,6 +108,14 @@ function main() {
     if (parallaxComponents.length > 0 ) {
       new Rellax('.parallax', { speed: -1 });
     }
+
+    if (document.body.classList.contains('with-modals')) {
+      const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+      const scrollbarWidthStyle = document.createElement('style');
+      scrollbarWidthStyle.id = 'scrollbar-width';
+      document.head.appendChild(scrollbarWidthStyle);
+      scrollbarWidthStyle.sheet.insertRule(`body.with-modals--active { margin-right: ${scrollbarWidth}px; }`, 0);
+    }
   });
 
   delegate(document, '.webapp-btn', 'click', ({ target, button }) => {

diff --git a/app/javascript/styles/mastodon/about.scss b/app/javascript/styles/mastodon/about.scss
index 47ac9265bf773511ad585760e7938d807f52d5c5..c6f249fabdf5257b7477627a981f904865e63ea3 100644 (file)
--- a/app/javascript/styles/mastodon/about.scss
+++ b/app/javascript/styles/mastodon/about.scss
@@ -364,7 +364,7 @@ $small-breakpoint: 960px;
 
   @media screen and (max-width: $column-breakpoint) {
     .grid {
-      grid-template-columns: auto;
+      grid-template-columns: 100%;
 
       .column-0 {
         display: block;