fix: prevent hero title wrapping and fix text loop width

Author: pitzzahh

src/lib/motion-core/text-loop/TextLoop.svelte

@@ -87,7 +87,7 @@
 
 <span
   class={cn("font-inherit relative inline-block text-inherit", className)}
-  style="clip-path: inset(-100vh 0 -100vh 0);"
+  style="clip-path: inset(-100vh 0 -100vh 0); min-width: 200px;"
 >
   <span class="font-inherit invisible inline-block w-0 text-inherit" aria-hidden="true">&nbsp;</span
   >{#key currentIndex}<span

src/routes/(components)/hero.svelte

@@ -53,7 +53,7 @@
 
     <!-- Hero Title - above fold, play once -->
     <div class="flex min-h-25 flex-col items-center justify-center md:min-h-55 lg:min-h-52">
-      <h1 class="text-4xl font-bold tracking-tight md:text-6xl lg:text-7xl">
+      <h1 class="text-4xl font-bold tracking-tight whitespace-nowrap md:text-6xl lg:text-7xl">
         <span>{currentText === "Payments" ? "Generate" : "Track"}</span>
         <span class="inline-flex justify-center align-baseline">
           <TextLoop class="text-primary" {texts} bind:currentIndex interval={2500} />
@@ -73,7 +73,7 @@
     </p>
 
     <!-- Buttons - above fold, play once, no Magnetic -->
-    <div class="flex flex-col justify-center gap-4 sm:flex-row">
+    <div class="flex min-h-28 flex-col justify-center gap-4 sm:flex-row">
       {#if fullyAuthenticated}
         <Button
           data-sveltekit-reload