fix: Overflow of body across leaderboard on mobile screen #1120 & Doc's navbar was not responsive #1129 (#1123)

Co-authored-by: Johannes <johannes@formbricks.com>
Co-authored-by: Johannes <72809645+jobenjada@users.noreply.github.com>

apps/formbricks-com/components/docs/Button.tsx

@@ -36,15 +36,16 @@ type ButtonProps = {
 
 export function Button({ variant = "primary", className, children, arrow, ...props }: ButtonProps) {
   className = clsx(
-    "inline-flex gap-0.5 justify-center overflow-hidden text-sm font-medium transition",
+    "inline-flex gap-0.5 justify-center items-center overflow-hidden font-medium transition text-center",
     variantStyles[variant],
-    className
+    className,
+    "px-5 py-2.5 text-xs"
   );
 
   let arrowIcon = (
     <ArrowIcon
       className={clsx(
-        "mt-0.5 h-5 w-5",
+        "mt-0.5 h-4 w-4",
         variant === "text" && "relative top-px",
         arrow === "left" && "-ml-1 rotate-180",
         arrow === "right" && "-mr-1"

apps/formbricks-com/components/docs/Header.tsx

@@ -1,15 +1,15 @@
 "use client";
 
-import { forwardRef } from "react";
-import Link from "next/link";
 import clsx from "clsx";
 import { motion, useScroll, useTransform } from "framer-motion";
+import Link from "next/link";
+import { forwardRef } from "react";
 
+import { FooterLogo } from "@/components/shared/Logo";
 import { Button } from "./Button";
+import { MobileNavigation, useIsInsideMobileNavigation, useMobileNavigationStore } from "./MobileNavigation";
 import { MobileSearch, Search } from "./Search";
 import { ThemeToggle } from "./ThemeToggle";
-import { FooterLogo } from "@/components/shared/Logo";
-import { useMobileNavigationStore, useIsInsideMobileNavigation, MobileNavigation } from "./MobileNavigation";
 
 function TopLevelNavItem({ href, children }: { href: string; children: React.ReactNode }) {
   return (
@@ -39,7 +39,7 @@ export const Header = forwardRef<React.ElementRef<"div">, { className?: string }
       ref={ref}
       className={clsx(
         className,
-        "fixed inset-x-0 top-0 z-50 flex h-14 items-center justify-between gap-12 px-4 transition sm:px-6 lg:left-72 lg:z-30 lg:px-8 xl:left-80",
+        "fixed inset-x-0 top-0 z-50 flex h-20 items-center justify-between gap-12 px-4 transition sm:px-6 lg:left-72 lg:z-30 lg:px-8 xl:left-80",
         !isInsideMobileNavigation && "backdrop-blur-sm dark:backdrop-blur lg:left-72 xl:left-80",
         isInsideMobileNavigation
           ? "bg-white dark:bg-slate-900"
@@ -64,10 +64,10 @@ export const Header = forwardRef<React.ElementRef<"div">, { className?: string }
           <FooterLogo className="h-8" />
         </Link>
       </div>
-      <div className="flex items-center gap-5">
-        <nav className="hidden md:block">
+      <div className="flex items-center gap-6">
+        <nav className="hidden lg:block">
           <ul role="list" className="flex items-center gap-8">
-            <TopLevelNavItem href="/docs/introduction/what-is-formbricks">Documentation</TopLevelNavItem>
+          
             <TopLevelNavItem href="https://github.com/formbricks/formbricks">
               Star us on GitHub
             </TopLevelNavItem>

apps/formbricks-com/pages/formtribe/HeaderLight.tsx

@@ -48,7 +48,7 @@ export default function HeaderLight() {
       </div>
 
       {/* Mobile Menu */}
-      <div className="flex items-center md:hidden">
+      <div className="flex items-center pr-4 md:hidden">
         <Popover open={mobileNavMenuOpen} onOpenChange={setMobileNavMenuOpen}>
           <PopoverTrigger onClick={() => setMobileNavMenuOpen(!mobileNavMenuOpen)}>
             <span>

apps/formbricks-com/pages/formtribe/index.tsx

@@ -439,10 +439,6 @@ const Leaderboard = [
     points: "150",
     link: "https://github.com/ratishjain12",
   },
-  {
-    name: "yatharth",
-    points: "600",
-  },
   {
     name: "Subham Raj",
     points: "500",
@@ -499,10 +495,6 @@ const Leaderboard = [
     name: "bitnagar",
     points: "100",
   },
-  {
-    name: "bitnagar",
-    points: "400",
-  },
   {
     name: "United1l",
     points: "250",
@@ -568,7 +560,7 @@ export default function FormTribeHackathon() {
         {/* Right Column: Headline + Ordered List */}
         <div className="flex items-center justify-center sm:pl-12 md:w-1/2">
           <div className="space-y-5">
-            <h1 className="font-kablammo text-3xl font-bold text-slate-800">In a nutshell</h1>
+            <h1 className="font-kablammo text-3xl text-slate-800">In a nutshell</h1>
             <ol className="list-inside list-decimal space-y-3 text-slate-700">
               <li>
                 <strong>As a community,</strong> we will ship all link survey features for a Typeform like
@@ -787,7 +779,7 @@ export default function FormTribeHackathon() {
 
       {/* Side Quests */}
       <div className="mt-16" id="side-quests">
-        <h3 className="font-kablammo my-4 text-4xl font-bold text-slate-800">
+        <h3 className="font-kablammo my-4 text-4xl text-slate-800">
           🏰 Side Quests: Increase your chances
         </h3>
         <p className="w-3/4 text-slate-600">
@@ -924,7 +916,7 @@ export default function FormTribeHackathon() {
 
       {/* FAQ */}
       <div className="mt-32" id="faq">
-        <h3 className="font-kablammo my-4 text-4xl font-bold text-slate-800">FAQ</h3>
+        <h3 className="font-kablammo my-4 text-4xl text-slate-800">FAQ</h3>
         <p className="w-3/4 text-slate-600">Anything unclear?</p>
         <div className="mt-8">
           {FAQ.map((question) => (
@@ -949,11 +941,12 @@ export default function FormTribeHackathon() {
 const SectionHeading = ({ title, subTitle, description, id }) => {
   return (
     <div id={id} className="lg:pt-18 mt-32 px-4 pb-12 text-center sm:px-6 lg:px-8 ">
-      <p className=" text-[3rem] text-slate-500">{subTitle}</p>
-      <h1 className="font-kablammo mb-8 mt-4 bg-gradient-to-br from-[#032E1E] via-[#032E1E] to-[#013C27] bg-clip-text text-6xl text-transparent">
+      <p className="text-xl lg:text-[3rem] pb-4 text-slate-500">{subTitle}</p>
+      <h1 className="font-kablammo mb-8 mt-4 bg-gradient-to-br from-[#032E1E] via-[#032E1E] to-[#013C27] bg-clip-text text-4xl lg:text-6xl text-transparent">
         {title}
       </h1>
-      <p className="mx-auto mt-4 text-slate-700 sm:w-3/4">{description}</p>
+      <p className="mx-auto mt-4 text-base text-slate-700 sm:w-3/4">{description}</p>{" "}
+      {/* Reduced text size for description */}
     </div>
   );
 };