Fix mobile UI issues on landing page

.github/workflows/claude-code-review.yml

@@ -85,7 +85,7 @@ jobs:
           allowed_tools: "Bash(yarn build),Bash(yarn test),Bash(yarn lint)"
 
           # Optional: Allow specific bots to trigger this workflow
-          allowed_bots: "greptile-apps"
+          allowed_bots: "greptile-apps,codegen-sh"
 
           # Optional: Skip review for certain conditions
           if: |

bifrost/components/home/Hero.tsx

@@ -10,11 +10,11 @@ const Hero = () => {
   return (
     <div
       className={cn(
-        "flex flex-col justify-top h-auto lg:h-[500px] 2xl:h-[550px] relative lg:w-[1300px] 2xl:w-[1500px]",
+        "flex flex-col justify-top h-auto lg:h-[500px] 2xl:h-[550px] relative lg:w-[1300px] 2xl:w-[1500px] px-4 md:px-8",
         ISLAND_WIDTH
       )}
     >
-      <div className="flex flex-wrap gap-x-12 gap-y-4 items-center mt-12 lg:mt-0 mb-12">
+      <div className="flex flex-col sm:flex-row sm:flex-wrap gap-x-12 gap-y-4 items-center mt-8 lg:mt-0 mb-8 lg:mb-12">
         <div className="flex items-center gap-2 text-sm font-medium whitespace-nowrap">
           <p>Backed by</p>
           <Image
@@ -29,20 +29,20 @@ const Hero = () => {
         <Image
           src="/static/home/productoftheday.webp"
           alt="Product of the Day"
-          className="w-32 h-auto"
+          className="w-32 h-auto mt-2 sm:mt-0"
           width={128}
           height={32}
           priority
         />
       </div>
-      <h1 className="text-xl sm:text-7xl md:text-[84px] font-semibold mb-3 w-full max-w-4xl text-wrap text-black z-[10]">
+      <h1 className="text-4xl sm:text-6xl md:text-7xl lg:text-[84px] font-semibold mb-3 w-full max-w-4xl text-wrap text-black z-[10]">
         Build Reliable
         <br />
         <span className="text-brand">AI Apps</span>
       </h1>
-      <p className="text-lg sm:text-xl 2xl:text-2xl text-landing-secondary font-light mb-6 lg:mb-12 z-[10]">
+      <p className="text-base sm:text-lg md:text-xl 2xl:text-2xl text-landing-secondary font-light mb-6 lg:mb-12 z-[10]">
         The world&apos;s fastest-growing AI companies rely on Helicone
-        <br />
+        <br className="hidden sm:block" />
         to route, debug, and analyze their applications.
       </p>
       <div className="flex flex-col md:flex-row gap-4">

bifrost/components/home/Stats.tsx

@@ -56,36 +56,38 @@ const Stats = ({
       <div
         className={cn(
           ISLAND_WIDTH,
-          "flex justify-between items-start pt-0 pb-32"
+          "flex flex-col md:flex-row justify-between items-start pt-0 pb-16 md:pb-32 px-4 md:px-8"
         )}
       >
-        <h1 className="gap-y-4 text-3xl md:text-6xl font-semibold !leading-[150%] text-black max-w-[1100px] text-wrap">
+        <h1 className="gap-y-4 text-2xl sm:text-3xl md:text-6xl font-semibold !leading-[150%] text-black max-w-[1100px] text-wrap mb-4 md:mb-0">
           Today,{" "}
           <span
             ref={elementRef}
             className={cn(
-              "inline-block bg-[#E7F6FD] border-[3px] border-brand rounded-xl py-1 px-5 text-brand translate-y-[-10px] transition-transform duration-500 text-nowrap",
-              isVisible ? "rotate-[-3deg]" : "rotate-[0  deg]"
+              "inline-block bg-[#E7F6FD] border-[3px] border-brand rounded-xl py-1 px-3 md:px-5 text-brand translate-y-[-5px] md:translate-y-[-10px] transition-transform duration-500",
+              isVisible ? "rotate-[-3deg]" : "rotate-[0deg]"
             )}
           >
             {humanReadableNumber(totalValuesData?.total_requests ?? 0)}
           </span>{" "}
-          requests processed,{" "}
-          <span className="text-brand">
-            {humanReadableNumber(totalValuesData?.total_tokens ?? 0)}
-          </span>{" "}
-          tokens logged and <span className="text-brand">18.3 million</span>{" "}
-          users tracked
+          <span className="block md:inline">
+            requests processed,{" "}
+            <span className="text-brand">
+              {humanReadableNumber(totalValuesData?.total_tokens ?? 0)}
+            </span>{" "}
+            tokens logged and <span className="text-brand">18.3 million</span>{" "}
+            users tracked
+          </span>
         </h1>
-        <div className="flex gap-2 items-center md:gap-4">
+        <div className="flex gap-2 items-center md:gap-4 self-end md:self-start">
           <Link href="https://us.helicone.ai/open-stats" target="_blank" rel="noopener">
             <Button
               variant="ghost"
               size="landing_page"
-              className="hover:bg-brand hover:border-brand hover:text-white p-5 text-base md:text-2xl md:py-4 lg:py-6 lg:px-6 lg:text-md gap-2 rounded-lg items-center z-[10]"
+              className="hover:bg-brand hover:border-brand hover:text-white p-3 md:p-5 text-base md:text-2xl md:py-4 lg:py-6 lg:px-6 lg:text-md gap-2 rounded-lg items-center z-[10]"
             >
               Live
-              <ArrowUpRight className="size-5 md:size-6" />
+              <ArrowUpRight className="size-4 md:size-5 lg:size-6" />
             </Button>
           </Link>
         </div>

bifrost/components/layout/navbar.tsx

@@ -148,14 +148,14 @@ const MobileNav = () => {
 
   return (
     <nav className="lg:hidden" aria-label="Global">
-      <div className="fixed inset-x-0 top-0 z-50 bg-background">
+      <div className="fixed inset-x-0 top-[42px] z-50 bg-background">
         <MobileHeader
           menuDispatch={[menuOpen, setMenuOpen]}
           className="pl-2 pr-4"
         />
       </div>
       {menuOpen && (
-        <div className="fixed inset-0 top-[57px] z-50 bg-background">
+        <div className="fixed inset-0 top-[99px] z-50 bg-background">
           <div className="h-full pb-10 overflow-y-auto">
             <div className="flex flex-col gap-4 pt-3 px-4">
               {/* Login and Contact Buttons */}