fix (Layout) mobile responsiveness + scrollbar styling

src/components/codeBlock/code-blocks.module.scss

@@ -1,4 +1,6 @@
 .code-block {
+  position: relative;
+
   & ::selection {
     background-color: rgba(106, 95, 193, 0.5);
   }
@@ -12,6 +14,7 @@
     white-space: pre;
     overflow-x: auto;
     max-width: 100%;
+    box-sizing: border-box;
     tab-size: 2;
   }
 
@@ -28,6 +31,37 @@
     /* Use horizontal scroll instead of wrapping */
     white-space: pre;
     overflow-x: auto;
+    box-sizing: border-box;
+
+    /* Custom scrollbar styling to match code block theme */
+    /* Firefox */
+    scrollbar-width: thin;
+    scrollbar-color: rgba(148, 129, 164, 0.4) transparent;
+
+    /* WebKit (Chrome, Edge, Safari) */
+    &::-webkit-scrollbar {
+      width: 8px;
+      height: 8px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: rgba(148, 129, 164, 0.4);
+      border-radius: 9999px;
+      border: 2px solid transparent;
+      background-clip: content-box;
+    }
+
+    &:hover::-webkit-scrollbar-thumb {
+      background-color: rgba(148, 129, 164, 0.6);
+    }
+
+    &::-webkit-scrollbar-thumb:active {
+      background-color: rgba(148, 129, 164, 0.8);
+    }
   }
 
   /**
@@ -107,6 +141,26 @@
     margin-left: -12px;
     width: calc(100% + 12px);
   }
+
+  overflow-y: visible; /* Allow copy button above to be visible */
+
+  /* Mobile responsive styles for screens smaller than 768px */
+  @media (max-width: 768px) {
+    overflow-x: hidden; /* Prevent container from scrolling */
+
+    pre {
+      -webkit-overflow-scrolling: touch;
+    }
+
+    /* Adjust diff highlighting for mobile - prevent overflow */
+    :global(.diff-inserted),
+    :global(.inserted),
+    :global(.diff-deleted),
+    :global(.deleted) {
+      width: 100%;
+      margin-left: 0;
+    }
+  }
 }
 
 .code-actions {
@@ -119,6 +173,8 @@
   margin: 0 0.25rem;
   right: 0;
   top: -35px;
+  white-space: nowrap;
+  max-width: calc(100% - 0.5rem);
 }
 
 .filename {

src/components/codeTabs.tsx

@@ -126,20 +126,37 @@ export function CodeTabs({children}: CodeTabProps) {
     <Container ref={containerRef}>
       {showSigninNote(codeBlocks[selectedTabIndex]) && <SignInNote />}
       <TabBar>{buttons}</TabBar>
-      <div className="relative" data-sentry-mask>
-        {codeBlocks[selectedTabIndex]}
-      </div>
+      <CodeBlockWrapper data-sentry-mask>{codeBlocks[selectedTabIndex]}</CodeBlockWrapper>
     </Container>
   );
 }
 
 const Container = styled('div')`
+  position: relative;
+  overflow-y: visible; /* Allow copy button to be visible */
+
   pre[class*='language-'] {
     padding: 10px 12px;
     border-radius: 0 0 6px 6px;
     border: 1px solid var(--accent-11);
     border-top: none;
   }
+
+  @media (max-width: 768px) {
+    width: 100%;
+    max-width: 100%;
+    overflow-x: hidden;
+  }
+`;
+
+const CodeBlockWrapper = styled('div')`
+  position: relative;
+
+  @media (max-width: 768px) {
+    width: 100%;
+    max-width: 100%;
+    overflow-x: hidden;
+  }
 `;
 
 const TabBar = styled('div')`
@@ -151,6 +168,10 @@ const TabBar = styled('div')`
   align-items: center;
   padding: 0 0.5rem;
   border-radius: 6px 6px 0 0;
+  width: 100%;
+  box-sizing: border-box;
+  overflow: hidden; /* Prevent any scrollbars */
+  flex-wrap: nowrap; /* Prevent tabs from wrapping */
 `;
 
 const TabButton = styled('button')`
@@ -163,6 +184,8 @@ const TabButton = styled('button')`
   background: none;
   outline: none;
   border-bottom: 3px solid transparent;
+  white-space: nowrap;
+  flex-shrink: 0;
 
   &:focus,
   &[data-active='true'] {

src/components/docPage/index.tsx

@@ -134,6 +134,19 @@ export function DocPage({
           max-width: none;
           box-sizing: border-box;
         }
+        /* Mobile responsive styles */
+        @media (max-width: 768px) {
+          .main-content {
+            width: 100%;
+            max-width: 100%;
+            overflow-x: hidden;
+          }
+          #doc-content {
+            width: 100%;
+            max-width: 100%;
+            overflow-x: hidden;
+          }
+        }
         /* At toc breakpoint (1490px), constrain content to leave room for TOC */
         @media (min-width: 1490px) {
           #doc-content {

src/components/docPage/type.scss

@@ -11,6 +11,13 @@
   --heading-color: var(--darkPurple);
   --link-decoration: none;
   --code-background: #251f3d;
+
+  @media (max-width: 768px) {
+    width: 100%;
+    max-width: 100%;
+    overflow-x: hidden;
+  }
+
   h1,
   h2,
   h3,