From 90c18286725a36562dc8e93d18d11416a9ef2652 Mon Sep 17 00:00:00 2001
From: Chuck Dries <chuck@chuckdries.com>
Date: Wed, 13 Jul 2022 14:51:16 -0700
Subject: [PATCH] padding

---
 src/components/index/ActionButtons.js | 14 ++++++++------
 src/pages/index.js                    | 10 ++++++----
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/components/index/ActionButtons.js b/src/components/index/ActionButtons.js
index d9588a9..5d25b04 100644
--- a/src/components/index/ActionButtons.js
+++ b/src/components/index/ActionButtons.js
@@ -7,11 +7,13 @@ import Shuffle from "@spectrum-icons/workflow/Shuffle";
 const getButtonClasses = (isClient) =>
   classnames(
     "z-20 rounded-md text-md inline-block px-2 py-1 mt-1 mr-2 text-md hover:underline",
-    isClient ? "cool-border-small hover:bg-vibrant" : "text-gray-300 bg-gray-700"
+    isClient
+      ? "cool-border-small hover:bg-vibrant"
+      : "text-gray-300 bg-gray-700"
   );
 
 const ActionButtons = ({ isClient, image, shuffleImage }) => (
-  <div className="flex flex-col">
+  <div className="flex flex-col mb-2">
     <div className="text-muted-light p-2 sm:p-4 m-1 sm:m-4 bg-muted-dark rounded-xl flex flex-col text-center z-10 cool-border-small-light">
       <h3 className="sm:mb-2 drop-shadow">Try my word game!</h3>
       <a
@@ -25,10 +27,10 @@ const ActionButtons = ({ isClient, image, shuffleImage }) => (
       <Link
         className={getButtonClasses(isClient, "muted")}
         id="image-link"
-          to={`/photogallery/${image.base}/`}
-        >
-          view image
-        </Link>
+        to={`/photogallery/${image.base}/`}
+      >
+        view image
+      </Link>
       <button
         className={getButtonClasses(isClient, "muted")}
         id="shuffle-button"
diff --git a/src/pages/index.js b/src/pages/index.js
index add5c72..e59dc02 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -142,13 +142,15 @@ const IndexPage = ({
             isClient={isClient}
           />
           <div
-            className={classnames("flex flex-col", !imageIsLandscape && "portrait:flex-auto ")}
+            className={classnames(
+              "flex flex-col",
+              !imageIsLandscape && "portrait:flex-auto "
+            )}
           >
             <div
               className={classnames(
-                "rounded-[50px] p-3 md:p-5 flex flex-col items-center z-10 border-r-[20px] border-b-[20px] mb-3 mx-2",
-                isClient ? "cool-border-big" : "bg-gray-50",
-                !imageIsLandscape && "landscape:mr-4" // text is on left side of image, make some room for drop shadow
+                "rounded-[50px] p-3 md:p-5 ml-2 mr-4 md:ml-3 md:mr-5 flex flex-col items-center z-10 border-r-[20px] border-b-[20px] mb-3",
+                isClient ? "cool-border-big" : "bg-gray-50"
               )}
             >
               <h1