From a168fe2b7cc2c4c682732da54b53c3821a1cf047 Mon Sep 17 00:00:00 2001
From: aewing <aewing@cardoza.construction>
Date: Sat, 10 Jan 2026 22:13:08 +0000
Subject: [PATCH] UI refinements: center containers, compact cards, improve
 attachment icons

---
 index.html | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)
diff --git a/index.html b/index.html
index 0e08e59..084f4e1 100644
--- a/index.html
+++ b/index.html
@@ -18,7 +18,7 @@
     }
   </script>
 </head>
-<body class="bg-gradient-to-br from-primary to-secondary p-4 sm:p-8 flex flex-col font-sans relative h-screen overflow-hidden">
+<body class="bg-gradient-to-br from-primary to-secondary p-4 sm:p-8 flex flex-col items-center justify-center font-sans relative h-screen overflow-hidden">
   <!-- Top-right display name -->
   <div id="userDisplay" class="hidden fixed right-2 text-white text-xs font-semibold drop-shadow z-50 top-1">
     <span id="userDisplayName"></span>
@@ -87,7 +87,7 @@
     <div class="flex-1 overflow-y-auto">
       <div id="notesListStatus" class="text-sm text-gray-600"></div>
       <div id="notesEmpty" class="hidden text-sm text-gray-500">No notes yet. Click New Note to create one.</div>
-      <div id="notesGrid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 w-full"></div>
+      <div id="notesGrid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2 w-full"></div>
     </div>
   </div>
 
@@ -119,7 +119,7 @@
   </div>
 
   <!-- Note + Audio Container -->
-  <div id="noteContainer" class="hidden self-start bg-white rounded-2xl shadow-2xl max-w-xl w-full p-8 space-y-6">
+  <div id="noteContainer" class="hidden self-center bg-white rounded-2xl shadow-2xl max-w-xl w-full p-8 space-y-6">
     <div class="flex items-center justify-between gap-3">
       <div class="flex items-center gap-2">
         <button id="backToListBtn" class="px-3 py-2 rounded border border-gray-200 text-gray-700 hover:bg-gray-100">Back to Notes</button>
@@ -242,12 +242,12 @@
     <div class="flex-1 overflow-y-auto">
       <div id="conversationsListStatus" class="text-sm text-gray-600"></div>
       <div id="conversationsEmpty" class="hidden text-sm text-gray-500">No conversations yet. Click New Conversation to start one.</div>
-      <div id="conversationsGrid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 w-full"></div>
+      <div id="conversationsGrid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2 w-full"></div>
     </div>
   </div>
 
   <!-- Conversation Form Container -->
-  <div id="conversationContainer" class="hidden self-start bg-white rounded-2xl shadow-2xl max-w-xl w-full p-8 space-y-6">
+  <div id="conversationContainer" class="hidden self-center bg-white rounded-2xl shadow-2xl max-w-xl w-full p-8 space-y-6">
     <div class="flex items-center justify-between gap-3">
       <div class="flex items-center gap-2">
         <button id="backToConversationsListBtn" class="px-3 py-2 rounded border border-gray-200 text-gray-700 hover:bg-gray-100">Back to Conversations</button>
@@ -1318,7 +1318,7 @@
           manager: 'bg-orange-200 border border-orange-400 hover:border-orange-500',
           job: 'bg-pink-200 border border-pink-400 hover:border-pink-500',
         }[type] || 'bg-gray-100 border border-gray-300 hover:border-primary/60';
-        card.className = `text-left ${typeClasses} hover:shadow-md transition rounded-xl p-5 sm:p-6 space-y-3 h-full flex flex-col`;
+        card.className = `text-left ${typeClasses} hover:shadow-md transition rounded-xl px-2 py-0.5 space-y-0 h-full flex flex-col`;
         const title = note.title || 'Untitled';
         const plain = note[NOTE_BODY_PLAIN_FIELD] || (note[NOTE_BODY_HTML_FIELD] ? htmlToPlainText(note[NOTE_BODY_HTML_FIELD]) : '');
         const snippet = (plain || '').slice(0, 160) + ((plain && plain.length > 160) ? '…' : '');
@@ -1327,12 +1327,12 @@
         const typeSet = buildKindSetFromAttachments(atts);
         function iconBtnHtml(kind) {
           const map = {
-            image: '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor"><path d="M4.5 6A1.5 1.5 0 0 1 6 4.5h12A1.5 1.5 0 0 1 19.5 6v12a1.5 1.5 0 0 1-1.5 1.5H6A1.5 1.5 0 0 1 4.5 18V6Zm2 10l3.75-5 3 4 2.25-3 3 4.5H6.5Z"/></svg>',
-            video: '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor"><path d="M4 6.75A1.75 1.75 0 0 1 5.75 5h7.5A1.75 1.75 0 0 1 15 6.75v10.5A1.75 1.75 0 0 1 13.25 19h-7.5A1.75 1.75 0 0 1 4 17.25V6.75Zm12.5.5 3.75 2.25v5l-3.75 2.25V7.25Z"/></svg>',
-            audio: '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor"><path d="M9 5.25a.75.75 0 0 1 .75-.75h.5A3.75 3.75 0 0 1 14 8.25v6a3.75 3.75 0 0 1-3.75 3.75h-.5A.75.75 0 0 1 9 17.25V5.25Zm7.75 3a.75.75 0 0 1 1.25.57v5.36a.75.75 0 0 1-1.25.57l-2.5-1.79a.75.75 0 0 1 0-1.21l2.5-1.5Z"/></svg>',
-            file: '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor"><path d="M6.75 3A1.75 1.75 0 0 0 5 4.75v14.5A1.75 1.75 0 0 0 6.75 21h10.5A1.75 1.75 0 0 0 19 19.25V8.5l-5.5-5.5H6.75Z"/></svg>',
+            image: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>',
+            video: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>',
+            audio: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M15.54 3.89a9 9 0 0 1 0 12.22M18.5 8.5a5 5 0 0 1 0 7"/></svg>',
+            file: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><polyline points="13 2 13 9 20 9"/></svg>',
           };
-          return `<button type="button" class="px-1.5 py-1 rounded bg-white/70 hover:bg-white border border-gray-200 text-purple-700" data-attachment-button data-attachment-kind="${kind}">${map[kind] || ''}</button>`;
+          return `<button type="button" class="p-0.5 sm:p-1 rounded hover:bg-gray-200 text-gray-700 transition flex-shrink-0" data-attachment-button data-attachment-kind="${kind}" title="${kind}" style="width:24px;height:24px;min-width:24px;display:flex;align-items:center;justify-content:center;">${map[kind] || ''}</button>`;
         }
         const attachmentIcons = ['image', 'video', 'file', 'audio']
           .filter((k) => typeSet.has(k))
