feat: Enhance dashboard responsiveness across various pages and update project visibility icons for improved clarity.

This commit is contained in:
Yusuf İpek
2026-02-20 14:28:43 +03:00
parent fe496b7fa5
commit 1bb1c8e574
12 changed files with 525 additions and 512 deletions
@@ -194,8 +194,8 @@ export default function WorkspaceMembersPage() {
</CardDescription>
</CardHeader>
<CardContent>
<form onSubmit={handleInvite} className="flex gap-3 items-end">
<div className="flex-1">
<form onSubmit={handleInvite} className="flex flex-col sm:flex-row gap-3 sm:items-end">
<div className="w-full sm:flex-1">
<Label htmlFor="email" className="mb-2 block">Email Address</Label>
<Input
id="email"
@@ -207,7 +207,7 @@ export default function WorkspaceMembersPage() {
disabled={isInviting}
/>
</div>
<div className="w-40">
<div className="w-full sm:w-40">
<Label className="mb-2 block">Role</Label>
<Select value={inviteRole} onValueChange={(v) => setInviteRole(v as 'ADMIN' | 'COMMENTATOR')}>
<SelectTrigger className="w-full">
@@ -219,7 +219,7 @@ export default function WorkspaceMembersPage() {
</SelectContent>
</Select>
</div>
<Button type="submit" disabled={isInviting}>
<Button type="submit" disabled={isInviting} className="w-full sm:w-auto">
{isInviting ? (
<Loader2 className="h-4 w-4 animate-spin" />
) : (
@@ -255,7 +255,7 @@ export default function WorkspaceMembersPage() {
<CardContent className="space-y-3">
{/* Owner */}
{owner && (
<div className="flex items-center justify-between p-3 rounded-lg bg-accent/30">
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 sm:gap-0 p-3 rounded-lg bg-accent/30">
<div className="flex items-center gap-3">
<Avatar className="h-9 w-9">
<AvatarImage src={owner.image ?? undefined} />
@@ -275,7 +275,7 @@ export default function WorkspaceMembersPage() {
{/* Members */}
{members.map((member) => (
<div key={member.id} className="flex items-center justify-between p-3 rounded-lg border">
<div key={member.id} className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 sm:gap-0 p-3 rounded-lg border">
<div className="flex items-center gap-3">
<Avatar className="h-9 w-9">
<AvatarImage src={member.user.image ?? undefined} />
@@ -286,12 +286,12 @@ export default function WorkspaceMembersPage() {
<p className="text-xs text-muted-foreground">{member.user.email}</p>
</div>
</div>
<div className="flex items-center gap-2">
<div className="flex items-center gap-2 w-full sm:w-auto">
<Select
value={member.role}
onValueChange={(v) => handleRoleChange(member.id, v)}
>
<SelectTrigger className="w-36 h-8">
<SelectTrigger className="w-full sm:w-36 h-8">
<SelectValue />
</SelectTrigger>
<SelectContent>