Simplify picker layout and styling

templates/status.html

···
                     </div>
                     <button type="button" class="emoji-picker-close" id="emoji-picker-close" aria-label="close emoji picker">✕</button>
                 </div>
-                <div class="emoji-picker-preview">
-                    <div class="emoji-preview-block">
-                        <span class="emoji-preview-label">current</span>
-                        <div class="emoji-preview-emoji" id="emoji-preview-current">
-                            {% if let Some(current) = current_status.as_ref() %}
-                                {% if current.status.starts_with("custom:") %}
-                                    {% let emoji_name = current.status.strip_prefix("custom:").unwrap() %}
-                                    <img src="/emojis/{{emoji_name}}.png" alt="{{emoji_name}}" title="{{emoji_name}}"
-                                         onerror="this.onerror=null; this.src='/emojis/{{emoji_name}}.gif';">
-                                {% else %}
-                                    <span title="{{ current.status }}">{{ current.status }}</span>
-                                {% endif %}
-                            {% else %}
-                                <span title="happy">😊</span>
-                            {% endif %}
-                        </div>
-                    </div>
-                    <div class="emoji-preview-block">
-                        <span class="emoji-preview-label">next</span>
-                        <div class="emoji-preview-emoji" id="emoji-preview-next">
-                            {% if let Some(current) = current_status.as_ref() %}
-                                {% if current.status.starts_with("custom:") %}
-                                    {% let emoji_name = current.status.strip_prefix("custom:").unwrap() %}
-                                    <img src="/emojis/{{emoji_name}}.png" alt="{{emoji_name}}" title="{{emoji_name}}"
-                                         onerror="this.onerror=null; this.src='/emojis/{{emoji_name}}.gif';">
-                                {% else %}
-                                    <span title="{{ current.status }}">{{ current.status }}</span>
-                                {% endif %}
-                            {% else %}
-                                <span title="happy">😊</span>
-                            {% endif %}
-                        </div>
-                    </div>
-                </div>
                 <div class="emoji-search-container">
                     <input type="text" 
                            id="emoji-search" 
···
 }
 
 .emoji-picker {
-    width: min(720px, 100%);
-    max-height: min(90vh, 720px);
+    width: min(960px, 94vw);
+    height: min(90vh, 820px);
     background: var(--bg-secondary);
     border: 1px solid var(--border-color);
     border-radius: clamp(var(--radius), 2vw, 24px);
     box-shadow: 0 32px 80px rgba(0, 0, 0, 0.45);
     display: flex;
     flex-direction: column;
-    gap: 1rem;
-    padding: clamp(1.25rem, 5vw, 2rem);
+    gap: 1.25rem;
+    padding: clamp(1.25rem, 5vw, 2.5rem);
     overflow: hidden;
 }
+
 
 .emoji-picker-header {
     display: flex;
···
     outline: none;
 }
 
-.emoji-picker-preview {
-    display: flex;
-    gap: 1rem;
-    background: var(--bg-primary);
-    border-radius: var(--radius);
-    border: 1px solid var(--border-color);
-    padding: 1rem;
-}
-
-.emoji-preview-block {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 0.5rem;
-}
-
-.emoji-preview-label {
-    font-size: 0.75rem;
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
-    color: var(--text-tertiary);
-}
-
-.emoji-preview-emoji {
-    width: clamp(3.25rem, 16vw, 4.5rem);
-    height: clamp(3.25rem, 16vw, 4.5rem);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: clamp(2rem, 10vw, 3rem);
-    border-radius: var(--radius);
-    background: var(--bg-secondary);
-    border: 1px solid rgba(255, 255, 255, 0.05);
-    overflow: hidden;
-}
-
-.emoji-preview-emoji img {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-}
-
-.emoji-preview-emoji span {
-    display: block;
-}
-
 .emoji-search-container {
     margin: 0;
 }
