From 58cff20a201f360542b979d740aa46fc0b043587 Mon Sep 17 00:00:00 2001
From: edshot99 <ed@i2pmail.org>
Date: Sun, 8 Dec 2024 02:40:15 -0600
Subject: [PATCH] Reapply "[Posts] Fix thumbnail issues (#789)"

This reverts commit 71646897bd67fef55e5da9c4fe0e1e81d897d761.
---
 .../src/styles/common/z_responsive.scss       | 22 +++++++------------
 app/javascript/src/styles/specific/users.scss |  3 ++-
 2 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/app/javascript/src/styles/common/z_responsive.scss b/app/javascript/src/styles/common/z_responsive.scss
index be1c43a97..697d23eb0 100644
--- a/app/javascript/src/styles/common/z_responsive.scss
+++ b/app/javascript/src/styles/common/z_responsive.scss
@@ -199,9 +199,8 @@
 
     #posts #posts-container {
       width: 100%;
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      gap: 1vw;
+      display: flex;
+      flex-wrap: wrap;
       align-items: center;
       justify-content: space-evenly;
     }
@@ -212,7 +211,7 @@
       text-align: center;
       vertical-align: middle;
       display: inline-block;
-      width: fit-content;
+      width: 31vw;
 
       a {
         margin: 0 auto;
@@ -220,7 +219,7 @@
 
       img {
         max-height: 150px;
-        max-width: 100cqw;
+        max-width: 31vw;
       }
 
       .desc {
@@ -230,11 +229,13 @@
 
     .user-disable-cropped-false {
       article.post-preview {
+        width: 31vw;
+
         img {
           height: auto;
           max-height: none;
-          max-width: fit-content;
-          width: 100cqw;
+          max-width: none;
+          width: 31vw;
 
           &.has-cropped-false {
             object-fit: cover;
@@ -313,13 +314,6 @@
     }
   }
 }
-@media screen and (max-width: 800px) and (horizontal-viewport-segments: 2) {
-  body.resp {
-    #posts #posts-container {
-      grid-template-columns: repeat(4, 1fr);
-    }
-  }
-}
 
 @media screen and (max-width: 660px) {
   body.resp {
diff --git a/app/javascript/src/styles/specific/users.scss b/app/javascript/src/styles/specific/users.scss
index a092d5814..7e9305cb7 100644
--- a/app/javascript/src/styles/specific/users.scss
+++ b/app/javascript/src/styles/specific/users.scss
@@ -160,7 +160,7 @@ div#c-users {
         grid-area: p-posts;
         display: flex;
         overflow: auto;
-        justify-content: flex-start;
+        justify-content: center;
         flex-wrap: wrap;
 
         gap: 1em;
@@ -173,6 +173,7 @@ div#c-users {
         @include window-larger-than(800px) {
           flex-wrap: nowrap;
           border-top-left-radius: 0;
+          justify-content: flex-start;
         }
 
         article.post-preview {