From e7284241c97ac62f5ae396259e3a5178b2a8b632 Mon Sep 17 00:00:00 2001
From: Bjorn Lammers <bjorn@lammers.media>
Date: Sat, 26 Apr 2025 22:56:39 +0200
Subject: [PATCH] feat(web): Fix and improve mobile display of submission form
 (#1291)

* feat(web): Fix and improve mobile display of submission form

* fix(web): Run Biome checks and apply fixes

* Update web/src/components/icon-search.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Signed-off-by: Bjorn Lammers <bjorn@lammers.media>

---------

Signed-off-by: Bjorn Lammers <bjorn@lammers.media>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 web/src/components/header.tsx               | 15 ++++++++++-
 web/src/components/icon-search.tsx          | 12 +++++----
 web/src/components/icon-submission-form.tsx | 28 ++++++++++++---------
 3 files changed, 37 insertions(+), 18 deletions(-)

diff --git a/web/src/components/header.tsx b/web/src/components/header.tsx
index 0259708a..2fee310d 100644
--- a/web/src/components/header.tsx
+++ b/web/src/components/header.tsx
@@ -5,7 +5,7 @@ import { ThemeSwitcher } from "@/components/theme-switcher"
 import { REPO_PATH } from "@/constants"
 import { getIconsArray } from "@/lib/api"
 import type { IconWithName } from "@/types/icons"
-import { Github, Search } from "lucide-react"
+import { Github, PlusCircle, Search } from "lucide-react"
 import Link from "next/link"
 import { useEffect, useState } from "react"
 import { CommandMenu } from "./command-menu"
@@ -74,7 +74,20 @@ export function Header() {
 						</Button>
 					</div>
 
+					{/* Mobile Submit Button -> triggers IconSubmissionForm dialog */}
+					<div className="md:hidden">
+						<IconSubmissionForm
+							trigger={
+								<Button variant="ghost" size="icon" className="rounded-lg cursor-pointer transition-all duration-300 hover:ring-2 ">
+									<PlusCircle className="h-5 w-5 transition-all duration-300" />
+									<span className="sr-only">Submit icon(s)</span>
+								</Button>
+							}
+						/>
+					</div>
+
 					<div className="hidden md:flex items-center gap-2 md:gap-4">
+						{/* Desktop Submit Button */}
 						<IconSubmissionForm />
 						<TooltipProvider>
 							<Tooltip>
diff --git a/web/src/components/icon-search.tsx b/web/src/components/icon-search.tsx
index df6610c5..fd5fd3f7 100644
--- a/web/src/components/icon-search.tsx
+++ b/web/src/components/icon-search.tsx
@@ -397,17 +397,19 @@ export function IconSearch({ icons }: IconSearchProps) {
 			</div>
 
 			{filteredIcons.length === 0 ? (
-				<div className="flex flex-col gap-8 py-12 max-w-2xl mx-auto items-center">
-					<div className="text-center">
+				<div className="flex flex-col gap-8 py-12 px-2 w-full max-w-full sm:max-w-2xl mx-auto items-center overflow-x-hidden">
+					<div className="text-center w-full">
 						<h2 className="text-3xl sm:text-5xl font-semibold">Icon not found</h2>
 						<p className="text-lg text-muted-foreground mt-2">Help us expand our collection</p>
 					</div>
 					<div className="flex flex-col gap-4 items-center w-full">
-						<IconSubmissionContent />
-						<div className="mt-4 flex items-center gap-2 justify-center">
+						<div id="icon-submission-content" className="w-full">
+							<IconSubmissionContent />
+						</div>
+						<div className="mt-4 flex flex-col sm:flex-row items-center gap-2 justify-center w-full">
 							<span className="text-sm text-muted-foreground">Can't submit it yourself?</span>
 							<Button
-								className="cursor-pointer"
+								className="cursor-pointer w-full sm:w-auto truncate whitespace-nowrap"
 								variant="outline"
 								size="sm"
 								onClick={() => {
diff --git a/web/src/components/icon-submission-form.tsx b/web/src/components/icon-submission-form.tsx
index b417b47e..b45253fd 100644
--- a/web/src/components/icon-submission-form.tsx
+++ b/web/src/components/icon-submission-form.tsx
@@ -52,12 +52,12 @@ export function IconSubmissionContent({ onClose }: { onClose?: () => void }) {
 							className="w-full flex flex-col items-start gap-1 h-auto p-4 text-left cursor-pointer transition-all duration-300"
 							asChild
 						>
-							<div>
+							<div className="w-full">
 								<div className="flex w-full items-center justify-between">
-									<span className="font-medium transition-all duration-300">{template.name}</span>
-									<ExternalLink className="h-4 w-4 text-muted-foreground transition-all duration-300" />
+									<span className="font-medium transition-all duration-300 whitespace-normal text-wrap">{template.name}</span>
+									<ExternalLink className="h-4 w-4 text-muted-foreground transition-all duration-300 flex-shrink-0 ml-2" />
 								</div>
-								<span className="text-xs text-muted-foreground">{template.description}</span>
+								<span className="text-xs text-muted-foreground whitespace-normal text-wrap break-words">{template.description}</span>
 							</div>
 						</Button>
 					</Link>
@@ -66,22 +66,26 @@ export function IconSubmissionContent({ onClose }: { onClose?: () => void }) {
 		</div>
 	)
 }
-export function IconSubmissionForm() {
+export function IconSubmissionForm({ trigger }: { trigger?: React.ReactNode }) {
 	const [open, setOpen] = useState(false)
 
 	return (
 		<Dialog open={open} onOpenChange={setOpen}>
-			<DialogTrigger asChild>
-				<Button variant="outline" className="hidden md:inline-flex cursor-pointer transition-all duration-300">
-					<PlusCircle className="h-4 w-4 transition-all duration-300" /> Submit icon(s)
-				</Button>
-			</DialogTrigger>
-			<DialogContent className="md:max-w-4xl backdrop-blur-2xl bg-background">
+			{trigger ? (
+				<DialogTrigger asChild>{trigger}</DialogTrigger>
+			) : (
+				<DialogTrigger asChild>
+					<Button variant="outline" className="hidden md:inline-flex cursor-pointer transition-all duration-300 items-center gap-2">
+						<PlusCircle className="h-4 w-4 transition-all duration-300" /> Submit icon(s)
+					</Button>
+				</DialogTrigger>
+			)}
+			<DialogContent className="w-[calc(100%-2rem)] max-w-sm md:w-full md:max-w-4xl p-6 backdrop-blur-2xl bg-background flex flex-col gap-4">
 				<DialogHeader>
 					<DialogTitle>Submit an icon</DialogTitle>
 					<DialogDescription>Select an option below to submit or update an icon.</DialogDescription>
 				</DialogHeader>
-				<div className="mt-4">
+				<div className="overflow-y-auto max-h-[calc(85vh-10rem)] pr-2">
 					<IconSubmissionContent onClose={() => setOpen(false)} />
 				</div>
 			</DialogContent>