From 418b72178326c38fd429fcfcc97bba9e258ab03e Mon Sep 17 00:00:00 2001
From: marko-kraemer <markokraemer.mail@gmail.com>
Date: Mon, 11 Aug 2025 14:18:47 -0700
Subject: [PATCH] mobile

---
 frontend/src/app/layout.tsx                   |  1 +
 .../components/home/sections/hero-section.tsx | 58 ++++++++++---------
 .../src/components/home/sections/navbar.tsx   | 25 ++++----
 .../thread/preview-renderers/pdf-renderer.tsx | 57 +++++++++++++-----
 frontend/src/lib/polyfills.ts                 | 21 +++++++
 package-lock.json                             |  6 ++
 6 files changed, 114 insertions(+), 54 deletions(-)
 create mode 100644 frontend/src/lib/polyfills.ts
 create mode 100644 package-lock.json

diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index 8bdecd70..c0dca12e 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -10,6 +10,7 @@ import { GoogleAnalytics } from '@next/third-parties/google';
 import { SpeedInsights } from '@vercel/speed-insights/next';
 import Script from 'next/script';
 import { PostHogIdentify } from '@/components/posthog-identify';
+import '@/lib/polyfills'; // Load polyfills early
 
 const geistSans = Geist({
   variable: '--font-geist-sans',
diff --git a/frontend/src/components/home/sections/hero-section.tsx b/frontend/src/components/home/sections/hero-section.tsx
index 8b38bc80..a889834a 100644
--- a/frontend/src/components/home/sections/hero-section.tsx
+++ b/frontend/src/components/home/sections/hero-section.tsx
@@ -233,9 +233,9 @@ export function HeroSection() {
 
   return (
     <section id="hero" className="w-full relative overflow-hidden">
-      <div className="relative flex flex-col items-center w-full px-6">
+      <div className="relative flex flex-col items-center w-full px-4 sm:px-6">
         {/* Left side flickering grid with gradient fades */}
-        <div className="absolute left-0 top-0 h-[600px] md:h-[800px] w-1/3 -z-10 overflow-hidden">
+        <div className="hidden sm:block absolute left-0 top-0 h-[500px] sm:h-[600px] md:h-[800px] w-1/4 sm:w-1/3 -z-10 overflow-hidden">
           {/* Horizontal fade from left to right */}
           <div className="absolute inset-0 bg-gradient-to-r from-transparent via-transparent to-background z-10" />
 
@@ -245,18 +245,20 @@ export function HeroSection() {
           {/* Vertical fade to bottom */}
           <div className="absolute inset-x-0 bottom-0 h-48 bg-gradient-to-t from-background via-background/90 to-transparent z-10" />
 
-          <FlickeringGrid
-            className="h-full w-full"
-            squareSize={mounted && tablet ? 2 : 2.5}
-            gridGap={mounted && tablet ? 2 : 2.5}
-            color="var(--secondary)"
-            maxOpacity={0.4}
-            flickerChance={isScrolling ? 0.01 : 0.03} // Low flickering when not scrolling
-          />
+          {mounted && (
+            <FlickeringGrid
+              className="h-full w-full"
+              squareSize={tablet ? 2 : 2.5}
+              gridGap={tablet ? 2 : 2.5}
+              color="var(--secondary)"
+              maxOpacity={tablet ? 0.2 : 0.4}
+              flickerChance={isScrolling ? 0.005 : (tablet ? 0.015 : 0.03)} // Lower performance impact on mobile
+            />
+          )}
         </div>
 
         {/* Right side flickering grid with gradient fades */}
-        <div className="absolute right-0 top-0 h-[600px] md:h-[800px] w-1/3 -z-10 overflow-hidden">
+        <div className="hidden sm:block absolute right-0 top-0 h-[500px] sm:h-[600px] md:h-[800px] w-1/4 sm:w-1/3 -z-10 overflow-hidden">
           {/* Horizontal fade from right to left */}
           <div className="absolute inset-0 bg-gradient-to-l from-transparent via-transparent to-background z-10" />
 
@@ -266,20 +268,22 @@ export function HeroSection() {
           {/* Vertical fade to bottom */}
           <div className="absolute inset-x-0 bottom-0 h-48 bg-gradient-to-t from-background via-background/90 to-transparent z-10" />
 
-          <FlickeringGrid
-            className="h-full w-full"
-            squareSize={mounted && tablet ? 2 : 2.5}
-            gridGap={mounted && tablet ? 2 : 2.5}
-            color="var(--secondary)"
-            maxOpacity={0.4}
-            flickerChance={isScrolling ? 0.01 : 0.03} // Low flickering when not scrolling
-          />
+          {mounted && (
+            <FlickeringGrid
+              className="h-full w-full"
+              squareSize={tablet ? 2 : 2.5}
+              gridGap={tablet ? 2 : 2.5}
+              color="var(--secondary)"
+              maxOpacity={tablet ? 0.2 : 0.4}
+              flickerChance={isScrolling ? 0.005 : (tablet ? 0.015 : 0.03)} // Lower performance impact on mobile
+            />
+          )}
         </div>
 
         {/* Center content background with rounded bottom */}
-        <div className="absolute inset-x-1/4 top-0 h-[600px] md:h-[800px] -z-20 bg-background rounded-b-xl"></div>
+        <div className="absolute inset-x-0 sm:inset-x-1/6 md:inset-x-1/4 top-0 h-[500px] sm:h-[600px] md:h-[800px] -z-20 bg-background rounded-b-xl"></div>
 
-        <div className="relative z-10 pt-32 mx-auto h-full w-full max-w-6xl flex flex-col  items-center justify-center">
+        <div className="relative z-10 pt-16 sm:pt-24 md:pt-32 mx-auto h-full w-full max-w-6xl flex flex-col items-center justify-center">
           {/* <p className="border border-border bg-accent rounded-full text-sm h-8 px-3 flex items-center gap-2">
             {hero.badgeIcon}
             {hero.badge}
@@ -314,17 +318,17 @@ export function HeroSection() {
               </svg>
             </span>
           </Link> */}
-          <div className="flex flex-col items-center justify-center gap-4 pt-12 max-w-4xl mx-auto">
-            <h1 className="text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-medium tracking-tighter text-balance text-center">
+          <div className="flex flex-col items-center justify-center gap-3 sm:gap-4 pt-8 sm:pt-12 max-w-4xl mx-auto">
+            <h1 className="text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-medium tracking-tighter text-balance text-center px-2">
               <span className="text-primary">Build, manage and train your </span>
               <span className="text-secondary">AI Workforce.</span>
             </h1>
-            <p className="text-base md:text-lg text-center text-muted-foreground font-medium text-balance leading-relaxed tracking-tight max-w-2xl">
+            <p className="text-base md:text-lg text-center text-muted-foreground font-medium text-balance leading-relaxed tracking-tight max-w-2xl px-2">
             Kortix – the simplest way to migrate from human to AI.
             </p>
           </div>
 
-          <div className="flex flex-col items-center w-full max-w-3xl mx-auto gap-2 flex-wrap justify-center">
+          <div className="flex flex-col items-center w-full max-w-3xl mx-auto gap-2 flex-wrap justify-center px-2 sm:px-0">
             <div className="w-full relative">
               <div className="relative z-10">
                 <ChatInput
@@ -347,14 +351,14 @@ export function HeroSection() {
             
             {/* Examples section - right after chat input */}
             <div className="w-full pt-2">
-              <Examples onSelectPrompt={setInputValue} count={4} />
+              <Examples onSelectPrompt={setInputValue} count={tablet ? 2 : 4} />
             </div>
           </div>
 
         </div>
 
       </div>
-        <div className="mb-16 sm:mt-32 mx-auto"></div>
+        <div className="mb-8 sm:mb-16 sm:mt-32 mx-auto"></div>
 
       {/* Auth Dialog */}
       <Dialog open={authDialogOpen} onOpenChange={setAuthDialogOpen}>
diff --git a/frontend/src/components/home/sections/navbar.tsx b/frontend/src/components/home/sections/navbar.tsx
index 10e49d46..63bf71dc 100644
--- a/frontend/src/components/home/sections/navbar.tsx
+++ b/frontend/src/components/home/sections/navbar.tsx
@@ -113,8 +113,8 @@ export function Navbar() {
   return (
     <header
       className={cn(
-        'sticky z-50 mx-4 flex justify-center transition-all duration-300 md:mx-0',
-        hasScrolled ? 'top-6' : 'top-4 mx-0',
+        'sticky z-50 flex justify-center transition-all duration-300',
+        hasScrolled ? 'top-6 mx-4 md:mx-0' : 'top-4 mx-2 md:mx-0',
       )}
     >
       <motion.div
@@ -124,34 +124,35 @@ export function Navbar() {
       >
         <div
           className={cn(
-            'mx-auto max-w-7xl rounded-2xl transition-all duration-300  xl:px-0',
+            'mx-auto max-w-7xl rounded-2xl transition-all duration-300 xl:px-0',
             hasScrolled
-              ? 'px-2 border border-border backdrop-blur-lg bg-background/75'
-              : 'shadow-none px-7',
+              ? 'px-2 md:px-2 border border-border backdrop-blur-lg bg-background/75'
+              : 'shadow-none px-3 md:px-7',
           )}
         >
-          <div className="flex h-[56px] items-center p-4">
+          <div className="flex h-[56px] items-center p-2 md:p-4">
             {/* Left Section - Logo */}
-            <div className="flex items-center justify-start" style={{ width: '200px' }}>
+            <div className="flex items-center justify-start flex-shrink-0 w-auto md:w-[200px]">
               <Link href="/" className="flex items-center gap-3">
                 <Image
                   src={logoSrc}
                   alt="Kortix Logo"
-                  width={100}
-                  height={18}
+                  width={80}
+                  height={14}
+                  className="md:w-[100px] md:h-[18px]"
                   priority
                 /> 
               </Link>
             </div>
 
             {/* Center Section - Navigation Menu */}
-            <div className="flex items-center justify-center flex-grow">
+            <div className="hidden md:flex items-center justify-center flex-grow">
               <NavMenu />
             </div>
 
             {/* Right Section - Actions */}
-            <div className="flex items-center justify-end" style={{ width: '200px' }}>
-              <div className="flex flex-row items-center gap-1 md:gap-3 shrink-0">
+            <div className="flex items-center justify-end flex-shrink-0 w-auto md:w-[200px] ml-auto">
+              <div className="flex flex-row items-center gap-2 md:gap-3 shrink-0">
                 <div className="flex items-center space-x-3">
                   <Link
                     href="https://github.com/kortix-ai/suna"
diff --git a/frontend/src/components/thread/preview-renderers/pdf-renderer.tsx b/frontend/src/components/thread/preview-renderers/pdf-renderer.tsx
index 2d3c3d46..921730db 100644
--- a/frontend/src/components/thread/preview-renderers/pdf-renderer.tsx
+++ b/frontend/src/components/thread/preview-renderers/pdf-renderer.tsx
@@ -1,18 +1,53 @@
 'use client';
 
 import React from 'react';
+import dynamic from 'next/dynamic';
 import { cn } from '@/lib/utils';
-import { Document, Page, pdfjs } from 'react-pdf';
+import '@/lib/polyfills'; // Import polyfill for Promise.withResolvers
 
 // Import styles for annotations and text layer
 import 'react-pdf/dist/Page/AnnotationLayer.css';
 import 'react-pdf/dist/Page/TextLayer.css';
 
-// Configure PDF.js worker (same as main PDF renderer)
-pdfjs.GlobalWorkerOptions.workerSrc = new URL(
-    'pdfjs-dist/build/pdf.worker.min.mjs',
-    import.meta.url,
-).toString();
+// Internal component that uses react-pdf
+interface PdfDocumentProps {
+    url: string;
+    containerWidth: number | null;
+}
+
+const PdfDocument = ({ url, containerWidth }: PdfDocumentProps) => {
+    const { Document, Page, pdfjs } = require('react-pdf');
+    
+    // Configure PDF.js worker
+    React.useEffect(() => {
+        pdfjs.GlobalWorkerOptions.workerSrc = new URL(
+            'pdfjs-dist/build/pdf.worker.min.mjs',
+            import.meta.url,
+        ).toString();
+    }, [pdfjs]);
+
+    return (
+        <Document file={url} className="shadow-none">
+            <Page
+                pageNumber={1}
+                width={containerWidth ?? undefined}
+                renderTextLayer={true}
+                renderAnnotationLayer={true}
+                className="border border-border rounded bg-white"
+            />
+        </Document>
+    );
+};
+
+// Dynamic import to avoid SSR issues
+const DynamicPdfDocument = dynamic(() => Promise.resolve(PdfDocument), {
+    ssr: false,
+    loading: () => (
+        <div className="w-full h-full flex items-center justify-center bg-muted/20">
+            <div className="text-sm text-muted-foreground">Loading PDF...</div>
+        </div>
+    )
+});
 
 interface PdfRendererProps {
     url?: string | null;
@@ -43,15 +78,7 @@ export function PdfRenderer({ url, className }: PdfRendererProps) {
     return (
         <div ref={wrapperRef} className={cn('w-full h-full overflow-auto bg-background', className)}>
             <div className="flex justify-center">
-                <Document file={url} className="shadow-none">
-                    <Page
-                        pageNumber={1}
-                        width={containerWidth ?? undefined}
-                        renderTextLayer={true}
-                        renderAnnotationLayer={true}
-                        className="border border-border rounded bg-white"
-                    />
-                </Document>
+                <DynamicPdfDocument url={url} containerWidth={containerWidth} />
             </div>
         </div>
     );
diff --git a/frontend/src/lib/polyfills.ts b/frontend/src/lib/polyfills.ts
new file mode 100644
index 00000000..20090c47
--- /dev/null
+++ b/frontend/src/lib/polyfills.ts
@@ -0,0 +1,21 @@
+// Polyfill for Promise.withResolvers (Node.js 21+ feature)
+// This is needed for react-pdf compatibility with Node.js 20
+if (!Promise.withResolvers) {
+  Promise.withResolvers = function <T>(): {
+    promise: Promise<T>;
+    resolve: (value: T | PromiseLike<T>) => void;
+    reject: (reason?: any) => void;
+  } {
+    let resolve: (value: T | PromiseLike<T>) => void;
+    let reject: (reason?: any) => void;
+    
+    const promise = new Promise<T>((res, rej) => {
+      resolve = res;
+      reject = rej;
+    });
+    
+    return { promise, resolve: resolve!, reject: reject! };
+  };
+}
+
+export {};
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 00000000..79a37bba
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "agentpress",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}