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

@@ -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>