scroll fix, images size smaller on small screens

Author: NDigger

script.js

@@ -27,20 +27,24 @@ document.getElementById('fullscreen-images-override').addEventListener('pointeru
   }
 })
 
-let fullscreenImageIndex = Number(fullscreenImagesOverride.getAttribute('data-index'));
+const setImageIndex = (index) => {
+  const imageUrls = fullscreenImagesOverride.getAttribute('data-image-urls').split(' ')
+  fullscreenImagesLeftBtn.style.display = index <= 0 ? 'none' : 'block';
+  fullscreenImagesRightBtn.style.display = index >= imageUrls.length - 1 ? 'none' : 'block';
+  fullscreenImagesOverride.setAttribute('data-index', index)
+}
+
 const fullscreenImagesLeftBtn = fullscreenImagesOverride.querySelector('.left-btn')
 const fullscreenImagesRightBtn = fullscreenImagesOverride.querySelector('.right-btn')
 const shiftImage = (shift) => {
-  fullscreenImageIndex = Number(fullscreenImagesOverride.getAttribute('data-index'));
+  let index = Number(fullscreenImagesOverride.getAttribute('data-index'));
   const imageUrls = fullscreenImagesOverride.getAttribute('data-image-urls').split(' ')
-  fullscreenImageIndex = Math.min(imageUrls.length - 1, Math.max(0, fullscreenImageIndex + shift));
-  fullscreenImagesLeftBtn.style.display = fullscreenImageIndex <= 0 ? 'none' : 'block';
-  fullscreenImagesRightBtn.style.display = fullscreenImageIndex >= imageUrls.length - 1 ? 'none' : 'block';
+  index = Math.min(imageUrls.length - 1, Math.max(0, index + shift));
+  setImageIndex(index)
   fullscreenImagesOverride.querySelector('.images').scrollTo({
-    left: fullscreenImageIndex * window.innerWidth,
+    left: index * window.innerWidth,
     behavior: 'smooth'
   });
-  fullscreenImagesOverride.setAttribute('data-index', fullscreenImageIndex)
 }
 
 fullscreenImagesLeftBtn.addEventListener('pointerup', () => shiftImage(-1))
@@ -55,12 +59,18 @@ document.addEventListener('keydown', e => {
   }
 })
 window.addEventListener('resize', () => {
+  let index = Number(fullscreenImagesOverride.getAttribute('data-index'));
   fullscreenImagesOverride.querySelector('.images').scrollTo({
-    left: fullscreenImageIndex * window.innerWidth,
+    left: index * window.innerWidth,
     behavior: 'instant'
   });
 })
 
+fullscreenImagesOverride.querySelector('.images').addEventListener('scroll', e => {
+  const index = Math.round(e.target.scrollLeft / window.innerWidth);
+  setImageIndex(index);
+})
+
 bottomHeaderBtn.addEventListener('pointerup', () => {
   bottomHeaderBtn.classList.add('disappear');
   const element = document.querySelector("#statuses");

status.js

@@ -110,8 +110,6 @@ const pushStatus = status => {
                 `).join('')
             fullscreenImages.innerHTML = a;
             fullscreenButtons.style.display = imageUrls.length > 1 ? 'block' : 'none';
-            fullscreenButtons.querySelector('.right-btn').style.display = imageUrls.length > 1 ? 'block' : 'none';
-            fullscreenButtons.querySelector('.left-btn').style.display = 'none';
             fullscreenImagesOverride.setAttribute('data-image-urls', imageUrls.join(' '));
             fullscreenImages.scrollTo({
                 left: 0,

styles.css

@@ -851,6 +851,15 @@ body.screen #fullscreen-images-override .right-btn:active {
 @media (max-width: 932px) {
     .status .small-screen {
         display: block;
+        max-height: 400px;
+        max-width: 100%;
+        width: fit-content;
+    }
+
+    .status .small-screen img {
+        max-width: 100%;
+        max-height: calc(400px - 10px);
+        width: auto;
     }
 
     #links {