forked from baron/baron-sso
style: make page headers sticky and improve table header contrast/visibility
This commit is contained in:
@@ -36,7 +36,7 @@ export default function GlobalUserGroupListPage() {
|
||||
|
||||
return (
|
||||
<div className="space-y-6 flex flex-col h-[calc(100vh-theme(spacing.32))]">
|
||||
<header className="flex items-start justify-between flex-shrink-0">
|
||||
<header className="flex items-start justify-between flex-shrink-0 sticky top-[-2.5rem] z-20 bg-background/95 backdrop-blur pt-4 pb-2 -mt-4">
|
||||
<div className="space-y-1">
|
||||
<h2 className="text-3xl font-bold tracking-tight">User Groups</h2>
|
||||
<p className="text-muted-foreground">
|
||||
@@ -87,7 +87,7 @@ function TenantGroupCard({ tenant }: { tenant: TenantSummary }) {
|
||||
<div className="flex-1 rounded-md border overflow-hidden flex flex-col">
|
||||
<div className="flex-1 overflow-auto relative custom-scrollbar max-h-[400px]">
|
||||
<Table>
|
||||
<TableHeader className="sticky top-0 bg-muted/90 backdrop-blur z-10 shadow-sm">
|
||||
<TableHeader className="sticky top-0 bg-secondary/100 backdrop-blur z-10 shadow-sm">
|
||||
<TableRow>
|
||||
<TableHead className="w-[250px]">그룹명</TableHead>
|
||||
<TableHead>설명</TableHead>
|
||||
|
||||
@@ -228,7 +228,7 @@ const MemberTable: React.FC<{
|
||||
}> = ({ members, isLoading, onRefresh, showTenant }) => (
|
||||
<div className="border rounded-md overflow-hidden">
|
||||
<Table>
|
||||
<TableHeader className="bg-muted/30">
|
||||
<TableHeader className="bg-secondary/100 shadow-sm z-10">
|
||||
<TableRow>
|
||||
<TableHead className="h-9">
|
||||
{t("ui.admin.users.table.name", "NAME")}
|
||||
@@ -1106,7 +1106,7 @@ function TenantUserGroupsTab() {
|
||||
<div className="flex-1 rounded-md border-0 overflow-hidden flex flex-col">
|
||||
<div className="flex-1 overflow-auto relative custom-scrollbar">
|
||||
<Table>
|
||||
<TableHeader className="sticky top-0 bg-muted/90 backdrop-blur z-10 shadow-sm">
|
||||
<TableHeader className="sticky top-0 bg-secondary/100 backdrop-blur z-10 shadow-sm">
|
||||
<TableRow>
|
||||
<TableHead className="pl-6 w-[40%]">
|
||||
{t("ui.admin.tenants.table.name", "NAME")}
|
||||
|
||||
@@ -212,7 +212,7 @@ export function UserGroupDetailPage() {
|
||||
|
||||
return (
|
||||
<div className="space-y-8 flex flex-col h-[calc(100vh-theme(spacing.32))]">
|
||||
<header className="flex flex-wrap items-start justify-between gap-4 flex-shrink-0">
|
||||
<header className="flex flex-wrap items-start justify-between gap-4 flex-shrink-0 sticky top-[-2.5rem] z-20 bg-background/95 backdrop-blur pt-4 pb-2 -mt-4">
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<Link
|
||||
@@ -351,7 +351,7 @@ export function UserGroupDetailPage() {
|
||||
<div className="flex-1 rounded-md border overflow-hidden flex flex-col">
|
||||
<div className="flex-1 overflow-auto relative custom-scrollbar">
|
||||
<Table>
|
||||
<TableHeader className="sticky top-0 bg-muted/90 backdrop-blur z-10 shadow-sm">
|
||||
<TableHeader className="sticky top-0 bg-secondary/100 backdrop-blur z-10 shadow-sm">
|
||||
<TableRow>
|
||||
<TableHead className="font-bold">
|
||||
{t("ui.admin.users.list.table.name_email", "사용자")}
|
||||
@@ -536,7 +536,7 @@ export function UserGroupDetailPage() {
|
||||
<div className="flex-1 rounded-md border overflow-hidden flex flex-col">
|
||||
<div className="flex-1 overflow-auto relative custom-scrollbar">
|
||||
<Table>
|
||||
<TableHeader className="sticky top-0 bg-muted/90 backdrop-blur z-10 shadow-sm">
|
||||
<TableHeader className="sticky top-0 bg-secondary/100 backdrop-blur z-10 shadow-sm">
|
||||
<TableRow>
|
||||
<TableHead className="font-bold">
|
||||
{t("ui.admin.users.detail.form.tenant", "대상 테넌트")}
|
||||
|
||||
Reference in New Issue
Block a user