akanealw/Charon
1
0
Fork 0
Code Issues Pull Requests Actions 9 Packages Projects Releases Wiki Activity

fix: replace flex-shrink-0 with shrink-0 for consistent styling across components

Browse Source
This commit is contained in:
GitHub Actions
2026-03-09 20:03:57 +00:00
parent 82a55da026
commit 542d4ff3ee
21 changed files with 2977 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/AccessListForm.tsx
View File

@@ -239,7 +239,7 @@ export function AccessListForm({ initialData, onSubmit, onCancel, onDelete, isLo
</select>
{(formData.type === 'blacklist' || formData.type === 'geo_blacklist') && (
<div className="mt-2 flex items-start gap-2 p-3 bg-blue-900/20 border border-blue-700/50 rounded-lg">
<Info className="h-4 w-4 text-blue-400 mt-0.5 flex-shrink-0" />
<Info className="h-4 w-4 text-blue-400 mt-0.5 shrink-0" />
<p className="text-xs text-blue-300">
<strong>Recommended:</strong> Block lists are safer than allow lists. They block known bad actors while allowing everyone else access, preventing lockouts.
</p>
@@ -302,7 +302,7 @@ export function AccessListForm({ initialData, onSubmit, onCancel, onDelete, isLo
</div>
{preset.warning && (
<div className="flex items-start gap-1 mt-2 text-xs text-orange-400">
<AlertTriangle className="h-3 w-3 mt-0.5 flex-shrink-0" />
<AlertTriangle className="h-3 w-3 mt-0.5 shrink-0" />
<span>{preset.warning}</span>
</div>
)}
@@ -352,7 +352,7 @@ export function AccessListForm({ initialData, onSubmit, onCancel, onDelete, isLo
</div>
{preset.warning && (
<div className="flex items-start gap-1 mt-2 text-xs text-orange-400">
<AlertTriangle className="h-3 w-3 mt-0.5 flex-shrink-0" />
<AlertTriangle className="h-3 w-3 mt-0.5 shrink-0" />
<span>{preset.warning}</span>
</div>
)}

6
frontend/src/components/CrowdSecKeyWarning.tsx
View File

@@ -91,7 +91,7 @@ export function CrowdSecKeyWarning() {
<div className="flex flex-col gap-3">
<div className="flex items-start justify-between">
<div className="flex items-center gap-2">
<AlertTriangle className="h-5 w-5 text-warning flex-shrink-0" />
<AlertTriangle className="h-5 w-5 text-warning shrink-0" />
<h4 className="font-semibold text-content-primary">
{t('security.crowdsec.keyWarning.title')}
</h4>
@@ -122,7 +122,7 @@ export function CrowdSecKeyWarning() {
variant="ghost"
size="sm"
onClick={() => setShowKey(!showKey)}
className="flex-shrink-0"
className="shrink-0"
title={showKey ? 'Hide key' : 'Show key'}
>
{showKey ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
@@ -132,7 +132,7 @@ export function CrowdSecKeyWarning() {
size="sm"
onClick={handleCopy}
disabled={copied}
className="flex-shrink-0"
className="shrink-0"
>
{copied ? (
<>

4
frontend/src/components/Layout.tsx
View File

@@ -296,7 +296,7 @@ export default function Layout({ children }: LayoutProps) {
})}
</nav>
<div className={`mt-2 border-t border-gray-200 dark:border-gray-800 pt-4 flex-shrink-0 ${isCollapsed ? 'hidden' : ''}`}>
<div className={`mt-2 border-t border-gray-200 dark:border-gray-800 pt-4 shrink-0 ${isCollapsed ? 'hidden' : ''}`}>
<div className="text-xs text-gray-500 dark:text-gray-500 text-center mb-2 flex flex-col gap-0.5">
<span>Version {health?.version || 'dev'}</span>
{health?.git_commit && health.git_commit !== 'unknown' && (
@@ -319,7 +319,7 @@ export default function Layout({ children }: LayoutProps) {
{/* Collapsed Logout */}
{isCollapsed && (
<div className="mt-2 border-t border-gray-200 dark:border-gray-800 pt-4 pb-4 flex-shrink-0">
<div className="mt-2 border-t border-gray-200 dark:border-gray-800 pt-4 pb-4 shrink-0">
<button
onClick={() => {
setMobileSidebarOpen(false)

6
frontend/src/components/NotificationCenter.tsx
View File

@@ -90,7 +90,7 @@ const NotificationCenter: FC = () => {
{/* Update Notification */}
{updateInfo?.available && (
<div className="flex items-start px-4 py-3 border-b dark:border-gray-700 bg-yellow-50 dark:bg-yellow-900/10 hover:bg-yellow-100 dark:hover:bg-yellow-900/20">
<div className="flex-shrink-0 mt-0.5">
<div className="shrink-0 mt-0.5">
<AlertCircle className="w-5 h-5 text-yellow-500" />
</div>
<div className="ml-3 w-0 flex-1">
@@ -119,7 +119,7 @@ const NotificationCenter: FC = () => {
key={notification.id}
className="flex items-start px-4 py-3 border-b dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700"
>
<div className="flex-shrink-0 mt-0.5">
<div className="shrink-0 mt-0.5">
{getIcon(notification.type)}
</div>
<div className="ml-3 w-0 flex-1">
@@ -133,7 +133,7 @@ const NotificationCenter: FC = () => {
{new Date(notification.created_at).toLocaleString()}
</p>
</div>
<div className="ml-4 flex-shrink-0 flex">
<div className="ml-4 shrink-0 flex">
<button
onClick={() => markReadMutation.mutate(notification.id)}
className="bg-white dark:bg-gray-800 rounded-md inline-flex text-gray-400 hover:text-gray-500 focus:outline-none"

2
frontend/src/components/PermissionsPolicyBuilder.tsx
View File

@@ -225,7 +225,7 @@ export function PermissionsPolicyBuilder({ value, onChange }: PermissionsPolicyB
) : (
policies.map((policy) => (
<div key={policy.feature} className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
<span className="font-mono text-sm font-semibold text-gray-900 dark:text-white flex-shrink-0">
<span className="font-mono text-sm font-semibold text-gray-900 dark:text-white shrink-0">
{policy.feature}
</span>
<div className="flex-1">

4
frontend/src/components/SecurityScoreDisplay.tsx
View File

@@ -87,7 +87,7 @@ export function SecurityScoreDisplay({
<Card className="p-4">
<div className="flex items-start gap-4">
{/* Circular Score Display */}
<div className="flex-shrink-0">
<div className="shrink-0">
<div
className={`${sizeClasses[size]} rounded-full ${getScoreBgColor()} flex flex-col items-center justify-center font-bold ${getScoreColor()}`}
>
@@ -177,7 +177,7 @@ export function SecurityScoreDisplay({
<ul className="mt-3 space-y-2 pl-6">
{suggestions.map((suggestion, index) => (
<li key={index} className="flex items-start gap-2 text-sm text-gray-600 dark:text-gray-400">
<AlertCircle className="w-4 h-4 text-yellow-500 flex-shrink-0 mt-0.5" />
<AlertCircle className="w-4 h-4 text-yellow-500 shrink-0 mt-0.5" />
<span>{suggestion}</span>
</li>
))}

2
frontend/src/components/dialogs/CertificateCleanupDialog.tsx
View File

@@ -33,7 +33,7 @@ export default function CertificateCleanupDialog({
>
<form onSubmit={handleSubmit}>
<div className="flex items-start gap-3 mb-4">
<div className="flex-shrink-0 w-10 h-10 rounded-full bg-orange-900/30 flex items-center justify-center">
<div className="shrink-0 w-10 h-10 rounded-full bg-orange-900/30 flex items-center justify-center">
<AlertTriangle className="h-5 w-5 text-orange-400" />
</div>
<div className="flex-1">

4
frontend/src/components/dialogs/ImportSuccessModal.tsx
View File

@@ -32,7 +32,7 @@ export default function ImportSuccessModal({
<div className="relative bg-dark-card rounded-lg p-6 w-[500px] max-w-full mx-4 border border-gray-800">
{/* Header */}
<div className="flex items-center gap-3 mb-6">
<div className="flex-shrink-0 w-12 h-12 rounded-full bg-green-900/30 flex items-center justify-center">
<div className="shrink-0 w-12 h-12 rounded-full bg-green-900/30 flex items-center justify-center">
<CheckCircle className="h-6 w-6 text-green-400" />
</div>
<div>
@@ -101,7 +101,7 @@ export default function ImportSuccessModal({
{created > 0 && (
<div className="bg-blue-900/20 border border-blue-800/50 rounded-lg p-4 mb-6">
<div className="flex items-start gap-3">
<Info className="h-4 w-4 text-blue-400 mt-0.5 flex-shrink-0" />
<Info className="h-4 w-4 text-blue-400 mt-0.5 shrink-0" />
<div>
<p className="text-sm font-medium text-blue-300">Certificate Provisioning</p>
<p className="text-xs text-gray-400 mt-1">

6
frontend/src/components/dns-providers/ManualDNSChallenge.tsx
View File

@@ -306,7 +306,7 @@ export default function ManualDNSChallenge({
size="sm"
onClick={() => handleCopy('name', challenge.fqdn)}
aria-label={t('dnsProvider.manual.copyRecordName')}
className="flex-shrink-0"
className="shrink-0"
>
{copiedField === 'name' ? (
<Check className="h-4 w-4 text-success" aria-hidden="true" />
@@ -343,7 +343,7 @@ export default function ManualDNSChallenge({
size="sm"
onClick={() => handleCopy('value', challenge.value)}
aria-label={t('dnsProvider.manual.copyRecordValue')}
className="flex-shrink-0"
className="shrink-0"
>
{copiedField === 'value' ? (
<Check className="h-4 w-4 text-success" aria-hidden="true" />
@@ -433,7 +433,7 @@ export default function ManualDNSChallenge({
>
<div className="flex items-start gap-3">
<StatusIcon
className={`h-5 w-5 flex-shrink-0 ${statusConfig.colorClass} ${
className={`h-5 w-5 shrink-0 ${statusConfig.colorClass} ${
currentStatus === 'verifying' ? 'animate-spin' : ''
}`}
aria-hidden="true"

4
frontend/src/components/ui/Alert.tsx
View File

@@ -81,7 +81,7 @@ export function Alert({
className={cn(alertVariants({ variant }), className)}
{...props}
>
<IconComponent className={cn('h-5 w-5 flex-shrink-0 mt-0.5', iconColor)} />
<IconComponent className={cn('h-5 w-5 shrink-0 mt-0.5', iconColor)} />
<div className="flex-1 min-w-0">
{title && (
<h5 className="font-semibold text-sm mb-1">{title}</h5>
@@ -92,7 +92,7 @@ export function Alert({
<button
type="button"
onClick={handleDismiss}
className="flex-shrink-0 p-1 rounded-md text-content-muted hover:text-content-primary hover:bg-surface-muted transition-colors duration-fast"
className="shrink-0 p-1 rounded-md text-content-muted hover:text-content-primary hover:bg-surface-muted transition-colors duration-fast"
aria-label="Dismiss alert"
>
<X className="h-4 w-4" />

2
frontend/src/components/ui/Select.tsx
View File

@@ -35,7 +35,7 @@ const SelectTrigger = React.forwardRef<
>
{children}
<SelectPrimitive.Icon asChild>
<ChevronDown className="h-4 w-4 text-content-muted flex-shrink-0" />
<ChevronDown className="h-4 w-4 text-content-muted shrink-0" />
</SelectPrimitive.Icon>
</SelectPrimitive.Trigger>
))

2
frontend/src/components/ui/Skeleton.tsx
View File

@@ -129,7 +129,7 @@ export function SkeletonList({
{Array.from({ length: items }).map((_, i) => (
<div key={i} className="flex items-center gap-4">
{showAvatar && (
<Skeleton variant="circular" className="h-10 w-10 flex-shrink-0" />
<Skeleton variant="circular" className="h-10 w-10 shrink-0" />
)}
<div className="flex-1 space-y-2">
<Skeleton className="h-4 w-1/3" />