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

@@ -60,7 +60,7 @@ const AdminDashboard = () => {
return (
<>
<div className='flex justify-between items-center'>
<div className='flex flex-col md:flex-row md:justify-between md:items-center'>
<div className="mb-8">
<h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Admin Dashboard
@@ -69,9 +69,9 @@ const AdminDashboard = () => {
Manage users, events, and membership applications.
</p>
</div>
<Link to={'/'}>
<Link to={'/'} className=''>
<Button
className="btn-lavender"
className="btn-lavender mb-8 md:mb-0 "
>
<Globe />
View Public Site

View File

@@ -244,7 +244,7 @@ const AdminMembers = () => {
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" }}>
Members Management
@@ -253,7 +253,7 @@ const AdminMembers = () => {
Manage paying members and their subscriptions.
</p>
</div>
<div className="flex gap-3 flex-wrap">
<div className="flex gap-3 flex-wrap ">
{hasPermission('users.export') && (
<DropdownMenu>
<DropdownMenuTrigger asChild>

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>