misc: minor responsive fixes

Author: lassiecoder

src/app/pages/contact.tsx

@@ -20,9 +20,15 @@ const ContactForm = () => {
     <div className="max-w-7xl mx-auto px-4 mt-44 ">
       <div className="px-4">
         <h2 className="md:text-4xl text-2xl lg:text-4xl font-bold text-left pb-12 xl:pl-0 lg:mb-0 sm:mb-0 relative z-10 w-[100%]">
-          <div className="flex flex-row header-container">
+          {/* <div className="flex flex-row header-container"> */}
+          <div className="flex flex-col items-start w-full sm:flex-row sm:header-container">
             <div className="title-box">
-              <p className="text">I&apos;m open for</p>
+              <p
+                className="text"
+                style={{ width: "max-content", marginRight: "0.8rem" }}
+              >
+                I&apos;m open for
+              </p>
             </div>
             <div className="subtitle-box">
               <FlipWords words={words} duration={1000} />
@@ -74,6 +80,7 @@ const ContactForm = () => {
           className="h-8 w-auto rounded-lg"
           width={100}
           height={40}
+          style={{ width: "100%", height: "auto" }}
         />
       </Link>
       <div className="text-sm pt-60 sm:mt-20 font-light text-center relative z-20 text-gray-400 max-w-7xl pb-8">

src/components/footer.tsx

@@ -22,19 +22,20 @@ export default function Footer() {
   return (
     <div className="flex bg-black w-full items-center xl:px-8 lg:px-8 md:px-8 px-4 pt-6">
       {/* Container that changes between centered/between based on screen size */}
-      <div className="w-full flex justify-center md:justify-between items-center">
+      <div className="w-full flex justify-center md:justify-between sm:justify-between items-center">
         {/* Left Side - GitHub Sponsor Button */}
         <Link
           href={"https://github.com/sponsors/lassiecoder"}
-          className="inline-flex items-center ml-4 w-[100px] h-[40px]"
+          className="inline-flex items-center mr-4 w-[100px] h-[40px]"
           onClick={trackSponsorClick}
         >
           <Image
             src="https://github.com/user-attachments/assets/0ed0e2e6-01fe-44ab-9f0e-24cd7fe44b9f"
             alt="Sponsor lassiecoder on GitHub"
             className="h-8 w-auto rounded-lg"
             width={100}
-            height={40}
+            height={10}
+            style={{ width: "100%", height: "auto" }}
           />
         </Link>
 

src/components/ui/flip-words.tsx

@@ -58,7 +58,7 @@ export const FlipWords = ({
         }}
         {...{
           className: cn(
-            "z-10 inline-block relative text-left text-white dark:text-neutral-100 px-2",
+            "z-10 inline-block relative text-white dark:text-neutral-100 ",
             className
           )
         }}