feat: separate chronological events list and add event form into separate cards

client/src/components/LogEntryEditor.tsx

@@ -2118,11 +2118,13 @@ export default function LogEntryEditor({
             )
           )}
 
-          {/* Add New Event Form Sub-Card */}
+        </div>
+
+        {/* Section 4: Add New Event Form Card */}
         {!readOnly && (
-            <div className="member-editor-card glass">
+          <div className="form-card">
             <div
-                className="accordion-header"
+              className="form-header accordion-header"
               onClick={() => setAddEventFormCollapsed(!addEventFormCollapsed)}
               onKeyDown={(e) => {
                 if (e.key === 'Enter' || e.key === ' ') {
@@ -2133,26 +2135,22 @@ export default function LogEntryEditor({
               role="button"
               aria-expanded={!addEventFormCollapsed}
               tabIndex={0}
-                style={{
-                  margin: '0 0 16px 0',
-                  padding: '8px 12px',
-                  borderRadius: '6px',
-                  background: 'rgba(255, 255, 255, 0.01)',
-                  border: '1px solid rgba(255, 255, 255, 0.03)'
-                }}
             >
-                <h4 style={{ margin: 0, color: '#fbbf24' }}>
+              <div className="accordion-header-title">
+                <Plus size={20} className="form-icon" style={{ color: '#fbbf24' }} />
+                <h3 style={{ margin: 0, color: '#fbbf24' }}>
                   {editingEventIndex !== null ? t('logs.edit_event') : t('logs.add_event')}
-                </h4>
+                </h3>
+              </div>
               {addEventFormCollapsed ? (
-                  <ChevronDown size={18} style={{ color: '#fbbf24' }} className="accordion-chevron" />
+                <ChevronDown size={20} style={{ color: '#fbbf24' }} className="accordion-chevron" />
               ) : (
-                  <ChevronUp size={18} style={{ color: '#fbbf24' }} className="accordion-chevron" />
+                <ChevronUp size={20} style={{ color: '#fbbf24' }} className="accordion-chevron" />
               )}
             </div>
 
             {!addEventFormCollapsed && (
-              <>
+              <div style={{ marginTop: '20px' }}>
                 <div className="form-grid mb-4">
                   <div className="input-group">
                     <label>
@@ -2498,11 +2496,10 @@ export default function LogEntryEditor({
                     {editingEventIndex !== null ? t('logs.save_event_btn') : t('logs.add_event_btn')}
                   </button>
                 </div>
-          </>
-          )}
               </div>
             )}
           </div>
+        )}
 
         {/* Track file upload */}
         <div className="form-card" data-tour="entry-track">