root/nezha_dash
1
0
Fork 0
mirror of https://github.com/hamster1963/nezha-dash.git synced 2025-04-24 21:10:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

style: optimize element alignment

Browse Source
This commit is contained in:
hamster1963 2024-10-13 17:37:28 +08:00
parent ca8a1b4a73
commit 5c3194f71e
1 changed files with 16 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
components/ServerCard.tsx
View File

@ -38,8 +38,13 @@ export default function ServerCard({
> >
<Popover> <Popover>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<section className={"flex items-center justify-start gap-2 lg:w-28"}> <section
className="grid items-center gap-2 lg:w-28"
style={{ gridTemplateColumns: "auto 1fr auto" }}
>
<div className="flex min-w-[17px] items-center justify-center">
{showFlag ? <ServerFlag country_code={country_code} /> : null} {showFlag ? <ServerFlag country_code={country_code} /> : null}
</div>
<p <p
className={cn( className={cn(
"break-all font-bold tracking-tight", "break-all font-bold tracking-tight",
@ -48,7 +53,7 @@ export default function ServerCard({
> >
{name} {name}
</p> </p>
<span className="h-2 w-2 shrink-0 rounded-full bg-green-500"></span> <span className="h-2 w-2 shrink-0 rounded-full bg-green-500 self-center"></span>
</section> </section>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent side="top"> <PopoverContent side="top">
@ -127,8 +132,13 @@ export default function ServerCard({
> >
<Popover> <Popover>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<section className={"flex items-center justify-start gap-2 lg:w-28"}> <section
className="grid items-center gap-2 lg:w-28"
style={{ gridTemplateColumns: "auto 1fr auto" }}
>
<div className="flex items-center min-w-[17px] justify-center">
{showFlag ? <ServerFlag country_code={country_code} /> : null} {showFlag ? <ServerFlag country_code={country_code} /> : null}
</div>
<p <p
className={cn( className={cn(
"break-all font-bold tracking-tight", "break-all font-bold tracking-tight",
@ -137,7 +147,7 @@ export default function ServerCard({
> >
{name} {name}
</p> </p>
<span className="h-2 w-2 shrink-0 rounded-full bg-red-500"></span> <span className="h-2 w-2 shrink-0 rounded-full bg-red-500 self-center"></span>
</section> </section>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent className="w-fit p-2" side="top"> <PopoverContent className="w-fit p-2" side="top">