From 155864e59add288150b36f7d242fb7b54553f8a8 Mon Sep 17 00:00:00 2001
From: Tim Zielonko <tim.zielonko@sourcegraph.com>
Date: Tue, 10 May 2022 14:41:11 -0500
Subject: [PATCH] responsive spacing on press and blog list items

---
 src/components/Blog/BlogListItem.tsx         | 48 +++++++++++---------
 src/components/Blog/PressReleaseListItem.tsx | 48 +++++++++++---------
 2 files changed, 54 insertions(+), 42 deletions(-)

diff --git a/src/components/Blog/BlogListItem.tsx b/src/components/Blog/BlogListItem.tsx
index 64f7abf9..b4d899c6 100644
--- a/src/components/Blog/BlogListItem.tsx
+++ b/src/components/Blog/BlogListItem.tsx
@@ -35,29 +35,35 @@ export const BlogListItem: FunctionComponent<PostIndexItem> = ({
         </header>
         {slugPath && (
             <div className="card-body pt-0 d-flex flex-card">
-                <div className="flex-1 w-75">
-                    {frontmatter.description ? (
-                        <p>{truncate(frontmatter.description, { length: 300 })}</p>
-                    ) : (
-                        <p>{excerpt}</p>
+                <div className="row">
+                    <div className="col-md-9 pb-3 pb-md-0">
+                        {frontmatter.description ? (
+                            <p>{truncate(frontmatter.description, { length: 300 })}</p>
+                        ) : (
+                            <p>{excerpt}</p>
+                        )}
+                        <div className="text-center text-sm-left">
+                            <Link href={`/blog/${slugPath}`} passHref={true}>
+                                {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+                                <a className="font-weight-bold">Read more</a>
+                            </Link>
+                        </div>
+                    </div>
+                    {frontmatter.heroImage && (
+                        <div className="col-md-3 d-flex justify-content-center">
+                            <Link href={`/blog/${slugPath}`} passHref={true}>
+                                {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+                                <a>
+                                    <img
+                                        className="w-100"
+                                        src={frontmatter.heroImage}
+                                        alt={frontmatter.title}
+                                    />
+                                </a>
+                            </Link>
+                        </div>
                     )}
-                    <Link href={`/blog/${slugPath}`} passHref={true}>
-                        {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-                        <a className="font-weight-bold">Read more</a>
-                    </Link>
                 </div>
-                {frontmatter.heroImage && (
-                    <Link href={`/blog/${slugPath}`} passHref={true}>
-                        {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-                        <a>
-                            <img
-                                className="max-w-100 max-h-150 flex-1 max-w-250"
-                                src={frontmatter.heroImage}
-                                alt={frontmatter.title}
-                            />
-                        </a>
-                    </Link>
-                )}
             </div>
         )}
     </div>
diff --git a/src/components/Blog/PressReleaseListItem.tsx b/src/components/Blog/PressReleaseListItem.tsx
index 068cf620..4532418c 100644
--- a/src/components/Blog/PressReleaseListItem.tsx
+++ b/src/components/Blog/PressReleaseListItem.tsx
@@ -34,29 +34,35 @@ export const PressReleaseListItem: FunctionComponent<PostIndexItem> = ({
         </header>
         {slugPath && (
             <div className="card-body pt-0 d-flex flex-card">
-                <div className="flex-1 w-75">
-                    {frontmatter.description ? (
-                        <p>{truncate(frontmatter.description, { length: 300 })}</p>
-                    ) : (
-                        <p>{excerpt}</p>
+                <div className="row w-100">
+                    <div className="col-md-10 pb-3 pb-md-0">
+                        {frontmatter.description ? (
+                            <p>{truncate(frontmatter.description, { length: 300 })}</p>
+                        ) : (
+                            <p>{excerpt}</p>
+                        )}
+                        <div className="text-center text-sm-left">    
+                            <Link href={`/press-release/${slugPath}`} passHref={true}>
+                                {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+                                <a className="font-weight-bold">Read more</a>
+                            </Link>
+                        </div>
+                    </div>
+                    {frontmatter.heroImage && (
+                        <div className="col-md-2 d-flex justify-content-center">
+                            <Link href={`/press-release/${slugPath}`} passHref={true}>
+                                {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+                                <a>
+                                    <img
+                                        className="max-h-150"
+                                        src={frontmatter.heroImage}
+                                        alt={frontmatter.title}
+                                    />
+                                </a>
+                            </Link>
+                        </div>
                     )}
-                    <Link href={`/press-release/${slugPath}`} passHref={true}>
-                        {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-                        <a className="font-weight-bold">Read more</a>
-                    </Link>
                 </div>
-                {frontmatter.heroImage && (
-                    <Link href={`/press-release/${slugPath}`} passHref={true}>
-                        {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-                        <a>
-                            <img
-                                className="max-w-100 max-h-150 flex-1 max-w-250"
-                                src={frontmatter.heroImage}
-                                alt={frontmatter.title}
-                            />
-                        </a>
-                    </Link>
-                )}
             </div>
         )}
     </div>