Tweak mobile styles

Author: hasparus

src/app/conf/2025/components/testimonials/index.tsx

@@ -82,7 +82,7 @@ export function TestimonialsList({
       {testimonials.map((testimonial, i) => (
         <div
           key={i}
-          className="flex shrink-0 flex-row-reverse items-center gap-6 max-md:flex-col md:px-10"
+          className="flex max-w-full shrink-0 flex-row-reverse items-center gap-6 max-md:flex-col md:px-10"
         >
           <div>
             <p className="typography-body-lg max-w-[100vw] !leading-[1.1] max-md:text-center sm:max-w-[calc(100vw-32px)] md:max-w-[544px]">

src/components/index-page/graphql-advantages/optimization.tsx

@@ -6,7 +6,7 @@ export function OptimizationFigure() {
       className="flex w-full bg-gradient-to-b from-[hsla(75,57%,97%,0)] to-white px-[14px] py-[30px] dark:to-neu-100/20 xl:px-[46px] [&_pre]:!h-48"
       aria-hidden
     >
-      <OptimizationSvg />
+      <OptimizationSvg className="max-w-full max-sm:h-[200px]" />
     </div>
   )
 }

src/components/index-page/join-the-community.tsx

@@ -5,7 +5,7 @@ import { DiscordIcon } from "@/icons"
 
 export function JoinTheCommunity() {
   return (
-    <section className="gql-section lg:pb-16 xl:pb-24">
+    <section className="gql-section max-sm:px-0 lg:pb-16 xl:pb-24">
       <div className="gql-container typography-body-lg flex bg-pri-dark text-white dark:bg-pri-darker max-lg:flex-col">
         <div className="border-pri-light p-6 max-lg:border-b lg:border-r lg:p-16">
           <h2 className="typography-h2 text-balance">Join the community</h2>

src/components/index-page/powered-by-community.tsx

@@ -4,7 +4,7 @@ import ArrowDownIcon from "@/app/conf/_design-system/pixelarticons/arrow-down.sv
 
 export function PoweredByCommunity() {
   return (
-    <section className="gql-section lg:pb-16 xl:pb-24">
+    <section className="gql-section max-sm:px-0 lg:pb-16 xl:pb-24">
       <div className="gql-container dark typography-body-lg flex bg-pri-darker text-neu-900 max-lg:flex-col">
         <div className="border-pri-light p-6 max-lg:border-b lg:border-r lg:p-16">
           <h2 className="typography-h2 text-balance">

src/components/index-page/quotes-from-the-industry.tsx

@@ -61,8 +61,12 @@ export function QuotesFromTheIndustry() {
   return (
     <div className="gql-container py-8 max-md:px-4 md:pb-16 md:pt-24 md:[mask-image:linear-gradient(to_right,transparent,black_5%,black_95%,transparent)]">
       <div className="gql-section !py-0">
-        <SectionLabel>Quotes from the industry</SectionLabel>
-        <h2 className="typography-h2 mt-6">Loved by world-class devs</h2>
+        <SectionLabel className="max-sm:-ml-1 max-sm:justify-center">
+          Quotes from the industry
+        </SectionLabel>
+        <h2 className="typography-h2 mt-6 text-balance max-sm:text-center">
+          Loved by world‑class devs
+        </h2>
       </div>
       <TestimonialsList
         testimonials={testimonials}