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 widthremotes/1727458204337373841/tmp_refs/heads/signup-info-prompt
parent
f2f9d50a13
commit
3b3a4d8a17
app/javascript
packs
styles/mastodon
|
@ -108,6 +108,14 @@ function main() {
|
||||||
if (parallaxComponents.length > 0 ) {
|
if (parallaxComponents.length > 0 ) {
|
||||||
new Rellax('.parallax', { speed: -1 });
|
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 }) => {
|
delegate(document, '.webapp-btn', 'click', ({ target, button }) => {
|
||||||
|
|
|
@ -364,7 +364,7 @@ $small-breakpoint: 960px;
|
||||||
|
|
||||||
@media screen and (max-width: $column-breakpoint) {
|
@media screen and (max-width: $column-breakpoint) {
|
||||||
.grid {
|
.grid {
|
||||||
grid-template-columns: auto;
|
grid-template-columns: 100%;
|
||||||
|
|
||||||
.column-0 {
|
.column-0 {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
Loading…
Reference in New Issue