change SplitView to vertical on mobile

README.md

@@ -10,9 +10,9 @@ All commands are run from the root of the project, from a terminal:
 
 | Command                   | Action                                           |
 | :------------------------ | :----------------------------------------------- |
-| `npm install`             | Installs dependencies                            |
-| `npm run dev`             | Starts local dev server at `localhost:4321`      |
-| `npm run build`           | Build your production site to `./dist/`          |
-| `npm run preview`         | Preview your build locally, before deploying     |
-| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
-| `npm run astro -- --help` | Get help using the Astro CLI                     |
+| `pnpm install`             | Installs dependencies                            |
+| `pnpm run dev`             | Starts local dev server at `localhost:4321`      |
+| `pnpm run build`           | Build your production site to `./dist/`          |
+| `pnpm run preview`         | Preview your build locally, before deploying     |
+| `pnpm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
+| `pnpm run astro -- --help` | Get help using the Astro CLI                     |

package.json

@@ -17,5 +17,6 @@
     "shiki": "^1.14.1",
     "starlight-links-validator": "^0.10.1",
     "typescript": "^5.4.5"
-  }
+  },
+  "packageManager": "pnpm@9.7.0+"
 }

src/components/SplitView.astro

@@ -6,18 +6,26 @@ const { gap = "0px" } = Astro.props;
 ---
 
 <div class="split-view" style={`gap: ${gap}`}>
-    <slot name="left" />
-    <slot name="right" />
+    <div><slot name="left" /></div>
+    <div><slot name="right" /></div>
 </div>
 
 <style>
     .split-view {
         display: grid;
-        grid-template-columns: 1fr 1fr;
+        grid-template-rows: auto auto;
+        grid-template-columns: auto;
     }
 
     .split-view > :global(*) {
-        overflow: hidden;
         margin-top: 0 !important;
+        overflow: hidden;
+    }
+
+    @media only screen and (min-width: 640px) {
+        .split-view {
+            grid-template-rows: auto;
+            grid-template-columns: 1fr 1fr;
+        }
     }
 </style>

src/content/docs/differences.mdx

@@ -172,7 +172,7 @@ ShulkerScript and mcscript offer a more convenient way to write if-else statemen
             ```
         </TabItem>
     </Tabs>
-    <div slot="right">
+    <Fragment slot="right">
         <Tabs syncKey="comparisonLang" style="margin-top: 0">
             <TabItem label="mcfunction">
                 ```mcfunction
@@ -196,7 +196,7 @@ ShulkerScript and mcscript offer a more convenient way to write if-else statemen
             When working with else statements and/or commands that could affect the condition, 
             both the mcfunction and mcscript approach could lead to unexpected results as explained [here](#interfering-with-conditions).
         </Aside>
-    </div>
+    </Fragment>
 </SplitView>
 
 ### Logical operators
@@ -205,7 +205,7 @@ Both in ShulkerScript and mcscript, logical operators can be used to combine mul
 In the following code examples, the conditions are represented by `A`, `B`, etc. as placeholders for real conditions.
 
 <SplitView gap="10px">
-    <div slot="left">
+    <Fragment slot="left">
         <Tabs>
             <TabItem label="ShulkerScript">
                 ```shulkerscript
@@ -220,8 +220,8 @@ In the following code examples, the conditions are represented by `A`, `B`, etc.
         </Tabs>
         The AND operator takes precedence over the OR operator, so the above code is equivalent to `A && (B || C)`. 
         The code is compiled in such a way, that regardless in which way the expression is true, the command will only run once.
-    </div>
-    <div slot="right">
+    </Fragment>
+    <Fragment slot="right">
         <Tabs syncKey="comparisonLang" style="margin-top: 0">
             <TabItem label="mcfunction">
                 ```mcfunction
@@ -245,7 +245,7 @@ In the following code examples, the conditions are represented by `A`, `B`, etc.
         <Aside type="caution" title="">
             If both `A && B` and `C` are true, the command will run two times!
         </Aside>
-    </div>
+    </Fragment>
 </SplitView>
 
 ### Interfering with conditions
@@ -278,7 +278,7 @@ execute unless block ~ ~-1 ~ minecraft:stone run say Not on stone
 
 ## Embedded Programming Language
 
-ShulkerScript allows running Lua code during compilation and running the returned output in Minecraft, mcscript offers JavaScript modals._createMdxContent
+ShulkerScript allows running Lua code during compilation and running the returned output in Minecraft, mcscript offers JavaScript modals.
 
 <SplitView gap="10px">
     <Tabs slot="left">