put images in their own lane

data/static/js/ui.js

@@ -142,8 +142,22 @@ document.addEventListener("DOMContentLoaded", () => {
   //lightboxes
   lightboxObj = constructLightbox();
   document.body.appendChild(lightboxObj.dialog);
-  const postImages = document.querySelectorAll(".post-inner img.block-img");
+
+  function setImageMaxSize(img) {
+    const { maxWidth: origMaxWidth } = getComputedStyle(img);
+    if (img.naturalWidth >= parseInt(origMaxWidth)) {
+      return;
+    }
+    img.style.maxWidth = img.naturalWidth + "px";
+  }
+
+  const postImages = document.querySelectorAll(".post-inner img.post-image");
   postImages.forEach(postImage => {
+    if (postImage.complete) {
+      setImageMaxSize(postImage);
+    } else {
+      postImage.addEventListener("load", () => setImageMaxSize(postImage));
+    }
     const belongingTo = postImage.closest(".post-inner");
     const images = lightboxImages.get(belongingTo) ?? [];
     images.push({

data/static/style.css

@@ -511,10 +511,21 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
   width: 100%;
 }
 
-.block-img {
+.post-img-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+}
+
+.post-image {
   object-fit: contain;
-  max-width: 400px;
-  max-height: 400px;
+  max-width: 300px;
+  max-height: 300px;
+  min-width: 200px;
+  min-height: 200px;
+  flex: 1 1 0%;
+  width: auto;
+  height: auto;
 }
 
 .thread-info-container {