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
This commit is contained in:
		
							parent
							
								
									f2f9d50a13
								
							
						
					
					
						commit
						3b3a4d8a17
					
				
					 2 changed files with 9 additions and 1 deletions
				
			
		|  | @ -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 }) => { | ||||
|  |  | |||
|  | @ -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; | ||||
|  |  | |||
		Reference in a new issue