fix(landing): scrollbar offset fix (#704)

fixes these 2 offsets when a scrollbar is present
<img width="188" height="154" alt="Screenshot 2026-01-06 at 10 53 43 PM"
src="https://github.com/user-attachments/assets/d9db27f6-e297-4542-9702-2b656b5b2e2d"
/>
<img width="323" height="260" alt="Screenshot 2026-01-06 at 10 54 05 PM"
src="https://github.com/user-attachments/assets/472b790f-5905-42a1-867c-c42cfcbe6b01"
/>

also moved container width to a central `--x` variable so it's
consistent wherever it's used to calculate offsets (sidebars,
header-divider, footer, etc.)

Author: PickleNik

packages/mcp-cloudflare/src/client/app.tsx

@@ -32,7 +32,15 @@ export default function App() {
   };
 
   return (
-    <div className="overflow-x-clip max-w-screen relative">
+    <div
+      className="overflow-x-clip max-w-screen relative w-full"
+      style={
+        {
+          "container-type": "inline-size",
+          "--scrollbar-width": "calc(100vw - 100cqw)",
+        } as React.CSSProperties
+      }
+    >
       {/* //!NOTE: order matters for z- */}
       <Sidebars isChatOpen={isChatOpen} toggleChat={toggleChat} />
       <Header toggleChat={toggleChat} isChatOpen={isChatOpen} />

packages/mcp-cloudflare/src/client/components/hero/header-divider.tsx

@@ -1,8 +1,8 @@
 export function HeaderDivider() {
   return (
-    <div className="sticky top-17 z-50 sm:-mb-64 sm:mt-64 md:-mb-58 md:mt-58 xl:-mb-44 xl:mt-44 2xl:-mb-38 2xl:mt-38 w-screen border-b-[1px] border-violet-300/20 [--x:0] sm:[--x:40rem] md:[--x:48rem] lg:[--x:48rem] xl:[--x:72rem] 2xl:[--x:90rem]">
-      <div className="absolute top-0 left-[calc((100vw-var(--x))/2)] -translate-x-[calc(50%+0.5px)] -translate-y-1/2 h-4 w-4 border bg-white/5 backdrop-blur border-violet-300/20" />
-      <div className="absolute top-0 right-0 sm:right-[calc((100vw-var(--x))/2)] translate-x-[calc(50%+0.5px)] -translate-y-1/2 h-4 w-4 border bg-white/5 backdrop-blur border-violet-300/20" />
+    <div className="sticky top-[calc(var(--spacing)_*_17_-_1px)] z-50 sm:-mb-64 sm:mt-64 md:-mb-58 md:mt-58 xl:-mb-44 xl:mt-44 2xl:-mb-38 2xl:mt-38 w-full border-b-[1px] border-violet-300/20">
+      <div className="absolute top-0 left-(--sidebar-width) -translate-x-[calc(50%+0.5px)] -translate-y-1/2 size-4 border bg-white/5 backdrop-blur border-violet-300/20" />
+      <div className="absolute top-0 right-0 sm:right-(--sidebar-width) translate-x-[calc(50%+0.5px)] -translate-y-1/2 size-4 border bg-white/5 backdrop-blur border-violet-300/20" />
     </div>
   );
 }

packages/mcp-cloudflare/src/client/components/home-layout/footer.tsx

@@ -4,8 +4,8 @@ export default function Footer({ isChatOpen }: { isChatOpen: boolean }) {
   return (
     <>
       <div
-        className={`group inset-x-0 bottom-14 bg-background-2 w-full sm:h-40 max-sm:gap-4 bg-fixed z-10 border-t flex-col bg-clip-padding border-white/20 flex font-mono py-6 justify-around motion-safe:duration-300 [--x:0] xl:[--x:20rem] 2xl:[--x:24rem] ${
-          isChatOpen && "xl:-translate-x-[var(--x)]"
+        className={`group inset-x-0 bottom-14 bg-background-2 w-full sm:h-40 max-sm:gap-4 bg-fixed z-10 border-t flex-col bg-clip-padding border-white/20 flex font-mono py-6 justify-around motion-safe:duration-300 ${
+          isChatOpen && "xl:-translate-x-[calc(var(--x)/4)]"
         }`}
       >
         <div className="flex items-center gap-2 flex-shrink-0 sm:mx-auto max-sm:mx-4 font-sans">
@@ -86,8 +86,8 @@ export default function Footer({ isChatOpen }: { isChatOpen: boolean }) {
         </div>
       </div>
       <div
-        className={`group inset-x-0 bottom-0 bg-background-2 w-full h-14 bg-fixed bg-[repeating-linear-gradient(45deg,#fff2,#fff2_4px,#fff0_4.5px,#fff0_12px)] z-10 border-t flex max-sm:px-4 sm:justify-center items-center bg-clip-padding border-white/20 opacity-75 [--x:0] xl:[--x:20rem] 2xl:[--x:24rem] motion-safe:duration-300 ${
-          isChatOpen && "xl:-translate-x-[var(--x)]"
+        className={`group inset-x-0 bottom-0 bg-background-2 w-full h-14 bg-fixed bg-[repeating-linear-gradient(45deg,#fff2,#fff2_4px,#fff0_4.5px,#fff0_12px)] z-10 border-t flex max-sm:px-4 sm:justify-center items-center bg-clip-padding border-white/20 opacity-75 motion-safe:duration-300 ${
+          isChatOpen && "xl:-translate-x-[calc(var(--x)/4)]"
         }`}
       >
         <span className="opacity-50 text-xs sm:max-w-2/3">

packages/mcp-cloudflare/src/client/components/home-layout/sidebars.tsx

@@ -7,13 +7,13 @@ export function Sidebars({ isChatOpen, toggleChat }: SidebarProps) {
   return (
     <>
       {/* left sidebar */}
-      <aside className="group hidden sm:block fixed left-0 inset-y-0 h-full sm:w-[calc((100vw-40rem)/2)] md:w-[calc((100vw-48rem)/2)] lg:w-[calc((100vw-48rem)/2)] xl:w-[calc((100vw-72rem)/2)] 2xl:w-[calc((100vw-90rem)/2)] bg-fixed bg-[repeating-linear-gradient(-45deg,#fff2,#fff2_1px,#fff0_1.5px,#fff0_12px)] z-10 border-r opacity-50 bg-clip-padding border-white/20" />
+      <aside className="group hidden sm:block fixed left-0 inset-y-0 h-full w-(--sidebar-width) bg-fixed bg-[repeating-linear-gradient(-45deg,#fff2,#fff2_1px,#fff0_1.5px,#fff0_12px)] z-10 border-r opacity-50 bg-clip-padding border-white/20" />
       {/* right sidebar */}
       <button
-        className={`group hidden sm:grid fixed right-0 inset-y-0 h-full w-[50vw] duration-300 cursor-pointer place-items-center z-40 border-l sm:[--x:20rem] md:[--x:24rem] lg:[--x:24rem] xl:[--x:36rem] 2xl:[--x:45rem] transition-colors ${
+        className={`group hidden sm:grid fixed right-0 inset-y-0 h-full w-1/2 duration-300 cursor-pointer place-items-center z-40 border-l transition-colors ${
           isChatOpen
             ? "bg-background-2 -translate-x-[1px] opacity-100 border-white/10 motion-safe:transition-all"
-            : "translate-x-[var(--x)] opacity-50 hover:bg-background-2 bg-clip-padding border-white/20 bg-[repeating-linear-gradient(-45deg,#fff2,#fff2_1px,#fff0_1.5px,#fff0_12px)]"
+            : "translate-x-[calc(var(--x)/2)] opacity-50 hover:bg-background-2 bg-clip-padding border-white/20 bg-[repeating-linear-gradient(-45deg,#fff2,#fff2_1px,#fff0_1.5px,#fff0_12px)]"
         }`}
         onClick={() => toggleChat(true)}
         onKeyDown={(e) => {
@@ -27,7 +27,7 @@ export function Sidebars({ isChatOpen, toggleChat }: SidebarProps) {
       >
         <span className="sr-only">Open chat panel</span>
         {!isChatOpen && (
-          <div className="font-mono absolute w-8 xl:w-12 min-[1800px]:w-fit min-[1800px]:flex-nowrap text-center flex flex-wrap justify-center md:left-[calc((100vw-48rem)/4)] lg:left-[calc((100vw-48rem)/4)] xl:left-[calc((100vw-72rem)/4)] 2xl:left-[calc((100vw-90rem)/4)] top-1/2 -translate-1/2 opacity-0 group-hover:opacity-100 px-1 gap-0.25 gap-x-2">
+          <div className="font-mono absolute w-8 xl:w-12 min-[1800px]:w-fit min-[1800px]:flex-nowrap text-center flex flex-wrap justify-center md:left-[calc((100vw-var(--x))/4)] top-1/2 -translate-1/2 opacity-0 group-hover:opacity-100 px-1 gap-0.25 gap-x-2">
             <div className="flex flex-nowrap">
               {"open".split("").map((char, i) => (
                 <span
@@ -52,7 +52,6 @@ export function Sidebars({ isChatOpen, toggleChat }: SidebarProps) {
                 </span>
               ))}
             </div>
-
             <div className="flex flex-nowrap">
               {"chat".split("").map((char, i) => {
                 // offset so "chat" follows "open" + 1ch space

packages/mcp-cloudflare/src/client/components/ui/header.tsx

@@ -12,7 +12,6 @@ interface HeaderProps {
 export const Header: React.FC<HeaderProps> = ({ toggleChat, isChatOpen }) => {
   return (
     <header className="pl-4 container mx-auto w-full px-4 sm:px-8 sticky py-4 top-0 z-30 backdrop-blur-xl bg-gradient-to-b from-background to-1% to-background/80">
-      {/* <div className="absolute inset-0 h-full w-full -z-10 pointer-events-none bg-gradient-to-r from-transparent to-background-2 hidden md:block" /> */}
       <div className="absolute inset-0 h-full w-screen left-1/2 -translate-x-1/2 [mask-image:linear-gradient(to_right,transparent,red_4rem,red_calc(100%-4rem),transparent)] border-b-[1px] border-white/15 pointer-events-none -z-10" />
       <div className="flex items-center justify-between w-full">
         <div className="flex items-center gap-2 flex-shrink-0">
@@ -30,8 +29,8 @@ export const Header: React.FC<HeaderProps> = ({ toggleChat, isChatOpen }) => {
           </div>
         </div>
         <div
-          className={`flex items-center gap-4 motion-safe:duration-300 [--x:0] xl:[--x:26.25rem] 2xl:[--x:35.25rem] ${
-            isChatOpen ? "-translate-x-[var(--x)]" : ""
+          className={`flex items-center gap-4 motion-safe:duration-300 [--offset:0] xl:[--offset:26.25rem] 2xl:[--offset:35.25rem] ${
+            isChatOpen ? "xl:-translate-x-(--offset)" : ""
           }`}
         >
           <Button

packages/mcp-cloudflare/src/client/components/ui/sliding-panel.tsx

@@ -51,7 +51,7 @@ export function SlidingPanel({
         {children}
       </div>
       <div
-        className={`fixed hidden xl:flex inset-y-0 right-0 w-full max-w-[50vw] bg-background-2 flex-col ease-out ${
+        className={`fixed hidden xl:flex inset-y-0 right-0 w-full max-w-1/2 bg-background-2 flex-col ease-out ${
           isOpen
             ? "translate-x-0 scale-100 opacity-100 pointer-events-auto motion-safe:duration-300 delay-150 transition-[opacity,filter,scale]"
             : "translate-x-full motion-safe:scale-90 opacity-0 pointer-events-none duration-0"

packages/mcp-cloudflare/src/client/index.css

@@ -127,27 +127,36 @@
   --color-sidebar-ring: var(--sidebar-ring);
 
   --font-sans: "Rubik", sans-serif;
+
+  --sidebar-width: calc((100% - var(--x)) / 2);
 }
 
-@utility container {
-  width: 100%;
-  @media (width >= 40rem /* 640px */) {
-    max-width: 40rem /* 640px */;
+@media (width >= 40rem /* 640px */) {
+  :root {
+    --x: 40rem /* 640px */;
   }
-  @media (width >= 48rem /* 768px */) {
-    max-width: 48rem /* 768px */;
-  }
-  @media (width >= 64rem /* 1024px */) {
-    max-width: 48rem /* 1024px */;
+}
+@media (width >= 48rem /* 768px */) {
+  :root {
+    --x: 48rem /* 768px */;
   }
-  @media (width >= 80rem /* 1280px */) {
-    max-width: 72rem /* 1280px */;
+}
+@media (width >= 80rem /* 1280px */) {
+  :root {
+    --x: 72rem /* 1152px */;
   }
-  @media (width >= 96rem /* 1536px */) {
-    max-width: 90rem /* 1536px */;
+}
+@media (width >= 96rem /* 1536px */) {
+  :root {
+    --x: 90rem /* 1440px */;
   }
 }
 
+@utility container {
+  width: 100%;
+  max-width: var(--x, 100%);
+}
+
 @layer base {
   * {
     @apply border-border outline-ring/50;
@@ -159,7 +168,7 @@
   }
 
   body {
-    @apply bg-background text-foreground;
+    @apply bg-background text-foreground overflow-x-clip;
     min-height: 100vh;
     font-family: "Rubik", -apple-system, "BlinkMacSystemFont", "Segoe UI",
       "Helvetica", "Arial", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",