fix: compute section badges design on mobile (#46724)

Before:
<img width="1440" height="1437" alt="image"
src="https://github.com/user-attachments/assets/43b336bc-c52f-4b82-8177-69c9b959a38e"
/>

After:
<img width="365" height="434" alt="image"
src="https://github.com/user-attachments/assets/c14777e2-e65f-4a1f-8804-1042eb2d1246"
/>


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Style**
* Updated the pricing callout to use a responsive layout so the price
and accompanying text stack on small screens and align side-by-side on
larger screens for improved spacing and readability.
* Adjusted the price badge to prevent text wrapping, ensuring the “$10”
label remains visible and consistent across devices.
* Tuned margins and vertical spacing for better alignment across
breakpoints.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

apps/www/components/Pricing/PricingComputeSection.tsx

@@ -116,14 +116,14 @@ const PricingComputeSection = () => {
       </div>
       <hr className="border-0 border-t" />
       <div className="flex flex-col">
-        <div className="flex gap-2 p-6 justify-between items-center mt-2">
+        <div className="flex flex-col items-start md:flex-row gap-2 p-6 justify-between md:items-center mt-2">
           <div className="grid gap-2">
             <p>
-              <span className="border bg-alternative px-3 py-0.5 text-foreground text-sm rounded-full">
+              <span className="border bg-alternative px-3 py-0.5 text-foreground text-sm rounded-full text-nowrap">
                 Starts from <span translate="no">$10</span>/month
               </span>
             </p>
-            <h3 className="text-foreground text-2xl">
+            <h3 className="text-foreground text-2xl ml-0.5 md:ml-0 mb-2 md:mb-0">
               Scale compute up to
               <br className="hidden sm:block" /> 64 cores and 256 GB RAM
             </h3>