From 3f27e477dd37b68171073efa8bba9286b43c5d0c Mon Sep 17 00:00:00 2001
From: Till-JS <101404291+Till-JS@users.noreply.github.com>
Date: Sun, 14 Dec 2025 16:31:38 +0100
Subject: [PATCH] fix(contacts): improve new contact card and sticky section
 headers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove subtitle from new contact card for cleaner appearance
- Make new contact card full width to match list items
- Fix sticky section headers position (top: 8px instead of 80px)
- Update alphabet nav styling with glass blur effect
- Add container queries for responsive centering

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../views/ContactAlphabetView.svelte          | 49 +++++++++----------
 1 file changed, 22 insertions(+), 27 deletions(-)

diff --git a/apps/contacts/apps/web/src/lib/components/views/ContactAlphabetView.svelte b/apps/contacts/apps/web/src/lib/components/views/ContactAlphabetView.svelte
index 777a9898b..d3142c21a 100644
--- a/apps/contacts/apps/web/src/lib/components/views/ContactAlphabetView.svelte
+++ b/apps/contacts/apps/web/src/lib/components/views/ContactAlphabetView.svelte
@@ -116,7 +116,6 @@
 				<div class="contact-info">
 					<div class="contact-main-row">
 						<span class="contact-name">{$_('contacts.new')}</span>
-						<span class="contact-company-inline">{$_('contacts.addFirst')}</span>
 					</div>
 				</div>
 			</div>
@@ -298,7 +297,7 @@
 		padding: 0.375rem 0.875rem;
 		margin-bottom: 0.75rem;
 		position: sticky;
-		top: 80px;
+		top: 8px;
 		z-index: 10;
 		/* Glass pill effect */
 		background: hsl(var(--background) / 0.75);
@@ -309,12 +308,6 @@
 		box-shadow: 0 2px 8px hsl(var(--foreground) / 0.05);
 	}
 
-	@media (max-width: 768px) {
-		.section-header {
-			top: 90px;
-		}
-	}
-
 	.section-letter {
 		font-size: 1rem;
 		font-weight: 700;
@@ -493,6 +486,9 @@
 		align-items: stretch;
 		pointer-events: none;
 		transition: bottom 0.2s ease;
+		/* Container query context */
+		container-type: inline-size;
+		container-name: alphabetnav;
 	}
 
 	.alphabet-nav-container {
@@ -500,27 +496,31 @@
 		flex-direction: row;
 		align-items: center;
 		gap: 2px;
-		padding: 0.5rem 0;
+		padding: 0.5rem 1.5rem;
 		overflow-x: auto;
 		scrollbar-width: none;
 		-ms-overflow-style: none;
 		scroll-behavior: smooth;
-		/* Glass container like DateStrip */
-		background: var(--color-surface, hsl(var(--background)));
+		/* Glass container with blur effect */
+		background: hsl(var(--background) / 0.85);
+		backdrop-filter: blur(12px);
+		-webkit-backdrop-filter: blur(12px);
 		border-radius: 16px;
 		margin: 0 1rem;
-		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
-		border: 1px solid hsl(var(--border));
+		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+		border: 1px solid hsl(var(--border) / 0.6);
 		pointer-events: auto;
-		/* Fade effect at edges */
-		mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
-		-webkit-mask-image: linear-gradient(
-			to right,
-			transparent 0%,
-			black 5%,
-			black 95%,
-			transparent 100%
-		);
+		/* Default: left-aligned with fit-content */
+		width: fit-content;
+		max-width: calc(100% - 2rem);
+	}
+
+	/* Center when container has enough space */
+	@container alphabetnav (min-width: 600px) {
+		.alphabet-nav-container {
+			margin-left: auto;
+			margin-right: auto;
+		}
 	}
 
 	.alphabet-nav-container::-webkit-scrollbar {
@@ -575,7 +575,6 @@
 		border-style: dashed;
 		border-color: hsl(var(--primary) / 0.4);
 		background: hsl(var(--primary) / 0.05);
-		max-width: 280px;
 	}
 
 	.new-contact-card:hover {
@@ -600,8 +599,4 @@
 	.new-contact-card .contact-name {
 		font-size: 0.875rem;
 	}
-
-	.new-contact-card .contact-company-inline {
-		font-size: 0.75rem;
-	}
 </style>