improve style of active section, limit size on step 4

frontend/frontend/src/components/Home/Progress.js

@@ -24,6 +24,7 @@ const ProgressSection = ({ num, item, passed, isActive, onClick }) => {
         className={classnames(
           'text-lg font-bold',
           passed ? 'text-blue-500' : 'text-gray-500',
+          isActive ? '-mt-[5px]' : '',
         )}
       >
         {`Step ${num + 1}`}

frontend/frontend/src/pages/Home/stages/Display.js

@@ -43,30 +43,32 @@ const DisplayStage = ({ userId, themeSuffix }) => {
   return (
     <div className="w-full flex flex-wrap">
       <ToastContainer />
-      <div className="h-auto lg:w-2/5 md:w-1/2 pr-10 p-10 rounded-sm bg-gray-200">
-        <div>
-          Copy the image URL or download the PNG. Share on GitHub, Twitter,
-          LinkedIn, or anywhere else!
-        </div>
-        <br />
-        <div className="flex flex-col items-center">
-          {[
-            { title: 'Copy URL', active: true, onClick: copyUrl },
-            { title: 'Download PNG', active: true, onClick: downloadPNG },
-          ].map((item, index) => (
-            <Button
-              key={index}
-              className={classnames(
-                'm-4 w-60 flex justify-center',
-                item.active
-                  ? 'bg-blue-500 text-white'
-                  : 'bg-gray-300 text-gray-500 cursor-not-allowed',
-              )}
-              onClick={item.onClick}
-            >
-              {item.title}
-            </Button>
-          ))}
+      <div className="h-auto lg:w-2/5 md:w-1/2">
+        <div className="pr-10 p-10 rounded-sm bg-gray-200">
+          <div>
+            Copy the image URL or download the PNG. Share on GitHub, Twitter,
+            LinkedIn, or anywhere else!
+          </div>
+          <br />
+          <div className="flex flex-col items-center">
+            {[
+              { title: 'Copy URL', active: true, onClick: copyUrl },
+              { title: 'Download PNG', active: true, onClick: downloadPNG },
+            ].map((item, index) => (
+              <Button
+                key={index}
+                className={classnames(
+                  'm-4 w-60 flex justify-center',
+                  item.active
+                    ? 'bg-blue-500 text-white'
+                    : 'bg-gray-300 text-gray-500 cursor-not-allowed',
+                )}
+                onClick={item.onClick}
+              >
+                {item.title}
+              </Button>
+            ))}
+          </div>
         </div>
       </div>
       <div className="w-full lg:w-3/5 md:w-1/2 object-center pt-5 md:pt-0 pl-0 md:pl-5 lg:pl-0">
@@ -75,7 +77,6 @@ const DisplayStage = ({ userId, themeSuffix }) => {
             title="Your Card"
             description="The finished product!"
             imageSrc={`${themeSuffix}&disable_animations=true`}
-            selected
           />
         </div>
       </div>