From 3b3a4d8a1709b8f4a9ffe67d21707117c75f9fe8 Mon Sep 17 00:00:00 2001
From: ThibG <thib@sitedethib.com>
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;