feat: add @tailwindcss/line-clamp dependency and integrate responsive layout adjustments in Admin components for improved UI

This commit is contained in:
2026-01-22 12:07:56 -06:00
parent 8ea486a4f4
commit 6c844c0e19
8 changed files with 93 additions and 38 deletions

View File

@@ -132,7 +132,7 @@ const AdminStaff = () => {
return (
<>
<div className="mb-8">
<div className="flex justify-between items-start mb-4">
<div className="flex flex-col md:flex-row justify-between items-start mb-4">
<div>
<h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Staff Management
@@ -141,7 +141,7 @@ const AdminStaff = () => {
Manage internal team members and their roles.
</p>
</div>
<div className="flex gap-3">
<div className="flex gap-3 ">
{hasPermission('users.create') && (
<Button
onClick={() => setInviteDialogOpen(true)}
@@ -194,13 +194,13 @@ const AdminStaff = () => {
{/* Tabs */}
<Tabs value={activeTab} onValueChange={setActiveTab} className="mb-8">
<TabsList className="grid w-full grid-cols-2 mb-8">
<TabsTrigger value="staff-list" className="text-lg py-3">
<UserCog className="h-5 w-5 mr-2" />
<TabsList className="grid w-full grid-cols-2 mb-8 ">
<TabsTrigger value="staff-list" className="text-sm sm:text-md md:text-lg py-3">
<UserCog className="h-5 w-5 mr-2 hidden md:inline" />
Staff Members
</TabsTrigger>
<TabsTrigger value="pending-invitations" className="text-lg py-3 ">
<Mail className="h-5 w-5 mr-2" />
<TabsTrigger value="pending-invitations" className="text-sm sm:text-md md:text-lg py-3 ">
<Mail className="h-5 w-5 mr-2 hidden md:inline" />
Pending Invitations
</TabsTrigger>
</TabsList>