feat: Implement responsive design for the experiment designer and enhance general UI components with hover effects and shadows.

src/app/(dashboard)/profile/page.tsx

@@ -43,7 +43,7 @@ function ProfileContent({ user }: { user: ProfileUser }) {
         {/* Profile Information */}
         <div className="space-y-6 lg:col-span-2">
           {/* Basic Information */}
-          <Card>
+          <Card className="hover:shadow-md transition-shadow duration-200">
             <CardHeader>
               <CardTitle>Basic Information</CardTitle>
               <CardDescription>
@@ -63,7 +63,7 @@ function ProfileContent({ user }: { user: ProfileUser }) {
           </Card>
 
           {/* Password Change */}
-          <Card>
+          <Card className="hover:shadow-md transition-shadow duration-200">
             <CardHeader>
               <CardTitle>Password</CardTitle>
               <CardDescription>Change your account password</CardDescription>
@@ -116,7 +116,7 @@ function ProfileContent({ user }: { user: ProfileUser }) {
         {/* Sidebar */}
         <div className="space-y-6">
           {/* User Summary */}
-          <Card>
+          <Card className="hover:shadow-md transition-shadow duration-200">
             <CardHeader>
               <CardTitle>Account Summary</CardTitle>
             </CardHeader>

src/app/(dashboard)/studies/[id]/experiments/[experimentId]/designer/DesignerPageClient.tsx

@@ -56,6 +56,8 @@ export function DesignerPageClient({
   ]);
 
   return (
-    <DesignerRoot experimentId={experiment.id} initialDesign={initialDesign} />
+    <div className="h-[calc(100vh-4rem-2rem)] w-full overflow-hidden border rounded-lg bg-background">
+      <DesignerRoot experimentId={experiment.id} initialDesign={initialDesign} />
+    </div>
   );
 }