Settings page: fix mobile nav, so users can like use it

package.json

@@ -4,7 +4,7 @@
   "version": "9.0.0",
   "private": true,
   "scripts": {
-    "dev": "concurrently \"astro dev\" \"tsx --watch server/server.ts\"",
+    "dev": "concurrently \"astro dev --host 0.0.0.0\" \"tsx --watch server/server.ts\"",
     "start": "node server/server.js",
     "build:server": "tsc -p server",
     "build:client": "astro check && astro build",

src/components/SidebarButton.astro

@@ -4,13 +4,13 @@ const { title, route } = Astro.props;
 
 <a
   href={route}
-  class="group flex flex-col items-center p-3 bg-navbar-color w-full rounded-3xl md:flex-row md:bg-none md:rounded-none"
+  class="snap-center snap-always group flex flex-col items-center p-3 bg-navbar-color w-full rounded-3xl md:flex-row md:bg-none md:rounded-none"
 >
   <div class="p-2">
     <slot />
   </div>
   <div
-    class="font-roboto text-center font-bold text-text-color roboto transition duration-500 group-hover:text-text-hover-color md:text-xl md:pl-2 text-nowrap"
+    class="max-md:min-w-24 roboto text-center font-bold text-text-color roboto transition duration-500 group-hover:text-text-hover-color md:text-xl md:ml-2 text-nowrap"
   >
     {title}
   </div>

src/layouts/Layout.astro

@@ -26,7 +26,7 @@ const { title, noHeader } = Astro.props;
       transition:persist
     />
     <link
-      rel="stylesheet"
+      rel="preload"
       href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap"
     />
     <meta name="generator" content={Astro.generator} />
@@ -118,6 +118,13 @@ const { title, noHeader } = Astro.props;
       .roboto {
           font-family: var(--font-family), Roboto;
       }
+      .hide-the-scrollbar::-webkit-scrollbar {
+        display: none;
+      }
+     .hide-the-scrollbar {
+        -ms-overflow-style: none;
+        scrollbar-width: none;
+    }
   </style>
   </body>
 </html>

src/layouts/SettingsLayout.astro

@@ -9,7 +9,7 @@ import { Icon } from "astro-icon/components";
 
 <div class="flex flex-row roboto">
   <div class="text-text-color mt-16 fixed inset-0 h-[calc(100%-4rem)] z-0 bg-primary flex-col flex md:flex-row">
-      <div class="items-center p-3 flex flex-row border-border-color gap-5 border-r-2 md:w-2/12 md:flex-col md:bg-navbar-color md:gap-0 md:p-0">
+      <div class="items-center md:p-3 flex flex-row border-border-color gap-5 md:border-r-2 md:w-2/12 md:flex-col md:bg-navbar-color md:gap-0 md:p-0 overflow-x-auto md:overflow-x-hidden overflow-y-hidden max-md:ml-1 max-md:mr-1 max-md:max-h-24 max-md:min-h-24 max-md:justify-left max-md:scroll-ml-3 max-md:scroll-mr-3 max-md:snap-x max-md:snap-mandatory">
       <SidebarButton title={t("settings.appearance")} route={`/${lang}/settings/appearance`}>
         <Icon name="ph:palette" class="h-6 w-6 text-text-color transition duration-500 group-hover:text-text-hover-color md:h-6 md:w-6" />
       </SidebarButton>

src/pages/[lang]/catalog/package/[...packageName].astro

@@ -6,7 +6,7 @@ const assetsJson = await response.json();
 ---
 
 <Layout title={`Package: ${packageName}`}>
-    <div class="flex flex-wrap mt-16 w-full fixed inset-0 h-full md:h-[calc(100%-4rem)] z-0 bg-primary flex-col items-center content-center justify-center md:pb-64 roboto max-md:p-4">
+    <div class="flex flex-wrap mt-16 w-full fixed inset-0 h-full md:h-[calc(100%-4rem)] z-0 bg-primary flex-col items-center content-center justify-center sm:pt-64 lg:pb-64 roboto max-md:p-4">
         {assetsJson.error && <h1 class="text-text-color text-3xl font-bold"> Unexpected error. Is the name right? </h1>}
         {!assetsJson.error &&
             <div class="flex flex-col md:flex-row items-center text-text-color bg-navbar-color rounded-2xl">

src/utils/settings/marketplace.ts

@@ -5,7 +5,9 @@ const AppearanceSettings = {
     themeName: "nebula||themeName",
     stylePayload: "nebula||stylepayload",
     video: "nebula||video",
-    image: "nebula||image"
+    image: "nebula||image",
+    proxy: "nebula||marketplaceProxy",
+    hostname: "nebula||marketplaceHostname"
 };
 
 const marketPlaceSettings = {