From 3c28d98c32e133efe53c8d546165373052f3de87 Mon Sep 17 00:00:00 2001
From: jamesvici <jamesp@vicidial.com>
Date: Tue, 15 Sep 2026 20:03:24 -0400
Subject: [PATCH] Contain the floated thumbnail so listing spacing actually
 applies

The gap between listing items was collapsing to 11-33px and varying per
item, despite a 50px margin. The thumbnail floats left and nothing
contained it, so whenever the excerpt was shorter than the 150px image
-- which is most of them now the column is the full 930px rather than
the theme's 650px -- the image overflowed the item and the margin below
it was absorbed.

.post/.hentry now use display: flow-root, so the item wraps its own
float and the margin is measured below the image. Measured against the
live old site: it has no overflow (-6px) and a steady 42px gap; this was
overflowing by 39-61px. Both sites now sit at a consistent 60px.

That also makes the theme's trailing <br /> and clear div redundant --
they existed only to escape the float -- so the listing markup drops
them and the wrapping Fragment with them.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 src/pages/blog/index.astro | 4 ----
 src/pages/index.astro      | 4 ----
 src/styles/global.css      | 6 +++++-
 3 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index fc3d0a7..a089e6f 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -8,7 +8,6 @@ const posts = (await getCollection('posts')).sort((a, b) => b.data.date.getTime(
 
 <BaseLayout title="Blog | VICIdial.com">
   {posts.map((post) => (
-  <Fragment key={post.id}>
     <div class="post hentry" id={`post-${post.id}`}>
       <a href={`/blog/${post.data.slug}`}>
         <h2 class="post-title">{post.data.title}</h2>
@@ -16,8 +15,5 @@ const posts = (await getCollection('posts')).sort((a, b) => b.data.date.getTime(
       </a>
       <p>{post.data.excerpt}<a href={`/blog/${post.data.slug}`} class="read-more">Read the Rest...</a></p>
     </div>
-    <br />
-    <div class="clear"> </div>
-  </Fragment>
   ))}
 </BaseLayout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 6cfc910..e762896 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -16,7 +16,6 @@ const posts = (await getCollection('posts')).sort((a, b) => b.data.date.getTime(
   <FeaturedBox />
 
   {posts.map((post) => (
-  <Fragment key={post.id}>
     <div class="post hentry" id={`post-${post.id}`}>
       <a href={`/blog/${post.data.slug}`}>
         <h2 class="post-title">{post.data.title}</h2>
@@ -27,9 +26,6 @@ const posts = (await getCollection('posts')).sort((a, b) => b.data.date.getTime(
       </a>
       <p>{post.data.excerpt}<a href={`/blog/${post.data.slug}`} class="read-more">Read the Rest...</a></p>
     </div>
-    <br />
-    <div class="clear"> </div>
-  </Fragment>
   ))}
 
   <div class="content-ver-sep"> </div>
diff --git a/src/styles/global.css b/src/styles/global.css
index 3a9b5f1..64b6e20 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1144,8 +1144,12 @@ h3.arc-src {
 .post, 
 .hentry, 
 .no-results {
+	/* flow-root contains the floated thumbnail. Without it the image overflows the item
+	   and eats the margin below, so the gap collapses whenever the excerpt is shorter
+	   than the image -- which it is at full width, unlike the theme's 650px column. */
+	display: flow-root;
 	/* Theme default was 20px; widened to give listing items clearer separation. */
-	margin-bottom: 50px;
+	margin-bottom: 60px;
 	
 }