fix: mobile layout improvements, deployment configuration, and ui polish

Author: Jefino9488

next.config.ts

@@ -4,7 +4,7 @@ const isProd = process.env.NODE_ENV === 'production';
 
 const nextConfig: NextConfig = {
   output: 'export',
-  basePath: isProd ? '/axion' : '',
+  // basePath no longer needed for root domain deployment
   images: {
     unoptimized: true,
   },

package-lock.json

@@ -35,5 +35,9 @@
     "eslint-config-next": "16.2.12",
     "tailwindcss": "^4",
     "typescript": "^5"
+  },
+  "overrides": {
+    "postcss": "^8.5.23",
+    "sharp": "^0.35.0"
   }
 }

package.json

@@ -26,8 +26,8 @@ export default async function BlogPostPage({ params }: { params: Promise<{ slug:
 
   let content = post.content;
   if (process.env.NODE_ENV === "production") {
-    content = content.replaceAll('="/blog/', '="/axion/blog/');
-    content = content.replaceAll('(/blog/', '(/axion/blog/');
+    content = content.replaceAll('="/blog/', '="/blog/');
+    content = content.replaceAll('(/blog/', '(/blog/');
   }
 
   return (

src/app/blog/[slug]/page.tsx

@@ -28,7 +28,7 @@ export default function BlogPage() {
           <Link href={`/blog/${featuredPost.slug}`} className="block group mb-20">
             <article className="relative bg-white/5 border border-white/10 rounded-3xl overflow-hidden hover:bg-white/10 hover:border-white/20 transition-all duration-300">
               <div className="flex flex-col lg:flex-row">
-                <div className="relative w-full lg:w-3/5 aspect-video lg:aspect-auto min-h-[300px]">
+                <div className="relative w-full lg:w-3/5 aspect-video lg:aspect-auto min-h-[300px] overflow-hidden">
                   <Image
                     src={featuredPost.banner}
                     alt={featuredPost.title}
@@ -72,7 +72,7 @@ export default function BlogPage() {
           {regularPosts.map((post) => (
             <Link key={post.slug} href={`/blog/${post.slug}`} className="group block">
               <article className="bg-white/5 border border-white/10 rounded-3xl overflow-hidden hover:bg-white/10 hover:border-white/20 transition-all duration-300 h-full flex flex-col">
-                <div className="relative w-full aspect-video">
+                <div className="relative w-full aspect-video overflow-hidden">
                   <Image
                     src={post.banner}
                     alt={post.title}

src/app/blog/page.tsx

@@ -62,7 +62,7 @@ export default function DeviceHeaderClient({
             className="overflow-hidden w-full bg-[#0a0706]/90 backdrop-blur-xl border border-white/10 rounded-2xl md:rounded-3xl shadow-[0_20px_50px_rgba(0,0,0,0.5)]"
           >
             <div className="p-4 sm:p-6 md:p-8 max-h-[600px] overflow-y-auto scrollbar-thin select-text" data-lenis-prevent>
-              <article className="prose prose-invert max-w-none prose-headings:text-white prose-headings:font-bold prose-a:text-[var(--color-axion-accent)] hover:prose-a:text-[var(--color-axion-accent-hover)] hover:prose-a:underline prose-strong:text-white prose-p:text-zinc-200 prose-p:leading-relaxed prose-li:text-zinc-200 prose-li:leading-relaxed prose-code:text-white prose-code:bg-white/10 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:before:content-none prose-code:after:content-none prose-pre:bg-black/60 prose-pre:border prose-pre:border-white/5 prose-pre:max-w-full prose-pre:overflow-x-auto">
+              <article className="prose prose-invert max-w-none break-words prose-headings:text-white prose-headings:font-bold prose-a:text-[var(--color-axion-accent)] hover:prose-a:text-[var(--color-axion-accent-hover)] hover:prose-a:underline prose-strong:text-white prose-p:text-zinc-200 prose-p:leading-relaxed prose-li:text-zinc-200 prose-li:leading-relaxed prose-code:text-white prose-code:bg-white/10 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:before:content-none prose-code:after:content-none prose-pre:bg-black/60 prose-pre:border prose-pre:border-white/5 prose-pre:max-w-full prose-pre:overflow-x-auto">
                 <ReactMarkdown remarkPlugins={[remarkGfm]}>
                   {guideText}
                 </ReactMarkdown>

src/app/download/[codename]/DeviceHeaderClient.tsx

@@ -178,7 +178,7 @@ export default async function DevicePage({
 
         {/* Device Header */}
         <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-12 mb-16 relative">
-          <div className="flex-1 space-y-4">
+          <div className="flex-1 w-full space-y-4">
             <span className="text-[var(--color-axion-accent)] text-sm font-bold uppercase tracking-[0.2em] mb-1 block">
               {device.brand}
             </span>

src/app/download/[codename]/page.tsx

@@ -19,7 +19,7 @@
 body {
   background-color: var(--color-axion-bg);
   color: var(--color-axion-text);
-  overflow-x: hidden;
+  overflow-x: clip;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -141,3 +141,18 @@ html.lenis, html.lenis body {
 .prose ol > li::marker, .prose ul > li::marker {
   color: var(--color-axion-text) !important;
 }
+
+@layer utilities {
+  .hide-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+  .hide-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+}
+
+@keyframes slide {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(300%); }
+}

src/app/globals.css

@@ -33,15 +33,17 @@ export default function RootLayout({
   return (
     <html
       lang="en"
-      className={`${geistSans.variable} ${geistMono.variable} antialiased overflow-x-hidden`}
+      className={`${geistSans.variable} ${geistMono.variable} antialiased`}
     >
-      <body className="overflow-x-hidden">
-        <ParticleBackground />
-        <Navbar />
-        <SmoothScrolling>
-          {children}
-          <Footer />
-        </SmoothScrolling>
+      <body>
+        <div className="relative w-full overflow-x-clip min-h-screen flex flex-col">
+          <ParticleBackground />
+          <Navbar />
+          <SmoothScrolling>
+            {children}
+            <Footer />
+          </SmoothScrolling>
+        </div>
       </body>
     </html>
   );

src/app/layout.tsx

@@ -9,7 +9,7 @@ const ResearchShowcase = dynamic(() => import("@/components/ResearchShowcase"));
 export default function Home() {
 
   return (
-    <main className="block w-full min-h-screen overflow-x-hidden relative">
+    <main className="block w-full min-h-screen overflow-x-clip relative">
 
       <div className="hidden md:block">
         <HeroScene />