From 1664d34b045ba4a855003e1c5e93df8efe4484ab Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sat, 18 Apr 2026 03:00:36 +0000
Subject: [PATCH] Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
---
 src/routes/contacts.index.tsx | 104 +++++++++++++++++-----------------
 1 file changed, 52 insertions(+), 52 deletions(-)

diff --git a/src/routes/contacts.index.tsx b/src/routes/contacts.index.tsx
index 67c830f..98ea3ca 100644
--- a/src/routes/contacts.index.tsx
+++ b/src/routes/contacts.index.tsx
@@ -213,63 +213,63 @@ function ContactsIndex() {
             <div className="divide-y">
               {grouped.map(([letter, items]) => (
                 <div key={letter}>
-                  <div className="px-4 py-1.5 bg-muted/50 text-xs font-semibold text-muted-foreground sticky top-0">
+                  <div className="px-4 py-1.5 bg-muted/50 text-xs font-semibold text-muted-foreground">
                     {letter}
                   </div>
                   <ul className="divide-y">
                     {items.map((c) => {
-                const typeLabel = CONTACT_TYPES.find((t) => t.value === c.contact_type)?.label ?? c.contact_type;
-                const canEdit = isAdmin || c.created_by === user?.id;
-                return (
-                  <li key={c.id} className="px-4 py-3 hover:bg-muted/40 transition-colors">
-                    <div className="flex items-center gap-3">
-                      <Link
-                        to="/contacts/$contactId"
-                        params={{ contactId: c.id }}
-                        className="flex-1 min-w-0 flex items-center gap-3"
-                      >
-                        <div className="min-w-0 flex-1">
-                          <div className="flex items-center gap-2 flex-wrap">
-                            <span className="font-medium truncate">{c.name}</span>
-                            <Badge variant="outline" className="text-[10px]">{typeLabel}</Badge>
-                            {c.title && <span className="text-xs text-muted-foreground">{c.title}</span>}
+                      const typeLabel = CONTACT_TYPES.find((t) => t.value === c.contact_type)?.label ?? c.contact_type;
+                      const canEdit = isAdmin || c.created_by === user?.id;
+                      return (
+                        <li key={c.id} className="px-4 py-3 hover:bg-muted/40 transition-colors">
+                          <div className="flex items-center gap-3">
+                            <Link
+                              to="/contacts/$contactId"
+                              params={{ contactId: c.id }}
+                              className="flex-1 min-w-0 flex items-center gap-3"
+                            >
+                              <div className="min-w-0 flex-1">
+                                <div className="flex items-center gap-2 flex-wrap">
+                                  <span className="font-medium truncate">{c.name}</span>
+                                  <Badge variant="outline" className="text-[10px]">{typeLabel}</Badge>
+                                  {c.title && <span className="text-xs text-muted-foreground">{c.title}</span>}
+                                </div>
+                                <div className="mt-1 flex flex-wrap gap-x-4 gap-y-0.5 text-xs text-muted-foreground">
+                                  {c.company && <span className="flex items-center gap-1.5"><Building2 className="h-3 w-3" />{c.company}</span>}
+                                  {c.email && <span className="flex items-center gap-1.5"><Mail className="h-3 w-3" />{c.email}</span>}
+                                  {c.phone && <span className="flex items-center gap-1.5"><Phone className="h-3 w-3" />{c.phone}</span>}
+                                </div>
+                              </div>
+                              <div className="hidden md:flex flex-col items-end text-[11px] text-muted-foreground gap-0.5 mr-2">
+                                {c.case_links > 0 && <span className="flex items-center gap-1"><Briefcase className="h-3 w-3" />{c.case_links} case{c.case_links === 1 ? "" : "s"}</span>}
+                                {c.client_links > 0 && <span className="flex items-center gap-1"><Users className="h-3 w-3" />{c.client_links} client{c.client_links === 1 ? "" : "s"}</span>}
+                              </div>
+                              <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                            </Link>
+                            <div className="flex gap-1">
+                              <Button
+                                variant="ghost"
+                                size="icon"
+                                title={c.archived_at ? "Restore" : "Archive"}
+                                onClick={() => onArchive(c.id, !c.archived_at)}
+                              >
+                                {c.archived_at ? <ArchiveRestore className="h-4 w-4" /> : <Archive className="h-4 w-4" />}
+                              </Button>
+                              {canEdit && (
+                                <>
+                                  <Button variant="ghost" size="icon" onClick={() => startEdit(c)}>
+                                    <Edit className="h-4 w-4" />
+                                  </Button>
+                                  <Button variant="ghost" size="icon" onClick={() => remove(c.id, c.name)}>
+                                    <Trash2 className="h-4 w-4 text-destructive" />
+                                  </Button>
+                                </>
+                              )}
+                            </div>
                           </div>
-                          <div className="mt-1 flex flex-wrap gap-x-4 gap-y-0.5 text-xs text-muted-foreground">
-                            {c.company && <span className="flex items-center gap-1.5"><Building2 className="h-3 w-3" />{c.company}</span>}
-                            {c.email && <span className="flex items-center gap-1.5"><Mail className="h-3 w-3" />{c.email}</span>}
-                            {c.phone && <span className="flex items-center gap-1.5"><Phone className="h-3 w-3" />{c.phone}</span>}
-                          </div>
-                        </div>
-                        <div className="hidden md:flex flex-col items-end text-[11px] text-muted-foreground gap-0.5 mr-2">
-                          {c.case_links > 0 && <span className="flex items-center gap-1"><Briefcase className="h-3 w-3" />{c.case_links} case{c.case_links === 1 ? "" : "s"}</span>}
-                          {c.client_links > 0 && <span className="flex items-center gap-1"><Users className="h-3 w-3" />{c.client_links} client{c.client_links === 1 ? "" : "s"}</span>}
-                        </div>
-                        <ChevronRight className="h-4 w-4 text-muted-foreground" />
-                      </Link>
-                      <div className="flex gap-1">
-                        <Button
-                          variant="ghost"
-                          size="icon"
-                          title={c.archived_at ? "Restore" : "Archive"}
-                          onClick={() => onArchive(c.id, !c.archived_at)}
-                        >
-                          {c.archived_at ? <ArchiveRestore className="h-4 w-4" /> : <Archive className="h-4 w-4" />}
-                        </Button>
-                        {canEdit && (
-                          <>
-                            <Button variant="ghost" size="icon" onClick={() => startEdit(c)}>
-                              <Edit className="h-4 w-4" />
-                            </Button>
-                            <Button variant="ghost" size="icon" onClick={() => remove(c.id, c.name)}>
-                              <Trash2 className="h-4 w-4 text-destructive" />
-                            </Button>
-                          </>
-                        )}
-                      </div>
-                    </div>
-                  </li>
-                );
-              })}
+                        </li>
+                      );
+                    })}
                   </ul>
                 </div>
               ))}