[wip]: mobile landing

[gioelecerati]

User description

DRAFT

---

PR Type

Enhancement

---

Description

• Add responsive mobile homepage layout

• Improve prompt panel and form mobile behavior

• Limit and fade past prompts on mobile view

• Adjust video section responsiveness and loading

---

Changes walkthrough 📝

Relevant files

Enhancement

page.tsx Responsive mobile homepage layout                                                apps/app/app/(main)/page.tsx Imported Camera icon and updated imports Hide cloud background and title on mobile (md:block) Added mobile-only wrapper for video & prompt UI Adjusted padding, viewport heights and layering Separated desktop (hidden md:flex) and mobile layouts +107/-26 PromptDisplay.tsx Mobile prompt display fade effect                                                apps/app/components/home/PromptDisplay.tsx Added isMobile detection and MAX_MOBILE_PROMPTS Slice and fade past prompts on mobile with opacity Adjusted gradient overlays for mobile vs desktop Updated container padding and transparent backgrounds +26/-9    PromptForm.tsx Enhanced prompt form enter handling                                            apps/app/components/home/PromptForm.tsx Added isMobile detection placeholder Refined Enter-key handling (stopPropagation, onInput) Strip trailing newline and auto-submit when valid Increased z-index and drop shadow on submit button +31/-2    PromptPanel.tsx Responsive prompt panel layout                                                      apps/app/components/home/PromptPanel.tsx Introduced isMobileView prop and layout flag Conditional wrappers & styling for mobile vs desktop Moved PromptForm into mobile footer container Added useEffect debug log on mobile data updates Adjusted gradient backgrounds and container styles +95/-70  VideoSection.tsx Video section responsive adjustments                                          apps/app/components/home/VideoSection.tsx Added mobile detection and resize listener for loader Updated container classes for full-height on mobile Hidden decorative overlay on mobile views Responsive iframe & LivepeerPlayer sizing Ensured secondary video tile always visible on desktop +18/-7

---

Need help?

Type /help how to ... in the comments thread for any questions about PR-Agent usage.

Check out the documentation for more information.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
pipelines-app	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 15, 2025 11:33am

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Unused Import Imported icons are not all used in the component, leading to dead code and larger bundle size. import { SquareDashedBottomCode, Workflow, Camera } from "lucide-react"; SSR Mismatch Directly checking window.innerWidth during render can cause hydration mismatches in SSR environments. Consider using a client-only hook or effect. const isMobile = typeof window !== "undefined" && window.innerWidth < 768; // Only show max 5 prompts on mobile with fading effect const MAX_MOBILE_PROMPTS = 5; Debug Log The useEffect contains a console.log for mobile view updates, which appears to be leftover debugging output and should be removed or replaced with proper logging. if (isMobileView) { console.log("Mobile prompt data updated:", { displayedPrompts, promptQueue, }); } }, [isMobileView, displayedPrompts, promptQueue]);

[github-actions]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
General	Avoid SSR/client style mismatch Directly reading window.innerWidth during render can cause server/client mismatch. Remove the inline window check and rely solely on the isMobileView prop so hydration remains consistent. apps/app/components/home/PromptPanel.tsx [91-106] style={{ background: isMobileView ? "transparent" : "linear-gradient(180deg, #FFFFFF 0%, #B9D1DD 100%)", padding: isMobileView ? 0 : "1px", borderRadius: isMobileView ? 0 : "12px", - ...(typeof window !== "undefined" && - window.innerWidth < 768 && - !isMobileView - ? { - background: "transparent", - padding: 0, - } - : {}), }} Suggestion importance[1-10]: 7 __ Why: Directly checking window.innerWidth during render causes hydration inconsistencies; relying on the isMobileView prop ensures consistent server/client rendering.	Medium
	Remove invalid inline !important Inline styles don’t support !important. Remove the invalid backgroundColor from the style object and apply bg-transparent via Tailwind classes to ensure transparency. apps/app/components/home/PromptDisplay.tsx [174-179] <div key={`prompt-highlighted-${highlightedPrompt.substring(0, 10)}`} - className={`p-3 px-4 mx-4 md:mx-0 text-sm md:text-base text-white md:text-black font-bold flex items-center animate-fadeSlideIn relative alwaysAnimatedButton backdrop-blur-sm rounded-xl w-[calc(100%-2rem)] md:w-full ${onPastPromptClick ? "cursor-pointer md:hover:bg-white/10 hover:bg-black/10" : ""}`} + className={`p-3 px-4 mx-4 md:mx-0 text-sm md:text-base text-white md:text-black font-bold flex items-center animate-fadeSlideIn relative alwaysAnimatedButton backdrop-blur-sm bg-transparent rounded-xl w-[calc(100%-2rem)] md:w-full ${onPastPromptClick ? "cursor-pointer md:hover:bg-white/10 hover:bg-black/10" : ""}`} style={{ transition: "all 0.3s ease-out", borderRadius: "12px", - backgroundColor: "transparent !important", }} onClick={() => onPastPromptClick && onPastPromptClick(highlightedPrompt) } > Suggestion importance[1-10]: 5 __ Why: Inline styles don’t support !important; removing backgroundColor and using Tailwind’s bg-transparent fixes the issue without changing style logic.	Low
Possible issue	Correct mobile prompt limit The mobile prompt slice is off by one—subtracting 1 limits you to 4 prompts instead of 5. Update the slice to use the full MAX_MOBILE_PROMPTS to correctly cap at five items. apps/app/components/home/PromptDisplay.tsx [101-103] const visiblePrompts = isMobile - ? nonHighlightedPrompts.slice(0, MAX_MOBILE_PROMPTS - 1) + ? nonHighlightedPrompts.slice(0, MAX_MOBILE_PROMPTS) : nonHighlightedPrompts; Suggestion importance[1-10]: 6 __ Why: The slice using MAX_MOBILE_PROMPTS - 1 caps prompts at 4 instead of 5; updating to slice(0, MAX_MOBILE_PROMPTS) correctly shows five items.	Low