style: add spacing around voice memo player controls

Widen native audio controls and separate remarks column from event actions.

Co-authored-by: Cursor <cursoragent@cursor.com>

client/src/App.css

@@ -3667,10 +3667,14 @@ html.theme-cupertino .events-scroll-container {
 .live-log-summary-block {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 8px;
   min-width: 0;
 }
 
+.live-log-summary-block .voice-memo-player-shell {
+  margin-top: 2px;
+}
+
 .live-voice-modal .live-voice-modal-header {
   display: flex;
   align-items: center;
@@ -3719,14 +3723,27 @@ html.theme-cupertino .events-scroll-container {
   font-size: 13px;
 }
 
+.voice-memo-player-shell {
+  display: block;
+  max-width: 100%;
+  padding: 2px 4px 2px 0;
+  box-sizing: border-box;
+}
+
 .voice-memo-player {
+  display: block;
   width: 100%;
-  max-width: 280px;
+  max-width: 300px;
-  height: 32px;
+  min-width: 260px;
+  height: 36px;
+  box-sizing: content-box;
+  padding-inline: 2px 12px;
 }
 
 .voice-memo-player--compact {
-  max-width: 220px;
+  max-width: 280px;
+  min-width: 240px;
+  padding-inline-end: 14px;
 }
 
 .voice-memo-player-unavailable {
@@ -3742,6 +3759,18 @@ html.theme-cupertino .events-scroll-container {
   align-items: flex-start;
 }
 
+.event-remarks-cell--voice {
+  gap: 8px;
+}
+
+.events-table .remarks-td {
+  padding-right: 20px;
+}
+
+.events-table .remarks-td + .events-actions-td {
+  padding-left: 12px;
+}
+
 @media (max-width: 720px) {
   .live-log-layout {
     grid-template-columns: 1fr;

client/src/components/EventRemarksCell.tsx

@@ -25,7 +25,7 @@ export default function EventRemarksCell({
   }
 
   return (
-    <div className="event-remarks-cell">
+    <div className={`event-remarks-cell${voiceId ? ' event-remarks-cell--voice' : ''}`}>
       <span>{summary}</span>
       {voiceId && (
         <VoiceMemoPlayer

client/src/components/VoiceMemoPlayer.tsx

@@ -69,12 +69,13 @@ export default function VoiceMemoPlayer({
     )
   }
 
+  const playerClass = compact
+    ? 'voice-memo-player voice-memo-player--compact'
+    : 'voice-memo-player'
+
   return (
-    <audio
+    <div className="voice-memo-player-shell">
-      className={compact ? 'voice-memo-player voice-memo-player--compact' : 'voice-memo-player'}
+      <audio className={playerClass} controls preload="none" src={src} />
-      controls
+    </div>
-      preload="none"
-      src={src}
-    />
   )
 }