Remove paddings on narrow mobiles

Author: hasparus

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

@@ -49,7 +49,7 @@ export function ConsistencyFigure() {
   return (
     <section
       id="type-system"
-      className="nextra-codeblocks flex w-full bg-gradient-to-b from-transparent to-sec-lighter px-[14px] py-[30px] dark:to-sec-darker/25 xl:px-[46px] [&_pre]:!h-[420px]"
+      className="nextra-codeblocks flex w-full bg-gradient-to-b from-transparent to-sec-lighter px-[14px] py-[30px] dark:to-sec-darker/25 max-[360px]:px-0 xl:px-[46px] max-[360px]:[&_:is(.rounded-t-md,pre)]:rounded-none [&_pre]:!h-[370px] md:[&_pre]:!h-[420px]"
     >
       <div
         className="nextra-codeblocks grid w-full grid-cols-2 [&_.highlighted]:!bg-pri-lighter/50 dark:[&_.highlighted]:!bg-neu-200/10"

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

@@ -11,8 +11,8 @@ import { VersionlessFigure } from "./versionless"
 
 export function GraphQLAdvantages() {
   return (
-    <section className="bg-neu-50 dark:bg-neu-50/25">
-      <div className="gql-container gql-section">
+    <section className="overflow-x-hidden bg-neu-50 dark:bg-neu-50/25">
+      <div className="gql-container gql-section lg:py-16">
         <SectionLabel>GraphQL advantages</SectionLabel>
         <div className="mt-8 flex flex-col gap-y-10 lg:gap-y-16 xl:gap-y-24">
           <Subsection

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

@@ -93,7 +93,7 @@ export function PrecisionFigure() {
     <div
       ref={ref}
       id="predictable-results"
-      className="nextra-codeblocks flex w-full bg-gradient-to-b from-transparent to-sec-lighter px-[14px] py-[30px] *:w-1/2 dark:to-sec-darker/25 xl:px-[46px] [&_pre]:!h-48"
+      className="nextra-codeblocks flex w-full max-w-[100vw] bg-gradient-to-b from-transparent to-sec-lighter px-[14px] py-[30px] *:w-1/2 dark:to-sec-darker/25 max-[360px]:px-0 xl:px-[46px] max-[360px]:[&_:is(.rounded-t-md,pre)]:rounded-none [&_pre]:!h-48"
       aria-hidden
     >
       <Pre data-filename="Query" className="p-4">

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

@@ -32,7 +32,7 @@ export function VersionlessFigure() {
 
   return (
     <section
-      className="flex w-full bg-gradient-to-b from-pri-lighter/[.05] to-pri-lighter/40 px-[14px] py-[30px] dark:from-sec-darker/[.01] dark:to-pri-light/10 xl:px-[46px]"
+      className="flex w-full max-w-[100vw] bg-gradient-to-b from-pri-lighter/[.05] to-pri-lighter/40 px-[14px] py-[30px] dark:from-sec-darker/[.01] dark:to-pri-light/10 max-[360px]:px-0 xl:px-[46px] max-[360px]:[&_div]:rounded-none"
       id="without-versions"
     >
       <div

src/components/index-page/index.tsx

@@ -2,7 +2,6 @@ import { Hero } from "./hero"
 import { TrustedBy } from "./trusted-by"
 import { SingleRequest } from "./single-request"
 import { BringYourOwnCode } from "./bring-your-own-code"
-import { WhoIsUsing } from "./who-is-using"
 import { HowItWorks } from "./how-it-works"
 import { ProvenSolution } from "./proven-solution"
 import { FivePillars } from "./five-pillars"
@@ -31,7 +30,6 @@ export function IndexPage() {
       </section>
       <SingleRequest />
       <BringYourOwnCode />
-      <WhoIsUsing />
     </div>
   )
 }