fix: Android mobile issues (#141)

astro.config.mjs

@@ -4,6 +4,12 @@ import sitemap from "@astrojs/sitemap";
 import react from "@astrojs/react";
 import markdoc from "@astrojs/markdoc";
 import keystatic from "@keystatic/astro";
+import autoprefixer from "autoprefixer";
+import postcssUtopia from "postcss-utopia";
+import postcssMediaMinMax from "postcss-media-minmax";
+import postcssLogicalViewportUnits from "@csstools/postcss-logical-viewport-units";
+import postcssClamp from "postcss-clamp";
+import cssnano from "cssnano";
 
 // https://astro.build/config
 export default defineConfig({
@@ -20,8 +26,26 @@ export default defineConfig({
         (i) => `node:${i}`,
       ),
     },
+    css: {
+      postcss: {
+        plugins: [
+          autoprefixer(),
+          postcssUtopia({
+            minWidth: 320,
+            maxWidth: 1240,
+          }),
+          postcssMediaMinMax(),
+          postcssLogicalViewportUnits(),
+          postcssClamp(),
+          cssnano(),
+        ],
+      },
+    },
   },
   devToolbar: {
     enabled: false,
   },
+  server: {
+    host: true,
+  },
 });

package.json

@@ -41,8 +41,14 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^1.8.3",
+    "@csstools/postcss-logical-viewport-units": "^3.0.1",
     "@playwright/test": "^1.46.1",
     "@types/node": "^22.5.2",
+    "autoprefixer": "^10.4.20",
+    "cssnano": "^7.0.5",
+    "postcss-clamp": "^4.1.0",
+    "postcss-media-minmax": "^5.0.0",
+    "postcss-utopia": "^1.1.0",
     "sass": "^1.77.8",
     "sharp": "^0.33.5"
   },