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>
This commit is contained in:
Bjorn Lammers
2025-04-26 22:56:39 +02:00
committed by GitHub
parent 09a30fd4fa
commit e7284241c9
3 changed files with 37 additions and 18 deletions

View File

@@ -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={() => {