From 1d20aa0644ab94c1e7d42b0031cd26607a880673 Mon Sep 17 00:00:00 2001
From: Alec Armbruster <35377827+alectrocute@users.noreply.github.com>
Date: Tue, 27 Jun 2023 17:31:00 -0400
Subject: [PATCH 1/4] add static width/height for post listing thumbnails

---
 src/assets/css/main.css                     | 6 +++---
 src/shared/components/post/post-listing.tsx | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index 63c1b47..e5c163b 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -198,9 +198,9 @@ blockquote {
 
 .thumbnail {
   object-fit: cover;
-  aspect-ratio: 4/3;
-  width: 100%;
-  max-height: 6rem;
+  aspect-ratio: 1/1;
+  width: 5rem;
+  height: 5rem;
 }
 
 .thumbnail svg {
diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx
index 98c3847..37385a5 100644
--- a/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@@ -1433,7 +1433,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
             )}
             <div className="col flex-grow-1">
               <div className="row">
-                <div className="col-sm-3 col-lg-2 pe-0 post-media">
+                <div className="col-auto pe-0 post-media">
                   <div className="">{this.thumbnail()}</div>
                 </div>
                 <div className="col-12 col-sm-9 col-lg-10">

From 7fbfa2f0efff27d90999c64c6005e9bee1b47db3 Mon Sep 17 00:00:00 2001
From: Alec Armbruster <35377827+alectrocute@users.noreply.github.com>
Date: Tue, 27 Jun 2023 19:55:40 -0400
Subject: [PATCH 2/4] Update src/shared/components/post/post-listing.tsx

Co-authored-by: Jay Sitter <jsit@users.noreply.github.com>
---
 src/shared/components/post/post-listing.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx
index 37385a5..e0b484c 100644
--- a/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@@ -1433,10 +1433,10 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
             )}
             <div className="col flex-grow-1">
               <div className="row">
-                <div className="col-auto pe-0 post-media">
+                <div className="col flex-grow-0 px-0">
                   <div className="">{this.thumbnail()}</div>
                 </div>
-                <div className="col-12 col-sm-9 col-lg-10">
+                <div className="col flex-grow-1">
                   {this.postTitleLine()}
                   {this.createdLine()}
                   {this.commentsLine()}

From 3ddff78d88f02e23f3cdafa51ee6119a7f2c2a96 Mon Sep 17 00:00:00 2001
From: Alec Armbruster <35377827+alectrocute@users.noreply.github.com>
Date: Tue, 27 Jun 2023 20:01:33 -0400
Subject: [PATCH 3/4] make hopefully final tweaks

---
 src/assets/css/main.css                     | 4 ++++
 src/shared/components/post/post-listing.tsx | 4 ++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index e5c163b..b999543 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -227,6 +227,10 @@ hr {
   text-overflow: ellipsis;
 }
 
+.overflow-hidden {
+  overflow: hidden;
+}
+
 .text-xs-center {
   text-align: center;
 }
diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx
index e0b484c..01a78b9 100644
--- a/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@@ -333,7 +333,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
       return (
         <button
           type="button"
-          className="d-inline-block position-relative mb-2 p-0 border-0"
+          className="thumbnail rounded overflow-hidden d-inline-block position-relative mb-2 p-0 border-0"
           data-tippy-content={I18NextService.i18n.t("expand_here")}
           onClick={linkEvent(this, this.handleImageExpandClick)}
           aria-label={I18NextService.i18n.t("expand_here")}
@@ -348,7 +348,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     } else if (!this.props.hideImage && url && thumbnail && this.imageSrc) {
       return (
         <a
-          className="text-body d-inline-block position-relative mb-2"
+          className="thumbnail rounded bg-light d-flex justify-content-center"
           href={url}
           rel={relTags}
           title={url}

From 202ab7c37f18d8b898c778c1c48c05dfa2b86c84 Mon Sep 17 00:00:00 2001
From: Alec Armbruster <35377827+alectrocute@users.noreply.github.com>
Date: Wed, 28 Jun 2023 10:55:17 -0400
Subject: [PATCH 4/4] remove .overflow-hidden

---
 src/assets/css/main.css | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index b999543..e5c163b 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -227,10 +227,6 @@ hr {
   text-overflow: ellipsis;
 }
 
-.overflow-hidden {
-  overflow: hidden;
-}
-
 .text-xs-center {
   text-align: center;
 }