Fixes grid problem

.prettierignore

@@ -0,0 +1 @@
+docs

docs/package.json

@@ -1,6 +1,6 @@
 {
-  "private": true,
   "type": "module",
+  "private": true,
   "packageManager": "pnpm@7.12.0",
   "scripts": {
     "build": "vite-ssg build",

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

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.

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>

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

docs/src/components/KeyShortcut.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 const { label } = $defineProps<{
-  label: string;
-}>();
+  label: string
+}>()
 </script>
 
 <template>

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>

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>

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>

docs/src/pages/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 defineOptions({
-  name: "IndexPage",
-});
+  name: 'IndexPage',
+})
 </script>
 
 <template>