From 09ef629b8d3b2afbe0079f2438c487bc20e0ad38 Mon Sep 17 00:00:00 2001
From: Chaim <chaim@marcus-law.co.il>
Date: Mon, 30 Mar 2026 09:34:27 +0000
Subject: [PATCH] fix: customer form auth fields layout + sticky header opacity

- Auth fields: use grid-cols-2 with dir=ltr for proper username/password
  layout, better spacing and visual hierarchy with key icon
- Header: increase opacity to 0.95 with subtle shadow to prevent
  content showing through when scrolling

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 dashboard/src/App.jsx   | 27 ++++++++++++++++-----------
 dashboard/src/index.css |  9 +++++----
 2 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/dashboard/src/App.jsx b/dashboard/src/App.jsx
index 9ac6c9d..888d248 100644
--- a/dashboard/src/App.jsx
+++ b/dashboard/src/App.jsx
@@ -199,20 +199,25 @@ function CustomerForm({ onDone, onCancel, customer }) {
         className={inputClass} dir="ltr" />
       <input placeholder="EspoCRM URL" value={form.espocrm_url} onChange={e => setForm({ ...form, espocrm_url: e.target.value })}
         className={inputClass} dir="ltr" />
-      <div className="bg-slate-50 rounded-xl p-3 space-y-2">
-        <p className="text-xs font-bold text-slate-500 text-right">פרטי התחברות ל-EspoCRM</p>
-        <div className="flex gap-2">
-          <input placeholder="סיסמה" value={authPass}
-            onChange={e => updateAuthFromCredentials(authUser, e.target.value)}
-            className="flex-1 bg-white border border-slate-200 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500" dir="ltr" type="password" />
-          <input placeholder="שם משתמש" value={authUser}
+      <div className="bg-slate-100/60 rounded-xl p-4 space-y-3">
+        <div className="flex items-center gap-2 justify-end">
+          <p className="text-xs font-bold text-slate-500">פרטי התחברות ל-EspoCRM</p>
+          <Icon name="key" className="text-sm text-slate-400" />
+        </div>
+        <div className="grid grid-cols-2 gap-3" dir="ltr">
+          <input placeholder="Username" value={authUser}
             onChange={e => updateAuthFromCredentials(e.target.value, authPass)}
-            className="flex-1 bg-white border border-slate-200 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500" dir="ltr" />
+            className="bg-white border border-slate-200 rounded-xl px-4 py-2.5 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent" />
+          <input placeholder="Password" value={authPass} type="password"
+            onChange={e => updateAuthFromCredentials(authUser, e.target.value)}
+            className="bg-white border border-slate-200 rounded-xl px-4 py-2.5 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent" />
         </div>
         {form.espocrm_api_key && (
-          <p className="text-[10px] text-slate-400 font-mono truncate" dir="ltr">
-            Espo-Authorization: {form.espocrm_api_key}
-          </p>
+          <div className="bg-white rounded-lg px-3 py-2 border border-slate-200/60">
+            <p className="text-[10px] text-slate-400 font-mono truncate" dir="ltr">
+              Espo-Authorization: {form.espocrm_api_key}
+            </p>
+          </div>
         )}
         {isEdit && !form.espocrm_api_key && (
           <p className="text-[10px] text-slate-400 text-right">השאר ריק כדי לא לשנות</p>
diff --git a/dashboard/src/index.css b/dashboard/src/index.css
index 72b540d..8bb8eb5 100644
--- a/dashboard/src/index.css
+++ b/dashboard/src/index.css
@@ -11,10 +11,11 @@ body {
 }
 
 .glass-header {
-  background: rgba(255, 255, 255, 0.8);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  border-bottom: 1px solid #f1f1f1;
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border-bottom: 1px solid #e5e7eb;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
 }
 
 .deep-action-gradient {