Skip to content

Make the app mobile responsive and very usable on phones #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
unicodevalyu wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Make the app mobile responsive and very usable on phones #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cf299fc
Make the app very mobile responsive
unicodevalyu Jan 7, 2026
c603a78
Make the Join Discord button a bit smaller
unicodevalyu Jan 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion example-projects/competitor-analysis/app/components/CompetitorAnalysisForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,7 @@ export default function CompetitorAnalysisForm({
Research in progress
</p>
<p className="text-xs text-[var(--foreground-secondary)] mt-1">
This typically takes 5-10 minutes. View progress on the right.
This typically takes 5-10 minutes. <span className="hidden lg:inline">View progress on the right.</span><span className="lg:hidden">View progress below.</span>
</p>
</div>
</div>
Expand Down
24 changes: 12 additions & 12 deletions example-projects/competitor-analysis/app/components/ResearchResults.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,13 +85,13 @@ export default function ResearchResults({ result, isLoading, onReset, onCancel,
if (isLoading || !result || !result.output) {
return (
<div className="w-full">
<div className="mb-8 flex items-start justify-between">
<div className="mb-6 sm:mb-8 flex flex-col sm:flex-row sm:items-start justify-between gap-3 sm:gap-4">
<div>
<h2 className="text-xl font-semibold text-[var(--foreground)] mb-2">
<h2 className="text-lg sm:text-xl font-semibold text-[var(--foreground)] mb-1 sm:mb-2">
Research in Progress
</h2>
<p className="text-sm text-[var(--foreground-secondary)]">
Deep research is running. This typically takes 5-10 minutes.
Deep research is running. This typically takes ~5 minutes.
</p>
</div>
{onCancel && (
Expand All @@ -116,7 +116,7 @@ export default function ResearchResults({ result, isLoading, onReset, onCancel,
</div>

{/* Status Card */}
<div className="p-6 rounded-lg bg-[var(--card-bg)] border border-[var(--border-color)] shadow-notion-sm">
<div className="p-4 sm:p-6 rounded-lg bg-[var(--card-bg)] border border-[var(--border-color)] shadow-notion-sm">
<div className="flex items-start gap-4">
<div className="flex-shrink-0">
<svg className="animate-spin h-5 w-5 text-[var(--foreground-secondary)]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
Expand Down Expand Up @@ -171,7 +171,7 @@ export default function ResearchResults({ result, isLoading, onReset, onCancel,
</div>

{/* Helpful Tips - separate card */}
<div className="mt-8 p-6 rounded-lg bg-[var(--background-secondary)] border border-[var(--border-color)]">
<div className="mt-6 sm:mt-8 p-4 sm:p-6 rounded-lg bg-[var(--background-secondary)] border border-[var(--border-color)]">
<h4 className="text-sm font-medium text-[var(--foreground)] mb-3">
What's happening?
</h4>
Expand Down Expand Up @@ -200,11 +200,11 @@ export default function ResearchResults({ result, isLoading, onReset, onCancel,

return (
<div className="w-full">
<div className="mb-6 flex items-center justify-between flex-wrap gap-4">
<h2 className="text-xl font-semibold text-[var(--foreground)]">
<div className="mb-4 sm:mb-6 flex flex-col sm:flex-row sm:items-center justify-between gap-3 sm:gap-4">
<h2 className="text-lg sm:text-xl font-semibold text-[var(--foreground)]">
Research Results
</h2>
<div className="flex gap-2">
<div className="flex flex-wrap gap-2">
{result.pdf_url ? (
<button
onClick={handleDownloadPdf}
Expand Down Expand Up @@ -241,9 +241,9 @@ export default function ResearchResults({ result, isLoading, onReset, onCancel,
</div>

{/* Main research output */}
<div className="rounded-lg bg-[var(--card-bg)] border border-[var(--border-color)] shadow-notion-sm max-h-[calc(100vh-160px)] overflow-y-auto">
<div className="rounded-lg bg-[var(--card-bg)] border border-[var(--border-color)] shadow-notion-sm max-h-[calc(100vh-200px)] md:max-h-[calc(100vh-160px)] overflow-y-auto">
{/* Markdown Report */}
<div className="p-8">
<div className="p-4 sm:p-6 md:p-8">
<div className="prose prose-neutral dark:prose-invert max-w-none
prose-headings:text-[var(--foreground)] prose-headings:font-semibold
prose-h1:text-2xl prose-h1:mb-4 prose-h1:mt-6 prose-h1:first:mt-0
Expand All @@ -266,7 +266,7 @@ export default function ResearchResults({ result, isLoading, onReset, onCancel,

{/* Sources Section */}
{result.sources && result.sources.length > 0 && (
<div className="px-8 py-6 border-t border-[var(--border-color)] bg-[var(--background-secondary)]">
<div className="px-4 sm:px-6 md:px-8 py-4 sm:py-6 border-t border-[var(--border-color)] bg-[var(--background-secondary)]">
<h3 className="text-sm font-medium mb-4 text-[var(--foreground)] flex items-center gap-2">
<svg className="w-4 h-4 text-[var(--foreground-secondary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
Expand Down Expand Up @@ -306,7 +306,7 @@ export default function ResearchResults({ result, isLoading, onReset, onCancel,

{/* Usage Metrics Section */}
{result.usage && (
<div className="p-6 border-t border-[var(--border-color)]">
<div className="p-4 sm:p-6 border-t border-[var(--border-color)]">
<h3 className="text-sm font-medium mb-4 text-[var(--foreground)] flex items-center gap-2">
<svg className="w-4 h-4 text-[var(--foreground-secondary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
Expand Down
2 changes: 1 addition & 1 deletion example-projects/competitor-analysis/app/components/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ export default function Sidebar({ onSignInClick, user }: SidebarProps) {
};

return (
<div className="fixed left-6 top-1/2 -translate-y-1/2 z-40">
<div className="fixed left-4 md:left-6 top-1/2 -translate-y-1/2 z-40 hidden md:block">
<div className="flex flex-col gap-1 bg-[var(--card-bg)] border border-[var(--border-color)] rounded-lg p-2 shadow-notion-sm">
{/* User Avatar (if logged in) or Lock Icon (if not logged in) */}
<div className="relative">
Expand Down
76 changes: 66 additions & 10 deletions example-projects/competitor-analysis/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -163,17 +163,72 @@ function HomeContent() {
};

return (
<div className="min-h-screen bg-[var(--background)] py-16 px-6 sm:px-8 lg:px-12">
{/* Sidebar */}
<div className="min-h-screen bg-[var(--background)] py-8 md:py-16 px-4 sm:px-6 md:pl-24 lg:pl-28 lg:pr-12">
{/* Mobile Header */}
<div className="md:hidden fixed top-0 left-0 right-0 z-40 bg-[var(--background)] border-b border-[var(--border-color)] px-4 py-3">
<div className="flex items-center justify-between">
<a
href="/"
className="w-9 h-9 flex items-center justify-center rounded-md bg-black"
aria-label="Home"
>
<img
src="/nabla.png"
alt="Home"
width={20}
height={20}
className="rounded"
/>
</a>
<button
onClick={() => setShowSignInModal(true)}
className="w-9 h-9 flex items-center justify-center rounded-md hover:bg-[var(--hover-bg)] transition-notion"
aria-label={user ? 'Account' : 'Sign in with Valyu'}
>
{user ? (
user.picture ? (
<img
src={user.picture}
alt={user.name || user.email}
className="w-7 h-7 rounded-full object-cover"
/>
) : (
<div className="w-7 h-7 rounded-full bg-[var(--foreground)] flex items-center justify-center text-[var(--background)] font-medium text-sm">
{user.email[0].toUpperCase()}
</div>
)
) : (
<svg
className="w-5 h-5 text-[var(--foreground-secondary)]"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
/>
</svg>
)}
</button>
</div>
</div>

{/* Spacer for mobile header */}
<div className="md:hidden h-14"></div>

{/* Sidebar (desktop only) */}
<Sidebar onSignInClick={() => setShowSignInModal(true)} user={user} />

{/* Sign In Modal */}
<SignInModal isOpen={showSignInModal} onClose={() => setShowSignInModal(false)} />

{/* Authentication Success Notification */}
{showAuthSuccess && (
<div className="fixed top-6 right-6 z-50">
<div className="bg-[var(--card-bg)] border border-[var(--border-color)] rounded-lg px-5 py-4 shadow-notion flex items-center gap-3">
<div className="fixed top-16 md:top-6 right-4 md:right-6 left-4 md:left-auto z-50">
<div className="bg-[var(--card-bg)] border border-[var(--border-color)] rounded-lg px-4 md:px-5 py-3 md:py-4 shadow-notion flex items-center gap-3">
<div className="w-6 h-6 rounded-full bg-[#DBEDDB] flex items-center justify-center">
<svg className="w-3.5 h-3.5 text-[#0F7B6C]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
Expand All @@ -193,18 +248,19 @@ function HomeContent() {

{/* Discord Banner - Minimal Notion style */}
{showDiscordBanner && (
<div className="fixed top-4 left-6 z-50">
<div className="fixed top-4 left-4 right-4 md:left-20 md:right-auto z-50">
<a
href="https://discord.gg/BhUWrFbHRa"
target="_blank"
rel="noopener noreferrer"
className="group flex items-center gap-2.5 px-4 py-2.5 bg-[#5865F2] hover:bg-[#4752C4] text-white rounded-lg shadow-notion-sm transition-notion text-sm"
className="group inline-flex items-center gap-1.5 px-2.5 py-1.5 md:px-3 md:py-2 bg-[#5865F2] hover:bg-[#4752C4] text-white rounded-md shadow-notion-sm transition-notion text-xs"
>
{/* Discord Icon */}
<svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
<svg className="w-3.5 h-3.5 flex-shrink-0" viewBox="0 0 24 24" fill="currentColor">
<path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z"/>
</svg>
<span className="font-medium">Join our Discord</span>
<span className="font-medium hidden sm:inline">Join our Discord</span>
<span className="font-medium sm:hidden">Discord</span>

{/* Close button */}
<button
Expand All @@ -213,10 +269,10 @@ function HomeContent() {
e.stopPropagation();
setShowDiscordBanner(false);
}}
className="ml-1 p-1 hover:bg-white/20 rounded transition-notion"
className="ml-0.5 p-0.5 hover:bg-white/20 rounded transition-notion"
aria-label="Close"
>
<svg className="w-3.5 h-3.5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
Expand Down