diff --git a/packages/website/src/content/docs/en/TwoCols.tsx b/packages/website/src/content/docs/en/TwoCols.tsx
index 9996a867..58035bac 100644
--- a/packages/website/src/content/docs/en/TwoCols.tsx
+++ b/packages/website/src/content/docs/en/TwoCols.tsx
@@ -10,7 +10,10 @@ type TwoColsProps = {
 
 export const TwoCols: FC<TwoColsProps> = ({ className, left, right }) => {
   return (
-    <div className={cn("my-6 grid !max-w-screen-lg grid-cols-2 items-start gap-6", className)} data-two-cols>
+    <div
+      className={cn("my-6 grid !max-w-screen-lg grid-cols-1 items-start gap-6 sm:grid-cols-2", className)}
+      data-two-cols
+    >
       {left}
       {right}
     </div>
diff --git a/packages/website/src/pages/playground/_Playground.tsx b/packages/website/src/pages/playground/_Playground.tsx
index 4571d975..c61d0061 100644
--- a/packages/website/src/pages/playground/_Playground.tsx
+++ b/packages/website/src/pages/playground/_Playground.tsx
@@ -102,7 +102,7 @@ const Tab: FC<TabProps> = ({ tabs, defaultTab }) => {
   const [tab, setTab] = useState<keyof typeof tabs>(defaultTab)
 
   return (
-    <div className="flex h-0 min-h-full flex-col">
+    <div className="flex h-0 min-h-full flex-col overflow-auto">
       <div className="mx-6 flex h-10 flex-row items-center gap-6">
         {Object.keys(tabs).map((key) => (
           <div
diff --git a/packages/website/src/styles/global.css b/packages/website/src/styles/global.css
index c89be2cd..cdc47c9a 100644
--- a/packages/website/src/styles/global.css
+++ b/packages/website/src/styles/global.css
@@ -85,4 +85,8 @@
   html {
     @apply h-full;
   }
+
+  .katex {
+    @apply overflow-auto;
+  }
 }