feat(s2a): Improve ProfileCard layout with flexbox for consistent height
- Add flex flex-col and h-full to Card component for full height layout - Update CardContent with flex flex-col flex-1 for proper content distribution - Move action buttons to bottom with mt-auto pt-4 spacing - Ensures profile cards maintain consistent heights in grid layout and action buttons align to bottom
This commit is contained in:
@@ -603,14 +603,14 @@ function ProfileCard({ profile, isActive, isActivating, groupNameCache, onActiva
|
|||||||
try { parsedGroups = JSON.parse(profile.group_ids || '[]') } catch { /* ignore */ }
|
try { parsedGroups = JSON.parse(profile.group_ids || '[]') } catch { /* ignore */ }
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card className={`relative transition-all ${isActive ? 'ring-2 ring-green-500 dark:ring-green-400' : ''}`}>
|
<Card className={`relative transition-all flex flex-col h-full ${isActive ? 'ring-2 ring-green-500 dark:ring-green-400' : ''}`}>
|
||||||
{/* 活动标记 */}
|
{/* 活动标记 */}
|
||||||
{isActive && (
|
{isActive && (
|
||||||
<div className="absolute -top-2 -right-2 bg-green-500 text-white text-xs px-2 py-0.5 rounded-full font-medium shadow-sm">
|
<div className="absolute -top-2 -right-2 bg-green-500 text-white text-xs px-2 py-0.5 rounded-full font-medium shadow-sm">
|
||||||
使用中
|
使用中
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<CardContent>
|
<CardContent className="flex flex-col flex-1">
|
||||||
{/* 名称 + 操作 */}
|
{/* 名称 + 操作 */}
|
||||||
<div className="flex items-start justify-between mb-3">
|
<div className="flex items-start justify-between mb-3">
|
||||||
<div className="flex-1 min-w-0">
|
<div className="flex-1 min-w-0">
|
||||||
@@ -647,7 +647,7 @@ function ProfileCard({ profile, isActive, isActivating, groupNameCache, onActiva
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
{/* 操作按钮 */}
|
{/* 操作按钮 */}
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2 mt-auto pt-4">
|
||||||
{!isActive ? (
|
{!isActive ? (
|
||||||
<Button
|
<Button
|
||||||
onClick={onActivate}
|
onClick={onActivate}
|
||||||
|
|||||||
Reference in New Issue
Block a user