padding

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"