diff --git a/apps/typegpu-docs/src/components/CodeEditor.tsx b/apps/typegpu-docs/src/components/CodeEditor.tsx
index fe685e12..dfd10d4e 100644
--- a/apps/typegpu-docs/src/components/CodeEditor.tsx
+++ b/apps/typegpu-docs/src/components/CodeEditor.tsx
@@ -93,7 +93,7 @@ export function CodeEditor(props: Props) {
           enabled: false,
         },
       }}
-      className="py-16 md:py-0 bg-tameplum-50"
+      className="py-16 md:py-0"
     />
   );
 }
diff --git a/apps/typegpu-docs/src/components/ControlPanel.tsx b/apps/typegpu-docs/src/components/ControlPanel.tsx
index c83e85cb..d41f5c60 100644
--- a/apps/typegpu-docs/src/components/ControlPanel.tsx
+++ b/apps/typegpu-docs/src/components/ControlPanel.tsx
@@ -184,7 +184,7 @@ export function ControlPanel() {
       </div>
 
       <h2 className="text-xl font-medium">Example controls</h2>
-      <div className="grid items-center grid-cols-2 gap-4 overflow-auto p-1">
+      <div className="grid items-center grid-cols-2 gap-4 overflow-auto p-1 pb-2">
         {exampleControlParams.map((param) => paramToControlRow(param))}
       </div>
     </div>
diff --git a/apps/typegpu-docs/src/components/ExampleLayout.tsx b/apps/typegpu-docs/src/components/ExampleLayout.tsx
index 97651382..24eae911 100644
--- a/apps/typegpu-docs/src/components/ExampleLayout.tsx
+++ b/apps/typegpu-docs/src/components/ExampleLayout.tsx
@@ -40,7 +40,7 @@ export function ExampleLayout() {
         </button>
       </div>
 
-      <div className="flex h-screen p-4 gap-4 bg-tameplum-50">
+      <div className="flex h-[100dvh] p-4 gap-4 bg-tameplum-50">
         {menuShown || menuShownMobile ? <SideMenu /> : null}
         <ExamplePage />
       </div>
diff --git a/apps/typegpu-docs/src/components/ExampleView.tsx b/apps/typegpu-docs/src/components/ExampleView.tsx
index 3fa60032..64ed7649 100644
--- a/apps/typegpu-docs/src/components/ExampleView.tsx
+++ b/apps/typegpu-docs/src/components/ExampleView.tsx
@@ -185,7 +185,7 @@ export function ExampleView({ example, isPlayground = false }: Props) {
           </div>
 
           {codeEditorShowing ? (
-            <div className="absolute z-20 md:relative h-full w-full">
+            <div className="absolute z-20 md:relative h-[calc(100%-2rem)] w-[calc(100%-2rem)] md:w-full md:h-full">
               <div className="absolute inset-0">
                 <CodeEditor code={code} onCodeChange={handleCodeChange} />
               </div>
diff --git a/apps/typegpu-docs/src/components/design/Snackbar.tsx b/apps/typegpu-docs/src/components/design/Snackbar.tsx
index 7f284dd1..591d2797 100644
--- a/apps/typegpu-docs/src/components/design/Snackbar.tsx
+++ b/apps/typegpu-docs/src/components/design/Snackbar.tsx
@@ -3,7 +3,7 @@ export function Snackbar(props: { text: string }) {
 
   return (
     <div
-      className="absolute bottom-4 right-4 z-10 flex items-center gap-4 w-full max-w-md p-4 text-gray-500 bg-red-100 rounded-lg"
+      className="absolute bottom-4 right-4 z-40 flex items-center gap-4 w-full max-w-[min(28rem,calc(100vw-2rem))] p-4 text-gray-500 bg-red-100 rounded-lg"
       role="alert"
     >
       <div className="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-red-500">