From 09603a97a453a74d46ead317484cc1dcad1ec807 Mon Sep 17 00:00:00 2001
From: martinwq997 <2246839805@qq.com>
Date: Mon, 1 Sep 2025 18:12:02 +0800
Subject: [PATCH] Restored the document file and modified the scrolling
 implementation of the Rust pages.

---
 .../crate-info/[crateName]/index.tsx          |   2 +-
 .../crate-info/[crateName]/layout.tsx         |  18 +-
 .../pages/[org]/rust/rust-ecosystem/index.tsx |  24 +-
 .../rust/rust-ecosystem/search/index.tsx      | 241 +++++++++---------
 .../web/pages/[org]/rust/rust-news/index.tsx  | 127 ++++-----
 moon/apps/web/pages/_document.tsx             |   7 +-
 6 files changed, 220 insertions(+), 199 deletions(-)

diff --git a/moon/apps/web/pages/[org]/rust/rust-ecosystem/crate-info/[crateName]/index.tsx b/moon/apps/web/pages/[org]/rust/rust-ecosystem/crate-info/[crateName]/index.tsx
index 773fb8104..0f8c606a1 100644
--- a/moon/apps/web/pages/[org]/rust/rust-ecosystem/crate-info/[crateName]/index.tsx
+++ b/moon/apps/web/pages/[org]/rust/rust-ecosystem/crate-info/[crateName]/index.tsx
@@ -146,7 +146,7 @@ const CratePage = () => {
                 <title>Crate Info - {crateName || 'Crate'}</title>
             </Head>
             <CrateInfoLayout>
-                <div className="flex justify-center">
+                <div className="flex justify-center pb-8">
                     <div className="w-[1370px] px-8 py-4">
                         <div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
                             {/* 左侧内容区域 - 占据2列 */}
diff --git a/moon/apps/web/pages/[org]/rust/rust-ecosystem/crate-info/[crateName]/layout.tsx b/moon/apps/web/pages/[org]/rust/rust-ecosystem/crate-info/[crateName]/layout.tsx
index 89e6a5107..3e99e328b 100644
--- a/moon/apps/web/pages/[org]/rust/rust-ecosystem/crate-info/[crateName]/layout.tsx
+++ b/moon/apps/web/pages/[org]/rust/rust-ecosystem/crate-info/[crateName]/layout.tsx
@@ -76,11 +76,11 @@ const CrateInfoLayoutComponent = ({ children }: CrateInfoLayoutProps) => {
     ], [nsfront, crateName, version]);
 
     return (
-        <div className="min-h-screen bg-[#F4F4F5] flex flex-col">
-            {/* 搜索栏 */}
-            <div className="w-full flex justify-center mb-0.5" style={{ background: '#FFF' }}>
+        <div className="h-screen bg-[#F4F4F5] flex flex-col">
+            {/* 搜索栏 - 固定在顶部 */}
+            <div className="w-full flex justify-center flex-shrink-0" style={{ background: '#FFF' }}>
                 <div
-                    className="flex items-center sticky top-0 z-20"
+                    className="flex items-center"
                     style={{
                         width: '1680px',
                         height: '53px',
@@ -120,8 +120,8 @@ const CrateInfoLayoutComponent = ({ children }: CrateInfoLayoutProps) => {
                 />
             </div>
 
-            {/* 分类标签和版本选择区域 */}
-            <div className="w-full flex justify-center" style={{ background: '#FFF' }}>
+            {/* 分类标签和版本选择区域 - 固定在搜索栏下方 */}
+            <div className="w-full flex justify-center flex-shrink-0" style={{ background: '#FFF' }}>
                 <div style={{ width: '1370px', paddingLeft: 32, paddingRight: 32, paddingTop: 24 }}>
                     {/* Crate信息 */}
                     <div className="flex items-center justify-between mb-6">
@@ -231,8 +231,10 @@ const CrateInfoLayoutComponent = ({ children }: CrateInfoLayoutProps) => {
                 </div>
             </div>
 
-            {/* 主要内容区域 */}
-            {children}
+            {/* 可滚动内容区域 */}
+            <div className="flex-1 overflow-auto" style={{ background: '#F4F4F5' }}>
+                {children}
+            </div>
         </div>
     );
 };
diff --git a/moon/apps/web/pages/[org]/rust/rust-ecosystem/index.tsx b/moon/apps/web/pages/[org]/rust/rust-ecosystem/index.tsx
index 9a1fb30e9..ac4a69f91 100644
--- a/moon/apps/web/pages/[org]/rust/rust-ecosystem/index.tsx
+++ b/moon/apps/web/pages/[org]/rust/rust-ecosystem/index.tsx
@@ -64,7 +64,7 @@ export default function RustEcosystemPage() {
         id: 107,
         title: 'CVE-2023-12345:示例漏洞描述',
         tag: { text: '由国际安全组织报告', color: 'blue' },
-        detail: '该漏洞由国际安全组织披露，建议关注官方通告。',
+      detail: '该漏洞由国际安全组织披露，建议关注官方通告。',
       },
   ]
 
@@ -73,20 +73,28 @@ export default function RustEcosystemPage() {
       <Head>
         <title>Crate Ecosystem</title>
       </Head>
-      <div className="min-h-screen h-auto w-full bg-white">
+      <div className="h-screen overflow-auto">
         {/* 顶部搜索区，带背景图 */}
         <div
-          className="w-full overflow-hidden mb-6 flex flex-col justify-center items-center"
+          className="w-full overflow-hidden mb-6 flex flex-col justify-center items-center relative"
           style={{
-            backgroundImage: 'url(/rust/rust-ecosystem/search-bg.png)',
-            backgroundSize: 'cover',
-            backgroundPosition: 'center',
-            backgroundRepeat: 'no-repeat',
             height: '160px',
             minHeight: '160px',
           }}
         >
-          <div className="flex flex-col items-center justify-center w-full h-full backdrop-blur-sm bg-white/70">
+          {/* 背景图层 */}
+          <div
+            className="absolute inset-0"
+            style={{
+              backgroundImage: 'url(/rust/rust-ecosystem/search-bg.png)',
+              backgroundSize: 'cover',
+              backgroundPosition: 'center',
+              backgroundRepeat: 'no-repeat',
+              backgroundAttachment: 'fixed',
+            }}
+          />
+          {/* 内容层 */}
+          <div className="flex flex-col items-center justify-center w-full h-full backdrop-blur-sm bg-white/70 relative z-10">
          
             <div className="flex justify-center w-full">
               <div className="relative flex items-center w-full max-w-4xl" style={{ padding: '0 8px' }}>
diff --git a/moon/apps/web/pages/[org]/rust/rust-ecosystem/search/index.tsx b/moon/apps/web/pages/[org]/rust/rust-ecosystem/search/index.tsx
index 6387dcf41..d84164f12 100644
--- a/moon/apps/web/pages/[org]/rust/rust-ecosystem/search/index.tsx
+++ b/moon/apps/web/pages/[org]/rust/rust-ecosystem/search/index.tsx
@@ -160,11 +160,11 @@ export default function SearchResultsPage() {
       <Head>
         <title>Search Results - Rust Ecosystem</title>
       </Head>
-      <div className="min-h-screen  w-full bg-white">
-        {/* 搜索栏 */}
-        <div className="w-full flex justify-center mb-4" style={{ background: '#FFF' }}>
+      <div className="h-screen flex flex-col">
+        {/* 搜索栏 - 固定在顶部 */}
+        <div className="w-full flex justify-center flex-shrink-0" style={{ background: '#FFF' }}>
           <div
-            className="flex items-center sticky top-0 z-20"
+            className="flex items-center"
             style={{
               width: '1680px',
               height: '43px',
@@ -178,14 +178,15 @@ export default function SearchResultsPage() {
             }}
           >
             <form onSubmit={handleSearch} className="flex-1 max-w-xl ml-8">
-              <div className="relative ml-10 mt-5">
-                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+              <div className="relative ml-0 mt-0">
+                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none" style={{ transform: 'translate(20px, 1px)' }}>
                   <MagnifyingGlassIcon className="h-5 w-5 text-gray-400" />
                 </div>
                 <input
                   type="text"
                   placeholder="Search..."
                   className="block w-full pl-10 pr-3 py-2 border-0 focus:ring-0 focus:outline-none bg-transparent text-gray-900 placeholder-gray-500"
+                  style={{ transform: 'translate(20px, 1px)' }}
                   value={search}
                   onChange={(e) => setSearch(e.target.value)}
                 />
@@ -206,10 +207,9 @@ export default function SearchResultsPage() {
           />
         </div>
             
-        {/* 分类标签和搜索结果区域 */}
-        <div className="w-full flex justify-center" style={{ background: '#F4F4F5' }}>
+        {/* 分类标签 - 固定在搜索栏下方 */}
+        <div className="w-full flex justify-center flex-shrink-0" style={{ background: '#F4F4F5' }}>
           <div style={{ width: '1370px', paddingLeft: 32, paddingRight: 32, paddingTop: 24 }}>
-            {/* 分类标签 */}
             <div className="flex space-x-8 mb-0">
               {tabs.map((tab) => (
                 <button
@@ -234,118 +234,125 @@ export default function SearchResultsPage() {
                 </button>
               ))}
             </div>
+          </div>
+        </div>
 
-            {/* 搜索结果列表容器 */}
-            <div style={{ 
-              background: 'white', 
-              borderRadius: '8px',
-              boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
-              overflow: 'hidden'
-            }}>
-              {/* 标题和结果数量 */}
-              <div className="flex items-center justify-between p-3 border-b border-gray-200">
-                <h1 
-                  style={{
-                    display: '-webkit-box',
-                    WebkitBoxOrient: 'vertical',
-                    WebkitLineClamp: 1,
-                    overflow: 'hidden',
-                    color: '#1c2024',
-                    textOverflow: 'ellipsis',
-                    fontFamily: '"HarmonyOS Sans SC"',
-                    fontSize: '28px',
-                    fontStyle: 'normal',
-                    fontWeight: 500,
-                    lineHeight: '24px',
-                    letterSpacing: '0'
-                  }}
-                >
-                  ALL
-                </h1>
-                <span 
-                  style={{
-                    display: '-webkit-box',
-                    WebkitBoxOrient: 'vertical',
-                    WebkitLineClamp: 1,
-                    overflow: 'hidden',
-                    color: '#4b68ff',
-                    textAlign: 'right',
-                    textOverflow: 'ellipsis',
-                    fontFamily: '"SF Pro"',
-                    fontSize: '16px',
-                    fontStyle: 'normal',
-                    fontWeight: 400,
-                    lineHeight: '24px',
-                    letterSpacing: '0'
-                  }}
-                >
-                  Total 56 results
-                </span>
-              </div>
+        {/* 可滚动内容区域 */}
+        <div className="flex-1 overflow-auto" style={{ background: '#F4F4F5' }}>
+          <div className="w-full flex justify-center pb-8">
+            <div style={{ width: '1370px', paddingLeft: 32, paddingRight: 32, paddingTop: 24 }}>
+              {/* 搜索结果列表容器 */}
+              <div style={{ 
+                background: 'white', 
+                borderRadius: '8px',
+                boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+                overflow: 'hidden'
+              }}>
+                {/* 标题和结果数量 */}
+                <div className="flex items-center justify-between p-3 border-b border-gray-200">
+                  <h1 
+                    style={{
+                      display: '-webkit-box',
+                      WebkitBoxOrient: 'vertical',
+                      WebkitLineClamp: 1,
+                      overflow: 'hidden',
+                      color: '#1c2024',
+                      textOverflow: 'ellipsis',
+                      fontFamily: '"HarmonyOS Sans SC"',
+                      fontSize: '28px',
+                      fontStyle: 'normal',
+                      fontWeight: 500,
+                      lineHeight: '24px',
+                      letterSpacing: '0'
+                    }}
+                  >
+                    ALL
+                  </h1>
+                  <span 
+                    style={{
+                      display: '-webkit-box',
+                      WebkitBoxOrient: 'vertical',
+                      WebkitLineClamp: 1,
+                      overflow: 'hidden',
+                      color: '#4b68ff',
+                      textAlign: 'right',
+                      textOverflow: 'ellipsis',
+                      fontFamily: '"SF Pro"',
+                      fontSize: '16px',
+                      fontStyle: 'normal',
+                      fontWeight: 400,
+                      lineHeight: '24px',
+                      letterSpacing: '0'
+                    }}
+                  >
+                    Total 56 results
+                  </span>
+                </div>
 
-              <div className="space-y-0">
-                {searchResults.map((item, index) => (
-                    <div
-                      key={item.id}
-                      className="transition-colors cursor-pointer"
-                      style={{ 
-                        display: 'flex',
-                        minWidth: '100px',
-                        minHeight: '44px',
-                        padding: '8px 16px',
-                        alignItems: 'center',
-                        gap: '8px',
-                        flex: '1 0 0',
-                        alignSelf: 'stretch',
-                        background: '#ffffff00',
-                        borderBottom: index !== searchResults.length - 1 ? '1px solid #e5e7eb' : 'none'
-                      }}
-                      onMouseEnter={(e) => {
-                        e.currentTarget.style.background = '#EBEBEB'
-                      }}
-                      onMouseLeave={(e) => {
-                        e.currentTarget.style.background = '#ffffff00'
-                      }}
-                    >
-                      <div className="flex flex-col space-y-2">
-                        <span className="text-sm text-gray-500">
-                          {item.type}
-                        </span>
-                        <h3 
-                          className="text-lg font-medium text-blue-600 hover:text-blue-800 cursor-pointer"
-                          onClick={() => router.push({
-                            pathname: `/${router.query.org}/rust/rust-ecosystem/crate-info/${item.name}`,
-                            query: { 
-                              crateName: item.name,
-                              version: item.version || '1.0.0'
-                            }
-                          })}
-                        >
-                          {item.name}
-                        </h3>
-                        <p className="text-sm text-gray-500">
-                          {item.details}
-                        </p>
+                <div className="space-y-0">
+                  {searchResults.map((item, index) => (
+                      <div
+                        key={item.id}
+                        className="transition-colors cursor-pointer"
+                        style={{ 
+                          display: 'flex',
+                          minWidth: '100px',
+                          minHeight: '44px',
+                          padding: '8px 16px',
+                          alignItems: 'center',
+                          gap: '8px',
+                          flex: '1 0 0',
+                          alignSelf: 'stretch',
+                          background: '#ffffff00',
+                          borderBottom: index !== searchResults.length - 1 ? '1px solid #e5e7eb' : 'none'
+                        }}
+                        onMouseEnter={(e) => {
+                          e.currentTarget.style.background = '#EBEBEB'
+                        }}
+                        onMouseLeave={(e) => {
+                          e.currentTarget.style.background = '#ffffff00'
+                        }}
+                      >
+                        <div className="flex flex-col space-y-2">
+                          <span className="text-sm text-gray-500">
+                            {item.type}
+                          </span>
+                          <h3 
+                            className="text-lg font-medium text-blue-600 hover:text-blue-800 cursor-pointer"
+                            onClick={() => router.push({
+                              pathname: `/${router.query.org}/rust/rust-ecosystem/crate-info/${item.name}`,
+                              query: { 
+                                crateName: item.name,
+                                version: item.version || '1.0.0'
+                              }
+                            })}
+                          >
+                            {item.name}
+                          </h3>
+                          <p className="text-sm text-gray-500">
+                            {item.details}
+                          </p>
+                        </div>
                       </div>
-                    </div>
-                  ))}
-                </div>
+                    ))}
+                  </div>
 
-              {/* 分页 */}
-              <div className="flex justify-center items-center space-x-4 mt-8">
-                <button className="flex items-center text-gray-400 hover:text-gray-600 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
-                  <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
-                  </svg>
-                  Previous
-                </button>
-                <span className="text-lg font-bold text-gray-900">1</span>
-                <button className="flex items-center text-gray-400 hover:text-gray-600 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
-                  Next
-                  <svg className="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-                  </svg>
-                </button>
+                {/* 分页 */}
+                <div className="flex justify-center items-center space-x-4 mt-8 mb-8">
+                  <button className="flex items-center text-gray-400 hover:text-gray-600 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
+                    <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+                    </svg>
+                    Previous
+                  </button>
+                  <span className="text-lg font-bold text-gray-900">1</span>
+                  <button className="flex items-center text-gray-400 hover:text-gray-600 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
+                    Next
+                    <svg className="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                    </svg>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
diff --git a/moon/apps/web/pages/[org]/rust/rust-news/index.tsx b/moon/apps/web/pages/[org]/rust/rust-news/index.tsx
index d0044b045..68be9fca3 100644
--- a/moon/apps/web/pages/[org]/rust/rust-news/index.tsx
+++ b/moon/apps/web/pages/[org]/rust/rust-news/index.tsx
@@ -178,15 +178,12 @@ export default function RustNewsPage() {
       <Head>
         <title>Rust News</title>
       </Head>
-      <div className="min-h-screen h-auto w-full bg-white px-0 py-0">
-        {/* 搜索栏 */}
+      <div className="h-screen flex flex-col">
+        {/* 搜索栏 - 固定在顶部 */}
         <div
-          className="flex items-center border-b border-gray-200 bg-white w-full sticky top-0 z-20"
+          className="flex items-center border-b border-gray-200 bg-white w-full flex-shrink-0"
           style={{
             height: 53,
-            flexShrink: 0,
-            marginTop: 0,
-            marginBottom: 0,
             paddingLeft: 32,
             paddingRight: 32,
           }}
@@ -195,72 +192,76 @@ export default function RustNewsPage() {
             <IndexSearchInput query={search} setQuery={setSearch} isSearchLoading={isSearchLoading} />
           </div>
         </div>
-        {/* 主标题 */}
-        <div className="max-w-6xl mx-auto mt-6">
-          <h1 className="text-6xl font-black text-[#222]">Rust News</h1>
-          <div
-            style={{
-              width: 360,
-              height: 14,
-              flexShrink: 0,
-              borderRadius: 2,
-              background: '#3E63DD',
-              marginTop: 8,
-              marginBottom: 32,
-            }}
-          />
-        </div>
-        {/* 新闻列表 */}
-        <div className="max-w-6xl mx-auto flex flex-col gap-8">
-          {newsList
-            .filter(item => item.title.includes(search) || item.summary.includes(search))
-            .map((item) => (
+        
+        {/* 可滚动内容区域 */}
+        <div className="flex-1 overflow-auto">
+          {/* 主标题 */}
+          <div className="max-w-6xl mx-auto mt-6">
+            <h1 className="text-6xl font-black text-[#222]">Rust News</h1>
             <div
-              key={item.date + '-' + item.title}
-              className="flex bg-white rounded-2xl shadow-sm border border-gray-200 px-8 py-6 items-center gap-8"
-            >
-              {/* 日期 */}
-              <div className="flex flex-col items-center justify-center min-w-[70px]">
-                <span className="text-2xl font-bold text-gray-800 leading-none">{item.date}</span>
-                <span className="text-base text-gray-400 mt-1">{item.year}</span>
-              </div>
-              {/* 竖线分割 */}
-              <div className="h-16 w-px bg-gray-200 mx-1" />
-              {/* 内容 */}
-              <div className="flex-1 flex flex-col">
-                <div className="flex items-center">
-                  <span className="text-xl font-bold text-gray-900">{item.title}</span>
-                  {item.hot && <span className="ml-2 text-red-500 text-xl">🔥</span>}
+              style={{
+                width: 360,
+                height: 14,
+                flexShrink: 0,
+                borderRadius: 2,
+                background: '#3E63DD',
+                marginTop: 8,
+                marginBottom: 32,
+              }}
+            />
+          </div>
+          {/* 新闻列表 */}
+          <div className="max-w-6xl mx-auto flex flex-col gap-8 pb-8">
+            {newsList
+              .filter(item => item.title.includes(search) || item.summary.includes(search))
+              .map((item) => (
+              <div
+                key={item.date + '-' + item.title}
+                className="flex bg-white rounded-2xl shadow-sm border border-gray-200 px-8 py-6 items-center gap-8"
+              >
+                {/* 日期 */}
+                <div className="flex flex-col items-center justify-center min-w-[70px]">
+                  <span className="text-2xl font-bold text-gray-800 leading-none">{item.date}</span>
+                  <span className="text-base text-gray-400 mt-1">{item.year}</span>
                 </div>
-                <div className="flex gap-2 mt-2">
-                  {item.tags.map(tag => (
-                    <span
-                      key={tag}
-                      className={`px-2 py-0.5 rounded text-xs font-semibold ${tagColor(tag)}`}
-                    >
-                      {tag}
-                    </span>
-                  ))}
+                {/* 竖线分割 */}
+                <div className="h-16 w-px bg-gray-200 mx-1" />
+                {/* 内容 */}
+                <div className="flex-1 flex flex-col">
+                  <div className="flex items-center">
+                    <span className="text-xl font-bold text-gray-900">{item.title}</span>
+                    {item.hot && <span className="ml-2 text-red-500 text-xl">🔥</span>}
+                  </div>
+                  <div className="flex gap-2 mt-2">
+                    {item.tags.map(tag => (
+                      <span
+                        key={tag}
+                        className={`px-2 py-0.5 rounded text-xs font-semibold ${tagColor(tag)}`}
+                      >
+                        {tag}
+                      </span>
+                    ))}
+                  </div>
+                  <div className="text-gray-500 text-sm mt-2 line-clamp-2">{item.summary}</div>
+                </div>
+                {/* 详情按钮 */}
+                <div className="flex flex-col items-end justify-between h-full ml-4">
+                  <button className="bg-blue-600 text-white px-6 py-2 rounded-lg font-semibold shadow hover:bg-blue-700 transition">
+                    Details
+                  </button>
                 </div>
-                <div className="text-gray-500 text-sm mt-2 line-clamp-2">{item.summary}</div>
-              </div>
-              {/* 详情按钮 */}
-              <div className="flex flex-col items-end justify-between h-full ml-4">
-                <button className="bg-blue-600 text-white px-6 py-2 rounded-lg font-semibold shadow hover:bg-blue-700 transition">
-                  Details
-                </button>
               </div>
-            </div>
-          ))}
+            ))}
+          </div>
         </div>
+        
         {/* 右下角up-icon */}
         <button
           onClick={() => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-            const main = document.querySelector('#__next');
+            const scrollContainer = document.querySelector('.overflow-auto');
             
-            if (main) {
-              main.scrollTo({ top: 0, behavior: 'smooth' });
+            if (scrollContainer) {
+              scrollContainer.scrollTo({ top: 0, behavior: 'smooth' });
             }
           }}
           style={{
diff --git a/moon/apps/web/pages/_document.tsx b/moon/apps/web/pages/_document.tsx
index d612e9563..7bd1807eb 100644
--- a/moon/apps/web/pages/_document.tsx
+++ b/moon/apps/web/pages/_document.tsx
@@ -13,7 +13,7 @@ class MyDocument extends Document {
 
   render() {
     return (
-      <Html lang='en' className='min-h-screen w-full'>
+      <Html lang='en' className='fixed isolate h-full w-full overflow-hidden'>
         <Head>
           <meta name='slack-app-id' content='A03CG5AP4CE' />
           <link rel='preconnect' href='https://api.campsite.com' />
@@ -23,7 +23,10 @@ class MyDocument extends Document {
 
         <body
           className={cn(
-            'bg-primary text-primary antialiased min-h-screen w-full'
+            'bg-primary text-primary fixed isolate select-none overflow-hidden antialiased',
+            // force the body to be full width and height, so that libraries
+            // like vaul can't highjack the dimensions and screw the layout
+            '!h-full !w-full'
           )}
         >
           <a href='#main' className='sr-only'>