···
 
 .emoji-categories {
     display: flex;
-    gap: 0.5rem;
+    gap: 0.75rem;
     overflow-x: auto;
     padding-bottom: 0.5rem;
     border-bottom: 1px solid rgba(255, 255, 255, 0.06);
···
 .emoji-grid {
     flex: 1;
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
-    gap: 0.5rem;
+    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
+    gap: 0.75rem;
     padding-right: 0.25rem;
     overflow-y: auto;
 }
 
 .emoji-option {
-    background: var(--bg-primary);
-    border: 1px solid transparent;
-    font-size: 2rem;
+    background: transparent;
+    border: none;
+    font-size: 2.4rem;
     cursor: pointer;
-    border-radius: 16px;
-    transition: transform 0.15s ease, border-color 0.2s ease, background 0.2s ease;
+    transition: transform 0.15s ease;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     aspect-ratio: 1;
-    position: relative;
+}
+
+.emoji-option:hover {
+    transform: translateY(-3px) scale(1.05);
 }
 
-.emoji-option:hover,
 .emoji-option:focus-visible {
-    background: var(--bg-tertiary);
-    border-color: var(--accent);
-    transform: translateY(-2px);
-    outline: none;
+    outline: 2px solid var(--accent);
+    outline-offset: 6px;
+    border-radius: 16px;
 }
 
 .emoji-option.custom-emoji img {
-    width: 70%;
-    height: 70%;
+    width: 75%;
+    height: 75%;
     object-fit: contain;
 }
 
-.emoji-option.custom-emoji::after {
-    content: '';
-    position: absolute;
-    inset: 8%;
-    border-radius: 12px;
-    pointer-events: none;
-}
-
 @media (max-width: 640px) {
     .emoji-picker-overlay {
         padding: 0;
···
         height: 100%;
         max-height: none;
         border-radius: 0;
-        padding: 1.25rem 1rem 1rem;
-        gap: 0.75rem;
-    }
-
-    .emoji-picker-preview {
-        padding: 0.75rem;
+        padding: 1.5rem 1rem;
+        gap: 1rem;
     }
 
     .emoji-grid {
-        grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
+        grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
+        gap: 0.5rem;
     }
 }
 
···
     const emojiGrid = document.getElementById('emoji-grid');
     const selectedEmoji = document.getElementById('selected-emoji');
     const statusInput = document.getElementById('status-input');
-    const emojiPreviewCurrent = document.getElementById('emoji-preview-current');
-    const emojiPreviewNext = document.getElementById('emoji-preview-next');
     let lastFocusBeforeEmojiPicker = null;
     
     // Clear time picker
···
     const expiresSelect = document.getElementById('expires_in');
     
     const isEmojiPickerOpen = () => emojiPickerOverlay && !emojiPickerOverlay.classList.contains('hidden');
-
-    const syncPreviewWithSelection = () => {
-        if (emojiPreviewNext && selectedEmoji) {
-            emojiPreviewNext.innerHTML = selectedEmoji.innerHTML;
-        }
-    };
-
-    syncPreviewWithSelection();
 
     const openEmojiPicker = () => {
         if (!emojiPickerOverlay || !emojiPicker) return;
···
                 if (emojiSearch) emojiSearch.focus();
             }, 60);
         }
-
-        if (emojiPreviewCurrent) {
-            const currentDisplay = document.querySelector('.current-status .status-emoji');
-            if (currentDisplay) {
-                emojiPreviewCurrent.innerHTML = currentDisplay.innerHTML;
-            } else if (selectedEmoji) {
-                emojiPreviewCurrent.innerHTML = selectedEmoji.innerHTML;
-            }
-        }
-
-        syncPreviewWithSelection();
 
         loadCustomEmojis().then(() => {
             loadEmojiCategory('frequent');
···
                     }
                     
                     statusInput.value = emoji;
-                    syncPreviewWithSelection();
                     closeEmojiPicker();
                     checkForChanges();
                 });
···
                     // Display the image in the selected emoji area
                     selectedEmoji.innerHTML = `<img src="${img.src}" alt="${img.alt}" style="width: 100%; height: 100%; object-fit: contain;">`;
                     statusInput.value = emojiValue;
-                    syncPreviewWithSelection();
                     closeEmojiPicker();
                     checkForChanges();
                 });
···
                     const emoji = e.target.getAttribute('data-emoji');
                     selectedEmoji.textContent = emoji;
                     statusInput.value = emoji;
-                    syncPreviewWithSelection();
                     closeEmojiPicker();
                     checkForChanges();
                 });
···
                 }
                 
                 statusInput.value = emojiValue;
-                syncPreviewWithSelection();
                 closeEmojiPicker();
                 checkForChanges();
                 // Clear search when emoji is selected