calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-05-06 12:27:39 +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 labelClass =
"inline-flex shrink-0 items-center self-center text-sm font-medium leading-none";
const valueClass = "inline-flex items-center gap-2 text-sm 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-normal";
const handleRefresh = async () => {
await refreshCert();
@@ -133,14 +134,14 @@ export function CertificateStatusContent({
{isPending && !disableRestartButton ? (
<Button
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}
disabled={refreshing}
title={t("restartCertificate", {
defaultValue: "Restart Certificate"
})}
>
<span className="inline-flex items-center gap-2 leading-none">
<span className="inline-flex items-center gap-2 leading-normal">
<FileBadge
className={`h-4 w-4 shrink-0 ${getStatusColor(cert.status)}`}
aria-hidden
@@ -148,7 +149,7 @@ export function CertificateStatusContent({
{cert.status.charAt(0).toUpperCase() +
cert.status.slice(1)}
<RotateCw
className={`h-3 w-3 shrink-0 ${refreshing ? "animate-spin" : ""}`}
className={`h-4 w-4 shrink-0 ${refreshing ? "animate-spin" : ""}`}
/>
</span>
</Button>
@@ -164,7 +165,7 @@ export function CertificateStatusContent({
<Button
size="icon"
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}
disabled={refreshing}
title={t("restartCertificate", {
@@ -172,7 +173,7 @@ export function CertificateStatusContent({
})}
>
<RotateCw
className={`h-3 w-3 shrink-0 ${refreshing ? "animate-spin" : ""}`}
className={`h-4 w-4 shrink-0 ${refreshing ? "animate-spin" : ""}`}
/>
</Button>
) : 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">
<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}
>
{!copied ? (

23
src/components/InfoSection.tsx
View File

@@ -19,7 +19,7 @@ export function InfoSections({
return (
<div
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" &&
"md:justify-items-start md:justify-start"
)}
@@ -41,7 +41,11 @@ export function InfoSection({
children: React.ReactNode;
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({
@@ -51,7 +55,11 @@ export function InfoSectionTitle({
children: React.ReactNode;
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({
@@ -62,8 +70,13 @@ export function InfoSectionContent({
className?: string;
}) {
return (
<div className={cn("min-w-0 overflow-hidden", className)}>
<div className="w-full truncate [&>div.flex]:min-w-0 [&>div.flex]:!whitespace-normal [&>div.flex>span]:truncate [&>div.flex>a]:truncate">
<div
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}
</div>
</div>

14
src/components/ResourceInfoBox.tsx
View File

@@ -40,7 +40,9 @@ export default function ResourceInfoBox({}: ResourceInfoBoxType) {
<InfoSection>
<InfoSectionTitle>{t("identifier")}</InfoSectionTitle>
<InfoSectionContent>
{resource.niceId}
<span className="inline-flex items-center">
{resource.niceId}
</span>
</InfoSectionContent>
</InfoSection>
{resource.http ? (
@@ -49,7 +51,9 @@ export default function ResourceInfoBox({}: ResourceInfoBoxType) {
<InfoSectionTitle>URL</InfoSectionTitle>
<InfoSectionContent>
{resource.wildcard ? (
<span>{fullUrl}</span>
<span className="inline-flex items-center">
{fullUrl}
</span>
) : (
<CopyToClipboard
text={fullUrl}
@@ -68,7 +72,7 @@ export default function ResourceInfoBox({}: ResourceInfoBoxType) {
authInfo.sso ||
authInfo.whitelist ||
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" />
<span>{t("protected")}</span>
</div>
@@ -106,7 +110,9 @@ export default function ResourceInfoBox({}: ResourceInfoBoxType) {
{t("protocol")}
</InfoSectionTitle>
<InfoSectionContent>
{resource.protocol.toUpperCase()}
<span className="inline-flex items-center">
{resource.protocol.toUpperCase()}
</span>
</InfoSectionContent>
</InfoSection>
<InfoSection>