fix(phase4.3): adjust modal centering and color swatch sizes

- Reduce modal width from 920px to 736px (80% of original)
- Center modal with 140px left offset (half sidebar width)
- Reduce color swatches from 40px to 30px
- Reduce color-grid gap from 8px to 4px
- Fix icon-preset button justify-content typo
- Swatches now properly fill single row

cp

src/lib/components/FavoritesEditModal.svelte

@@ -127,7 +127,7 @@
   }
 </script>
 
-<Modal {isOpen} onClose={handleCancel} title="Favorites Settings" maxWidth="920px">
+<Modal {isOpen} onClose={handleCancel} title="Favorites Settings" maxWidth="736px">
   {#snippet children()}
   <div class="modal-columns">
     <!-- Left Column: Icon Customization -->
@@ -315,7 +315,7 @@
     aspect-ratio: 1;
     display: flex;
     align-items: center;
-    justify-center: center;
+    justify-content: center;
     background: var(--bg-secondary);
     border: 2px solid transparent;
     border-radius: 8px;
@@ -339,23 +339,23 @@
   .color-grid {
     display: grid;
     grid-template-columns: repeat(8, 1fr);
-    gap: 8px;
+    gap: 4px;
   }
 
   .color-btn {
     aspect-ratio: 1;
-    max-width: 40px;
-    max-height: 40px;
+    width: 30px;
+    height: 30px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: transparent;
     font-size: 0;
     border: 2px solid transparent;
-    border-radius: 8px;
+    border-radius: 6px;
     cursor: pointer;
     transition: all 150ms ease;
-    padding: 4px;
+    padding: 3px;
   }
 
   .color-btn:hover {

src/lib/components/Modal.svelte

@@ -77,6 +77,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    padding-left: 140px; /* Half of sidebar width (280px) for visual center */
     z-index: 1000;
     animation: fade-in 150ms ease;
   }