calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-05-17 06:24:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix alignement in info sections

Browse Source
This commit is contained in:
miloschwartz
2026-05-04 14:51:17 -07:00
parent 53c138ce3e
commit 91f1bae3e9
4 changed files with 37 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/CertificateStatus.tsx
View File

@@ -31,8 +31,9 @@ export function CertificateStatusContent({
const t = useTranslations(); const t = useTranslations();
const labelClass = const labelClass =
"inline-flex shrink-0 items-center self-center text-sm font-medium leading-none"; "inline-flex shrink-0 items-center self-center text-sm font-medium leading-normal";
const valueClass = "inline-flex items-center gap-2 text-sm leading-none"; const valueClass =
"inline-flex items-center gap-2 text-sm leading-normal";
const handleRefresh = async () => { const handleRefresh = async () => {
await refreshCert(); await refreshCert();
@@ -133,14 +134,14 @@ export function CertificateStatusContent({
{isPending && !disableRestartButton ? ( {isPending && !disableRestartButton ? (
<Button <Button
variant="ghost" variant="ghost"
className="h-auto min-h-0 shrink-0 p-0 text-sm font-normal leading-none inline-flex items-center self-center" className="h-auto min-h-0 shrink-0 p-0 text-sm font-normal leading-normal inline-flex items-center self-center"
onClick={handleRefresh} onClick={handleRefresh}
disabled={refreshing} disabled={refreshing}
title={t("restartCertificate", { title={t("restartCertificate", {
defaultValue: "Restart Certificate" defaultValue: "Restart Certificate"
})} })}
> >
<span className="inline-flex items-center gap-2 leading-none"> <span className="inline-flex items-center gap-2 leading-normal">
<FileBadge <FileBadge
className={`h-4 w-4 shrink-0 ${getStatusColor(cert.status)}`} className={`h-4 w-4 shrink-0 ${getStatusColor(cert.status)}`}
aria-hidden aria-hidden
@@ -148,7 +149,7 @@ export function CertificateStatusContent({
{cert.status.charAt(0).toUpperCase() + {cert.status.charAt(0).toUpperCase() +
cert.status.slice(1)} cert.status.slice(1)}
<RotateCw <RotateCw
className={`h-3 w-3 shrink-0 ${refreshing ? "animate-spin" : ""}`} className={`h-4 w-4 shrink-0 ${refreshing ? "animate-spin" : ""}`}
/> />
</span> </span>
</Button> </Button>
@@ -164,7 +165,7 @@ export function CertificateStatusContent({
<Button <Button
size="icon" size="icon"
variant="ghost" variant="ghost"
className="inline-flex h-auto min-h-0 w-3 shrink-0 items-center justify-center self-center p-0" className="inline-flex h-4 w-4 min-h-0 shrink-0 items-center justify-center self-center p-0"
onClick={handleRefresh} onClick={handleRefresh}
disabled={refreshing} disabled={refreshing}
title={t("restartCertificate", { title={t("restartCertificate", {
@@ -172,7 +173,7 @@ export function CertificateStatusContent({
})} })}
> >
<RotateCw <RotateCw
className={`h-3 w-3 shrink-0 ${refreshing ? "animate-spin" : ""}`} className={`h-4 w-4 shrink-0 ${refreshing ? "animate-spin" : ""}`}
/> />
</Button> </Button>
) : null} ) : null}

2
src/components/CopyToClipboard.tsx
View File

@@ -33,7 +33,7 @@ const CopyToClipboard = ({
<div className="flex items-center space-x-2 min-w-0 max-w-full"> <div className="flex items-center space-x-2 min-w-0 max-w-full">
<button <button
type="button" type="button"
className="h-6 w-6 p-0 flex items-center justify-center cursor-pointer flex-shrink-0" className="h-4 w-4 p-0 flex items-center justify-center cursor-pointer flex-shrink-0"
onClick={handleCopy} onClick={handleCopy}
> >
{!copied ? ( {!copied ? (

23
src/components/InfoSection.tsx
View File

@@ -19,7 +19,7 @@ export function InfoSections({
return ( return (
<div <div
className={cn( className={cn(
"grid grid-cols-2 md:grid-cols-(--columns) md:space-x-16 gap-4 md:items-start", "grid w-full min-w-0 grid-cols-2 md:grid-cols-(--columns) md:space-x-16 gap-4 md:items-start",
columnSizing === "content" && columnSizing === "content" &&
"md:justify-items-start md:justify-start" "md:justify-items-start md:justify-start"
)} )}
@@ -41,7 +41,11 @@ export function InfoSection({
children: React.ReactNode; children: React.ReactNode;
className?: string; className?: string;
}) { }) {
return <div className={cn("space-y-1", className)}>{children}</div>; return (
<div className={cn("min-w-0 w-full max-w-full space-y-1", className)}>
{children}
</div>
);
} }
export function InfoSectionTitle({ export function InfoSectionTitle({
@@ -51,7 +55,11 @@ export function InfoSectionTitle({
children: React.ReactNode; children: React.ReactNode;
className?: string; className?: string;
}) { }) {
return <div className={cn("font-semibold", className)}>{children}</div>; return (
<div className={cn("min-w-0 truncate font-semibold", className)}>
{children}
</div>
);
} }
export function InfoSectionContent({ export function InfoSectionContent({
@@ -62,8 +70,13 @@ export function InfoSectionContent({
className?: string; className?: string;
}) { }) {
return ( return (
<div className={cn("min-w-0 overflow-hidden", className)}> <div
<div className="w-full truncate [&>div.flex]:min-w-0 [&>div.flex]:!whitespace-normal [&>div.flex>span]:truncate [&>div.flex>a]:truncate"> className={cn(
"w-full min-w-0 max-w-full overflow-hidden",
className
)}
>
<div className="w-full min-w-0 max-w-full truncate [&>div.flex]:min-w-0 [&>div.flex]:!whitespace-normal [&>div.flex>span]:truncate [&>div.flex>a]:truncate">
{children} {children}
</div> </div>
</div> </div>

14
src/components/ResourceInfoBox.tsx
View File

@@ -40,7 +40,9 @@ export default function ResourceInfoBox({}: ResourceInfoBoxType) {
<InfoSection> <InfoSection>
<InfoSectionTitle>{t("identifier")}</InfoSectionTitle> <InfoSectionTitle>{t("identifier")}</InfoSectionTitle>
<InfoSectionContent> <InfoSectionContent>
{resource.niceId} <span className="inline-flex items-center">
{resource.niceId}
</span>
</InfoSectionContent> </InfoSectionContent>
</InfoSection> </InfoSection>
{resource.http ? ( {resource.http ? (
@@ -49,7 +51,9 @@ export default function ResourceInfoBox({}: ResourceInfoBoxType) {
<InfoSectionTitle>URL</InfoSectionTitle> <InfoSectionTitle>URL</InfoSectionTitle>
<InfoSectionContent> <InfoSectionContent>
{resource.wildcard ? ( {resource.wildcard ? (
<span>{fullUrl}</span> <span className="inline-flex items-center">
{fullUrl}
</span>
) : ( ) : (
<CopyToClipboard <CopyToClipboard
text={fullUrl} text={fullUrl}
@@ -68,7 +72,7 @@ export default function ResourceInfoBox({}: ResourceInfoBoxType) {
authInfo.sso || authInfo.sso ||
authInfo.whitelist || authInfo.whitelist ||
authInfo.headerAuth ? ( authInfo.headerAuth ? (
<div className="flex items-start space-x-2"> <div className="flex items-center space-x-2">
<ShieldCheck className="w-4 h-4 flex-shrink-0 text-green-500" /> <ShieldCheck className="w-4 h-4 flex-shrink-0 text-green-500" />
<span>{t("protected")}</span> <span>{t("protected")}</span>
</div> </div>
@@ -106,7 +110,9 @@ export default function ResourceInfoBox({}: ResourceInfoBoxType) {
{t("protocol")} {t("protocol")}
</InfoSectionTitle> </InfoSectionTitle>
<InfoSectionContent> <InfoSectionContent>
{resource.protocol.toUpperCase()} <span className="inline-flex items-center">
{resource.protocol.toUpperCase()}
</span>
</InfoSectionContent> </InfoSectionContent>
</InfoSection> </InfoSection>
<InfoSection> <InfoSection>