From f5dadafb688734b4eab67e59cf5de8aa782ab7d4 Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Mon, 8 Jun 2026 16:01:32 +0200
Subject: [PATCH] fix: compute section badges design on mobile (#46724)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/www/components/Pricing/PricingComputeSection.tsx b/apps/www/components/Pricing/PricingComputeSection.tsx
index b91d886c388..09e2e38bb8f 100644
--- a/apps/www/components/Pricing/PricingComputeSection.tsx
+++ b/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>