From 3b3a4d8a1709b8f4a9ffe67d21707117c75f9fe8 Mon Sep 17 00:00:00 2001 From: ThibG Date: Wed, 16 Jan 2019 20:36:10 +0100 Subject: [PATCH] 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 --- app/javascript/packs/public.js | 8 ++++++++ app/javascript/styles/mastodon/about.scss | 2 +- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/app/javascript/packs/public.js b/app/javascript/packs/public.js index a86dc783132..4ab27c76928 100644 --- 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 47ac9265bf7..c6f249fabdf 100644 --- 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;