From 1bc449687d7269d7f6fdcba268e6138bb88484a2 Mon Sep 17 00:00:00 2001
From: elpatron <m.busche@gmail.com>
Date: Wed, 3 Jun 2026 17:31:33 +0200
Subject: [PATCH] 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                         | 37 +++++++++++++++++++---
 client/src/components/EventRemarksCell.tsx |  2 +-
 client/src/components/VoiceMemoPlayer.tsx  | 13 ++++----
 3 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/client/src/App.css b/client/src/App.css
index 58a3013..c694e94 100644
--- a/client/src/App.css
+++ b/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;
-  height: 32px;
+  max-width: 300px;
+  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;
diff --git a/client/src/components/EventRemarksCell.tsx b/client/src/components/EventRemarksCell.tsx
index 95aa9ab..211c83e 100644
--- a/client/src/components/EventRemarksCell.tsx
+++ b/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
diff --git a/client/src/components/VoiceMemoPlayer.tsx b/client/src/components/VoiceMemoPlayer.tsx
index f0a9313..7bb1a11 100644
--- a/client/src/components/VoiceMemoPlayer.tsx
+++ b/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
-      className={compact ? 'voice-memo-player voice-memo-player--compact' : 'voice-memo-player'}
-      controls
-      preload="none"
-      src={src}
-    />
+    <div className="voice-memo-player-shell">
+      <audio className={playerClass} controls preload="none" src={src} />
+    </div>
   )
 }