diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 00000000..d8f8d469
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1 @@
+docs
diff --git a/docs/package.json b/docs/package.json
index 0a71189a..7ea10c0a 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -1,6 +1,6 @@
 {
-  "private": true,
   "type": "module",
+  "private": true,
   "packageManager": "pnpm@7.12.0",
   "scripts": {
     "build": "vite-ssg build",
diff --git a/docs/src/components/CodeBlock.vue b/docs/src/components/CodeBlock.vue
index dbb40861..eda35f8f 100644
--- a/docs/src/components/CodeBlock.vue
+++ b/docs/src/components/CodeBlock.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-const source = ref("");
-const body = $ref<HTMLElement>();
+const source = ref('')
+const body = $ref<HTMLElement>()
 onMounted(() => {
-  source.value = body?.textContent?.trim() || "";
-});
+  source.value = body?.textContent?.trim() || ''
+})
 
-const { copy, copied, isSupported } = useClipboard({ source });
+const { copy, copied, isSupported } = useClipboard({ source })
 </script>
 
 <template>
-  <div flex mx-1 gap-1>
-    <code ref="body" class="not-prose" overflow="y-auto" whitespace-nowrap font-mono text="sm lg:base" @click="copy()">
+  <div flex mx-1 gap-1 w-full>
+    <code ref="body" class="not-prose" overflow="x-auto" whitespace-nowrap font-mono text="sm lg:base" @click="copy()">
       <slot />
     </code>
     <a
diff --git a/docs/src/components/Features.vue b/docs/src/components/Features.vue
index 61f310b8..243705e5 100644
--- a/docs/src/components/Features.vue
+++ b/docs/src/components/Features.vue
@@ -1,6 +1,8 @@
 <template>
   <sub-section>
-    <template #title> What's Dozzle </template>
+    <template #title>
+      What's Dozzle
+    </template>
     <p>
       Dozzle is a small Docker container which provides a web-based interface for viewing logs of other Docker
       containers running on the same system.
diff --git a/docs/src/components/Hero.vue b/docs/src/components/Hero.vue
index fd21a69b..62cad554 100644
--- a/docs/src/components/Hero.vue
+++ b/docs/src/components/Hero.vue
@@ -13,8 +13,8 @@
         <div my-auto>
           <browser-window>
             <video muted loop autoplay playsinline>
-              <source src="../media/dozzle.webm" type="video/webm" />
-              <source src="../media/dozzle.mp4" type="video/mp4" />
+              <source src="../media/dozzle.webm" type="video/webm">
+              <source src="../media/dozzle.mp4" type="video/mp4">
             </video>
           </browser-window>
         </div>
diff --git a/docs/src/components/Installation.vue b/docs/src/components/Installation.vue
index 5bba5c0a..c20b769e 100644
--- a/docs/src/components/Installation.vue
+++ b/docs/src/components/Installation.vue
@@ -1,6 +1,8 @@
 <template>
   <sub-section>
-    <template #title> Installation </template>
+    <template #title>
+      Installation
+    </template>
     <p>
       Dozzle can be install using the Docker command line. Dozzle needs access to <code>docker.sock</code> file to
       access the logs of other containers. This file is usually located at <code>/var/run/docker.sock</code>. You can
diff --git a/docs/src/components/KeyShortcut.vue b/docs/src/components/KeyShortcut.vue
index bde18e0b..c1dd2a15 100644
--- a/docs/src/components/KeyShortcut.vue
+++ b/docs/src/components/KeyShortcut.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 const { label } = $defineProps<{
-  label: string;
-}>();
+  label: string
+}>()
 </script>
 
 <template>
diff --git a/docs/src/components/SubSection.vue b/docs/src/components/SubSection.vue
index 27f3a972..2bd52574 100644
--- a/docs/src/components/SubSection.vue
+++ b/docs/src/components/SubSection.vue
@@ -6,7 +6,7 @@
       <h2 text="2xl" tracking-tight>
         <slot name="title" />
       </h2>
-      <div grid="lg:col-span-2" prose text-lg max-w-7xl>
+      <div grid="lg:col-span-2" prose text-lg max-w-7xl min-w-0>
         <slot />
       </div>
     </section>
diff --git a/docs/src/components/TheInput.vue b/docs/src/components/TheInput.vue
index e0175ee6..be8cadcd 100644
--- a/docs/src/components/TheInput.vue
+++ b/docs/src/components/TheInput.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 const { modelValue } = defineModel<{
-  modelValue: string;
-}>();
+  modelValue: string
+}>()
 </script>
 
 <template>
@@ -16,5 +16,5 @@ const { modelValue } = defineModel<{
     bg="transparent"
     border="~ rounded gray-200 dark:gray-700"
     outline="none active:none"
-  />
+  >
 </template>
diff --git a/docs/src/layouts/docs.vue b/docs/src/layouts/docs.vue
index 79927eda..f9512ede 100644
--- a/docs/src/layouts/docs.vue
+++ b/docs/src/layouts/docs.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
 const menu = [
   {
-    name: "What is Dozzle?",
-    path: "/guide/what-is-dozzle",
+    name: 'What is Dozzle?',
+    path: '/guide/what-is-dozzle',
   },
   {
-    name: "Getting Started",
-    path: "/guide/getting-started",
+    name: 'Getting Started',
+    path: '/guide/getting-started',
   },
-];
+]
 </script>
 
 <template>
diff --git a/docs/src/pages/index.vue b/docs/src/pages/index.vue
index 8c1d84bc..d359e9a5 100644
--- a/docs/src/pages/index.vue
+++ b/docs/src/pages/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 defineOptions({
-  name: "IndexPage",
-});
+  name: 'IndexPage',
+})
 </script>
 
 <template>