refactor: restructure study and participant forms into logical sections with separators and enhance EntityForm's layout flexibility for sidebar presence.

src/components/participants/ParticipantForm.tsx

@@ -256,14 +256,15 @@ export function ParticipantForm({
     <>
       <FormSection
         title="Participant Information"
-        description="Basic information about the research participant."
+        description="Basic identity and study association."
       >
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
           <FormField>
             <Label htmlFor="participantCode">Participant Code *</Label>
             <Input
               id="participantCode"
               {...form.register("participantCode")}
-            placeholder="e.g., P001, SUBJ_01, etc."
+              placeholder="e.g., P001"
               className={
                 form.formState.errors.participantCode ? "border-red-500" : ""
               }
@@ -273,9 +274,6 @@ export function ParticipantForm({
                 {form.formState.errors.participantCode.message}
               </p>
             )}
-          <p className="text-muted-foreground text-xs">
-            Unique identifier for this participant within the study
-          </p>
           </FormField>
 
           <FormField>
@@ -283,7 +281,7 @@ export function ParticipantForm({
             <Input
               id="name"
               {...form.register("name")}
-            placeholder="Optional: Participant's full name"
+              placeholder="Optional name"
               className={form.formState.errors.name ? "border-red-500" : ""}
             />
             {form.formState.errors.name && (
@@ -291,9 +289,6 @@ export function ParticipantForm({
                 {form.formState.errors.name.message}
               </p>
             )}
-          <p className="text-muted-foreground text-xs">
-            Optional: Real name for contact purposes
-          </p>
           </FormField>
 
           <FormField>
@@ -310,11 +305,17 @@ export function ParticipantForm({
                 {form.formState.errors.email.message}
               </p>
             )}
-          <p className="text-muted-foreground text-xs">
-            Optional: For scheduling and communication
-          </p>
           </FormField>
+        </div>
+      </FormSection>
 
+      <div className="my-6" />
+
+      <FormSection
+        title="Demographics & Study"
+        description="study association and demographic details."
+      >
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
           <FormField>
             <Label htmlFor="studyId">Study *</Label>
             <Select
@@ -323,11 +324,13 @@ export function ParticipantForm({
               disabled={studiesLoading || mode === "edit"}
             >
               <SelectTrigger
-              className={form.formState.errors.studyId ? "border-red-500" : ""}
+                className={
+                  form.formState.errors.studyId ? "border-red-500" : ""
+                }
               >
                 <SelectValue
                   placeholder={
-                  studiesLoading ? "Loading studies..." : "Select a study"
+                    studiesLoading ? "Loading..." : "Select study"
                   }
                 />
               </SelectTrigger>
@@ -344,18 +347,8 @@ export function ParticipantForm({
                 {form.formState.errors.studyId.message}
               </p>
             )}
-          {mode === "edit" && (
-            <p className="text-muted-foreground text-xs">
-              Study cannot be changed after registration
-            </p>
-          )}
           </FormField>
-      </FormSection>
 
-      <FormSection
-        title="Demographics"
-        description="Optional demographic information for research purposes."
-      >
           <FormField>
             <Label htmlFor="age">Age</Label>
             <Input
@@ -372,9 +365,6 @@ export function ParticipantForm({
                 {form.formState.errors.age.message}
               </p>
             )}
-          <p className="text-muted-foreground text-xs">
-            Optional: Age in years (minimum 18)
-          </p>
           </FormField>
 
           <FormField>
@@ -394,7 +384,7 @@ export function ParticipantForm({
               }
             >
               <SelectTrigger>
-              <SelectValue placeholder="Select gender (optional)" />
+                <SelectValue placeholder="Select gender" />
               </SelectTrigger>
               <SelectContent>
                 <SelectItem value="male">Male</SelectItem>
@@ -406,10 +396,8 @@ export function ParticipantForm({
                 <SelectItem value="other">Other</SelectItem>
               </SelectContent>
             </Select>
-          <p className="text-muted-foreground text-xs">
-            Optional: Gender identity for demographic analysis
-          </p>
           </FormField>
+        </div>
       </FormSection>
 
       {mode === "create" && (
@@ -505,8 +493,7 @@ export function ParticipantForm({
       error={error}
       onDelete={mode === "edit" ? onDelete : undefined}
       isDeleting={isDeleting}
-
+      sidebar={mode === "create" ? sidebar : undefined}
-      // sidebar={sidebar} // Removed for cleaner UI per user request
       submitText={mode === "create" ? "Register Participant" : "Save Changes"}
     >
       {formFields}

src/components/participants/ParticipantsTable.tsx

@@ -24,6 +24,12 @@ import {
 } from "~/components/ui/dropdown-menu";
 import { useStudyContext } from "~/lib/study-context";
 import { api } from "~/trpc/react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "~/components/ui/tooltip";
 
 export type Participant = {
   id: string;
@@ -101,16 +107,32 @@ export const columns: ColumnDef<Participant>[] = [
       const name = row.getValue("name");
       const email = row.original.email;
       return (
+        <TooltipProvider>
           <div>
-          <div className="truncate font-medium">
+            <div className="truncate font-medium max-w-[200px]">
-            {String(name) || "No name provided"}
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <span>{String(name) || "No name provided"}</span>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>{String(name) || "No name provided"}</p>
+                </TooltipContent>
+              </Tooltip>
             </div>
             {email && (
-            <div className="text-muted-foreground truncate text-sm">
+              <div className="text-muted-foreground truncate text-sm max-w-[200px]">
-              {email}
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <span>{email}</span>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>{email}</p>
+                  </TooltipContent>
+                </Tooltip>
               </div>
             )}
           </div>
+        </TooltipProvider>
       );
     },
   },
@@ -120,11 +142,30 @@ export const columns: ColumnDef<Participant>[] = [
     cell: ({ row }) => {
       const consentGiven = row.getValue("consentGiven");
 
-      if (consentGiven) {
+      return (
-        return <Badge className="bg-green-100 text-green-800">Consented</Badge>;
+        <TooltipProvider>
-      }
+          <Tooltip>
-
+            <TooltipTrigger>
-      return <Badge className="bg-red-100 text-red-800">Pending</Badge>;
+              {consentGiven ? (
+                <Badge className="bg-green-100 text-green-800 hover:bg-green-200">
+                  Consented
+                </Badge>
+              ) : (
+                <Badge className="bg-red-100 text-red-800 hover:bg-red-200">
+                  Pending
+                </Badge>
+              )}
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>
+                {consentGiven
+                  ? "Participant has signed the consent form."
+                  : "Consent form has not been recorded."}
+              </p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      );
     },
   },
   {

src/components/studies/StudyForm.tsx

@@ -14,6 +14,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "~/components/ui/select";
+import { Separator } from "~/components/ui/separator";
 import { Textarea } from "~/components/ui/textarea";
 import {
   EntityForm,
@@ -165,10 +166,12 @@ export function StudyForm({ mode, studyId }: StudyFormProps) {
 
   // Form fields
   const formFields = (
+    <div className="space-y-6">
       <FormSection
         title="Study Details"
-      description="Basic information about your research study."
+        description="Basic information and status of your research study."
       >
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
           <FormField>
             <Label htmlFor="tour-study-name">Study Name *</Label>
             <Input
@@ -184,6 +187,36 @@ export function StudyForm({ mode, studyId }: StudyFormProps) {
             )}
           </FormField>
 
+          <FormField>
+            <Label htmlFor="status">Status</Label>
+            <Select
+              value={form.watch("status")}
+              onValueChange={(value) =>
+                form.setValue(
+                  "status",
+                  value as "draft" | "active" | "completed" | "archived",
+                )
+              }
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="Select status" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="draft">Draft - Study in preparation</SelectItem>
+                <SelectItem value="active">
+                  Active - Currently recruiting/running
+                </SelectItem>
+                <SelectItem value="completed">
+                  Completed - Data collection finished
+                </SelectItem>
+                <SelectItem value="archived">
+                  Archived - Study concluded
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </FormField>
+
+          <div className="md:col-span-2">
             <FormField>
               <Label htmlFor="tour-study-description">Description *</Label>
               <Textarea
@@ -191,7 +224,9 @@ export function StudyForm({ mode, studyId }: StudyFormProps) {
                 {...form.register("description")}
                 placeholder="Describe the research objectives, methodology, and expected outcomes..."
                 rows={4}
-          className={form.formState.errors.description ? "border-red-500" : ""}
+                className={
+                  form.formState.errors.description ? "border-red-500" : ""
+                }
               />
               {form.formState.errors.description && (
                 <p className="text-sm text-red-600">
@@ -199,14 +234,26 @@ export function StudyForm({ mode, studyId }: StudyFormProps) {
                 </p>
               )}
             </FormField>
+          </div>
+        </div>
+      </FormSection>
 
+      <Separator />
+
+      <FormSection
+        title="Configuration"
+        description="Institutional details and ethics approval."
+      >
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
           <FormField>
             <Label htmlFor="institution">Institution *</Label>
             <Input
               id="institution"
               {...form.register("institution")}
               placeholder="e.g., University of Technology"
-          className={form.formState.errors.institution ? "border-red-500" : ""}
+              className={
+                form.formState.errors.institution ? "border-red-500" : ""
+              }
             />
             {form.formState.errors.institution && (
               <p className="text-sm text-red-600">
@@ -234,34 +281,9 @@ export function StudyForm({ mode, studyId }: StudyFormProps) {
               Optional: Institutional Review Board protocol number if applicable
             </p>
           </FormField>
-
+        </div>
-      <FormField>
-        <Label htmlFor="status">Status</Label>
-        <Select
-          value={form.watch("status")}
-          onValueChange={(value) =>
-            form.setValue(
-              "status",
-              value as "draft" | "active" | "completed" | "archived",
-            )
-          }
-        >
-          <SelectTrigger>
-            <SelectValue placeholder="Select status" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="draft">Draft - Study in preparation</SelectItem>
-            <SelectItem value="active">
-              Active - Currently recruiting/running
-            </SelectItem>
-            <SelectItem value="completed">
-              Completed - Data collection finished
-            </SelectItem>
-            <SelectItem value="archived">Archived - Study concluded</SelectItem>
-          </SelectContent>
-        </Select>
-      </FormField>
       </FormSection>
+    </div>
   );
 
   // Sidebar content
@@ -324,7 +346,7 @@ export function StudyForm({ mode, studyId }: StudyFormProps) {
       error={error}
       onDelete={mode === "edit" ? onDelete : undefined}
       isDeleting={isDeleting}
-      sidebar={sidebar}
+      sidebar={mode === "create" ? sidebar : undefined}
       submitButtonId="tour-study-submit"
       extraActions={
         <Button variant="ghost" size="sm" onClick={() => startTour("study_creation")}>

src/components/ui/entity-form.tsx

@@ -127,12 +127,14 @@ export function EntityForm<T extends FieldValues = FieldValues>({
       <div
         className={cn(
           "grid gap-8 w-full",
-          layout === "default" && "grid-cols-1 lg:grid-cols-3", // Keep the column split but remove max-width
+          // If sidebar exists, use 2-column layout. If not, use full width (max-w-7xl centered).
-          layout === "full-width" && "grid-cols-1",
+          sidebar && layout === "default"
+            ? "grid-cols-1 lg:grid-cols-3"
+            : "grid-cols-1 max-w-7xl mx-auto",
         )}
       >
         {/* Main Form */}
-        <div className={layout === "default" ? "lg:col-span-2" : "col-span-1"}>
+        <div className={sidebar && layout === "default" ? "lg:col-span-2" : "col-span-1"}>
           <Card>
             <CardHeader>
               <CardTitle>