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

app/(dashboard)/dashboard/project-filter.tsx

@@ -82,8 +82,8 @@ export function ProjectFilter({ projects, workspaces }: ProjectFilterProps) {
   return (
     <>
       {/* Header */}
-      <div className="flex items-center justify-between mb-8">
-        <div className="flex items-center gap-4">
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-8">
+        <div className="flex flex-col sm:flex-row sm:items-center gap-4">
           <h1 className="text-3xl font-bold tracking-tight">Projects</h1>
           {workspaces.length > 0 && (
             <Select value={selectedWorkspace} onValueChange={setSelectedWorkspace}>
@@ -101,7 +101,7 @@ export function ProjectFilter({ projects, workspaces }: ProjectFilterProps) {
             </Select>
           )}
         </div>
-        <div className="flex items-center gap-3">
+        <div className="flex flex-wrap items-center gap-3">
           <Button
             variant="outline"
             size="sm"

app/(dashboard)/projects/[projectId]/members/page.tsx

@@ -195,8 +195,8 @@ export default function ProjectMembersPage() {
           </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"
@@ -208,7 +208,7 @@ export default function ProjectMembersPage() {
                 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">
@@ -220,7 +220,7 @@ export default function ProjectMembersPage() {
                 </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" />
               ) : (
@@ -257,7 +257,7 @@ export default function ProjectMembersPage() {
         <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} />
@@ -277,7 +277,7 @@ export default function ProjectMembersPage() {
 
           {/* 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} />
@@ -288,12 +288,12 @@ export default function ProjectMembersPage() {
                   <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>

app/(dashboard)/projects/[projectId]/project-content-client.tsx

@@ -11,6 +11,9 @@ import {
   Building2,
   ArrowUp,
   ArrowDown,
+  Globe,
+  UserPlus,
+  Lock,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
@@ -71,9 +74,9 @@ export function ProjectContentClient({
           <div className="flex items-center gap-2 mb-1">
             <h1 className="text-3xl font-bold tracking-tight">{project.name}</h1>
             <Badge variant="outline" className="flex items-center gap-1">
-              {project.visibility === 'PUBLIC' && <span className="text-xs">🌐</span>}
-              {project.visibility === 'INVITE' && <span className="text-xs">📧</span>}
-              {project.visibility === 'PRIVATE' && <span className="text-xs">🔒</span>}
+              {project.visibility === 'PUBLIC' && <Globe className="h-3 w-3" />}
+              {project.visibility === 'INVITE' && <UserPlus className="h-3 w-3" />}
+              {project.visibility === 'PRIVATE' && <Lock className="h-3 w-3" />}
               {project.visibility.toLowerCase()}
             </Badge>
           </div>
@@ -92,7 +95,7 @@ export function ProjectContentClient({
           </div>
         </div>
 
-        <div className="flex items-center gap-2">
+        <div className="flex flex-wrap items-center gap-2 mt-4 sm:mt-0">
           {/* Sort Button - Left of Share */}
           <Button
             variant="outline"

app/(dashboard)/projects/[projectId]/settings/page.tsx

@@ -362,7 +362,7 @@ export default function ProjectSettingsPage({ params }: ProjectSettingsPageProps
                             {/* Existing tags */}
                             <div className="space-y-2">
                                 {tags.map((tag) => (
-                                    <div key={tag.id} className="flex items-center gap-2 p-2 rounded-lg border bg-card">
+                                    <div key={tag.id} className="flex flex-wrap items-center gap-2 p-2 rounded-lg border bg-card">
                                         {editingTagId === tag.id ? (
                                             <>
                                                 <input
@@ -417,7 +417,7 @@ export default function ProjectSettingsPage({ params }: ProjectSettingsPageProps
                             </div>
 
                             {/* Add new tag */}
-                            <div className="flex items-center gap-2 pt-2 border-t">
+                            <div className="flex flex-wrap items-center gap-2 pt-2 border-t">
                                 <input
                                     type="color"
                                     value={newTagColor}

app/(dashboard)/projects/[projectId]/videos/new/page.tsx

@@ -224,7 +224,7 @@ export default function NewVideoPage() {
               </p>
             )}
 
-            <div className="flex gap-3">
+            <div className="flex flex-wrap gap-3">
               <Button type="submit" disabled={isLoading || !videoSource}>
                 {isLoading && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
                 Add Video

app/(dashboard)/settings/page.tsx

@@ -54,7 +54,7 @@ function ToggleButton({
           : 'border-border hover:bg-accent/50'
       )}
     >
-      <div>
+      <div className="flex-1 min-w-0 pr-4">
         <span className="text-sm font-medium">{label}</span>
         {description && (
           <p className="text-xs text-muted-foreground mt-0.5">{description}</p>
@@ -62,7 +62,7 @@ function ToggleButton({
       </div>
       <div
         className={cn(
-          'w-10 h-6 rounded-full relative transition-colors',
+          'w-10 h-6 shrink-0 rounded-full relative transition-colors',
           enabled ? 'bg-primary' : 'bg-muted'
         )}
       >

app/(dashboard)/workspaces/[workspaceId]/members/page.tsx

@@ -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>

app/(dashboard)/workspaces/[workspaceId]/page.tsx

@@ -98,13 +98,13 @@ export default async function WorkspacePage({ params }: WorkspacePageProps) {
         </Link>
       </div>
 
-      <div className="flex items-center justify-between mb-8">
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-8">
         <div>
           <h1 className="text-3xl font-bold tracking-tight">{workspace.name}</h1>
           {workspace.description && (
             <p className="text-muted-foreground mt-1">{workspace.description}</p>
           )}
-          <div className="flex items-center gap-4 mt-2 text-sm text-muted-foreground">
+          <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4 mt-2 text-sm text-muted-foreground">
             <span className="flex items-center gap-1">
               <FolderOpen className="h-3.5 w-3.5" />
               {workspace._count.projects} projects
@@ -115,22 +115,22 @@ export default async function WorkspacePage({ params }: WorkspacePageProps) {
             </span>
           </div>
         </div>
-        <div className="flex items-center gap-2">
+        <div className="flex flex-wrap items-center gap-2 w-full sm:w-auto mt-2 sm:mt-0">
           {isAdmin && (
             <>
-              <Button asChild variant="outline" size="sm">
+              <Button asChild variant="outline" size="sm" className="flex-1 sm:flex-none">
                 <Link href={`/workspaces/${workspaceId}/members`}>
                   <Users className="h-4 w-4 mr-2" />
                   Members
                 </Link>
               </Button>
-              <Button asChild variant="outline" size="sm">
+              <Button asChild variant="outline" size="sm" className="flex-1 sm:flex-none">
                 <Link href={`/workspaces/${workspaceId}/settings`}>
                   <Settings className="h-4 w-4 mr-2" />
                   Settings
                 </Link>
               </Button>
-              <Button asChild size="sm">
+              <Button asChild size="sm" className="w-full sm:w-auto">
                 <Link href={`/workspaces/${workspaceId}/projects/new`}>
                   <Plus className="h-4 w-4 mr-2" />
                   New Project

app/(dashboard)/workspaces/page.tsx

@@ -48,14 +48,14 @@ export default async function WorkspacesPage() {
   return (
     <div className="px-6 lg:px-8 py-8 w-full">
       {/* Header */}
-      <div className="flex items-center justify-between mb-8">
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-8">
         <div>
           <h1 className="text-3xl font-bold tracking-tight">Workspaces</h1>
           <p className="text-muted-foreground mt-1">
             Manage your workspaces and their projects
           </p>
         </div>
-        <Button asChild>
+        <Button asChild className="w-full sm:w-auto">
           <Link href="/workspaces/new">
             <Plus className="h-4 w-4 mr-2" />
             New Workspace