From fe88af61838850bcb5ec3a031edd37f13afc95ed Mon Sep 17 00:00:00 2001
From: Julian Freeman <freemanjulian372@gmail.com>
Date: Wed, 11 Mar 2026 12:45:51 -0400
Subject: [PATCH] fix ui

---
 sidepanel.js | 20 +++++++++++++-------
 style.css    |  6 +++++-
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/sidepanel.js b/sidepanel.js
index 2f0f794..462db78 100644
--- a/sidepanel.js
+++ b/sidepanel.js
@@ -96,17 +96,23 @@ function renderPresets(presets) {
   presets.forEach(preset => {
     // 1. Render in Settings List
     const item = document.createElement('div');
-    item.className = 'flex items-center justify-between bg-gray-50 p-2.5 rounded border border-gray-200 text-xs shadow-sm';
+    item.className = 'flex items-center justify-between bg-white p-3 mb-2 rounded-lg border border-gray-200 shadow-sm transition-all hover:border-indigo-200';
     item.innerHTML = `
-      <div class="flex-1 overflow-hidden mr-2">
-        <div class="font-bold text-gray-700 truncate">${preset.name}</div>
-        <div class="text-gray-400 truncate mt-0.5">${preset.fields}</div>
+      <div class="flex-1 overflow-hidden mr-3">
+        <div class="text-xs font-bold text-gray-800 truncate">${preset.name}</div>
+        <div class="text-[11px] text-gray-400 truncate mt-1 leading-tight">${preset.fields}</div>
       </div>
-      <button class="text-gray-400 hover:text-red-500 transition-colors p-1" data-id="${preset.id}">
-        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+      <button class="flex items-center justify-center w-7 h-7 rounded-full text-gray-300 hover:text-red-500 hover:bg-red-50 transition-all focus:outline-none border-none bg-transparent cursor-pointer" title="删除预设">
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+          <line x1="18" y1="6" x2="6" y2="18"></line>
+          <line x1="6" y1="6" x2="18" y2="18"></line>
+        </svg>
       </button>
     `;
-    item.querySelector('button').onclick = () => deletePreset(preset.id);
+    item.querySelector('button').onclick = (e) => {
+      e.stopPropagation();
+      deletePreset(preset.id);
+    };
     presetList.appendChild(item);
 
     // 2. Render as Dropdown Option
diff --git a/style.css b/style.css
index 613afb2..d64f07a 100644
--- a/style.css
+++ b/style.css
@@ -7,8 +7,12 @@ body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helve
 .mx-auto { margin-left: auto; margin-right: auto; }
 .mb-2 { margin-bottom: 0.5rem; }
 .mb-4 { margin-bottom: 1rem; }
-.mb-6 { margin-bottom: 1.5rem; }
+.text-\[11px\] { font-size: 11px; }
+.text-gray-300 { color: #d1d5db; }
+.hover\:bg-red-50:hover { background-color: #fef2f2; }
+.mb-2 { margin-bottom: 0.5rem; }
 .mt-1 { margin-top: 0.25rem; }
+
 .p-2 { padding: 0.5rem; }
 .p-3 { padding: 0.75rem; }
 .p-4 { padding: 1rem; }