Make docs responsive on mobile

Frontend/docs/home.md

@@ -4,146 +4,17 @@ published: '04-19-2024'
 summary: 'Get started with RESTfulMC! duis numquam himenaeos lectus quisque assueverit aperiri'
 ---
 
-[//]: # (# Get started with RESTfulMC!)
+# Get started with RESTfulMC!
+Welcome to the RESTfulMC documentation! feugait pertinax duis laudem vix integer tempus conubia graece interpretaris
 
-[//]: # (Welcome to the RESTfulMC documentation! feugait pertinax duis laudem vix integer tempus conubia graece interpretaris)
+## Table of Contents
+* [Get started with RESTfulMC!](#get-started-with-restfulmc)
+    * [Features](#features)
 
-[//]: # ()
+## Features
-[//]: # (## Table of Contents)
+Some of the core features of RESTfulMC include:
 
-[//]: # (- [Get started with RESTfulMC!](#get-started-with-restfulmc))
+| Feature                  |                                                            Description                                                             |
-
+|--------------------------|:----------------------------------------------------------------------------------------------------------------------------------:|
-[//]: # (  - [Features](#features))
+| [Player Lookup](/player) | praesent omittam mollis maximus has pretium mediocritatem eripuit interesset adversarium inceptos tempor placerat deserunt tritani |
-
+| [Server Lookup](/server) |     sapien faucibus numquam ponderum utamur himenaeos menandri tation regione integer aliquam qualisque equidem euismod tortor     |
-[//]: # ()
-[//]: # (## Features)
-
-[//]: # (Some of the core features of RESTfulMC include:)
-
-[//]: # ()
-[//]: # (|                 Feature  |                                                       Description |)
-
-[//]: # (|-------------------------:|------------------------------------------------------------------:|)
-
-[//]: # (| [Player Lookup](/player) | praesent omittam mollis maximus has pretium mediocritatem eripuit |)
-
-[//]: # (| [Server Lookup](/server) | sapien faucibus numquam ponderum utamur himenaeos menandri tation |)
-# Heading level 1
-I really like using Markdown.
-
-```
-"use client";
-
-import { ThemeProvider as NextThemesProvider } from "next-themes";
-import { type ThemeProviderProps } from "next-themes/dist/types";
-
-/**
- * The provider of themes!!
- */
-const ThemeProvider = ({ children, ...props }: ThemeProviderProps) => (
-    <NextThemesProvider {...props}>{children}</NextThemesProvider>
-);
-export default ThemeProvider;
-```
-
-```typescript
-"use client";
-
-import { ThemeProvider as NextThemesProvider } from "next-themes";
-import { type ThemeProviderProps } from "next-themes/dist/types";
-
-/**
- * The provider of themes!!
- */
-const ThemeProvider = ({ children, ...props }: ThemeProviderProps) => (
-    <NextThemesProvider {...props}>{children}</NextThemesProvider>
-);
-export default ThemeProvider;
-```
-
-
-I think I'll use it to format all of my documents from now on.
-
-## Heading level 2
-### Heading level 3
-#### Heading level 4
-##### Heading level 5
-###### Heading level 6
-
-Heading level 1
-===============
-
-Heading level 2
----------------
-
-I just love **bold text**.
-I just love __bold text__.
-
-This text is ***really important***.
-This text is ___really important___.
-This text is __*really important*__.
-This text is **_really important_**.
-This is really***very***important text.
-
-> Dorothy followed her through many of the beautiful rooms in her castle.
->
-> The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.
-
-> Dorothy followed her through many of the beautiful rooms in her castle.
->
->> The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.
-
-> #### The quarterly results look great!
->
-> - Revenue was off the chart.
-> - Profits were higher than ever.
-    >
-    >  *Everything* is going according to **plan**.
-
-1. First item
-2. Second item
-3. Third item
-4. Fourth item 
-
-1. First item
-2. Second item
-3. Third item
-   1. Indented item
-   2. Indented item
-4. Fourth item 
-
-- First item
-- Second item
-- Third item
-- Fourth item 
-
-* First item
-* Second item
-* Third item
-* Fourth item 
-
-+ First item
-+ Second item
-+ Third item
-+ Fourth item 
-
-- First item
-- Second item
-- Third item
-  - Indented item
-  - Indented item
-- Fourth item 
-
-At the command prompt, type `nano`.
-
-``Use `code` in your Markdown file.``
-
-
-
-***
-
----
-
-_________________
-
-My favorite search engine is [Duck Duck Go](https://duckduckgo.com).

Frontend/src/app/(pages)/docs/[[...slug]]/layout.tsx

@@ -25,7 +25,7 @@ const DocumentationLayout = ({
     ); // The active slug of this page
     return (
         <section className="min-h-screen py-32 pb-52 flex justify-center">
-            <div className="flex flex-wrap gap-32 divide-x-2">
+            <div className="flex flex-wrap gap-32 xl:divide-x-2">
                 <Sidebar activeSlug={activeSlug} />
                 {children}
             </div>

Frontend/src/app/(pages)/docs/[[...slug]]/page.tsx

@@ -38,7 +38,7 @@ const ContentPage = ({ params }: PageProps): ReactElement => {
     const splitSlug: string[] = content.slug?.split("/") || [];
 
     return (
-        <main className="px-7 flex flex-col gap-2">
+        <main className="max-w-3xl xl:min-w-[52.5rem] 2xl:max-w-3xl px-3 xs:px-5 xl:px-7 flex flex-col gap-2 transition-all transform-gpu">
             {/* Header */}
             <div className="flex justify-between items-center gap-10">
                 <div className="flex flex-col gap-3">

Frontend/src/app/components/docs/sidebar.tsx

@@ -21,8 +21,8 @@ const Sidebar = ({ activeSlug }: { activeSlug: string }): ReactElement => {
         groupedContent[categoryKey].push(content);
     }
     return (
-        <div className="hidden h-full px-3 pb-5 xl:flex flex-col items-center">
+        <div className="hidden h-full px-3 pb-5 xl:flex flex-wrap flex-col items-center">
-            <div className="fixed w-56 flex flex-col gap-5">
+            <div className="fixed w-52 2xl:w-56 flex flex-col gap-5 transition-all transform-gpu">
                 {/* Quick Search */}
                 <QuickSearchDialog />
 

Frontend/src/app/components/ui/breadcrumb.tsx

@@ -19,7 +19,7 @@ const BreadcrumbList = React.forwardRef<
     <ol
         ref={ref}
         className={cn(
-            "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+            "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5 transition-all transform-gpu",
             className
         )}
         {...props}