From 796dc89e64980aa29b4803af035bfe9394daf096 Mon Sep 17 00:00:00 2001
From: Zita Szupera <szuperaz@gmail.com>
Date: Mon, 25 Mar 2024 09:05:37 +0100
Subject: [PATCH] fix: make wavebar data responsive (#279)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### 🎯 Goal

The wavebar container for voice recording had a fixed width of `120px`
but it's very easy to create a layout (using our CSS variables) where it
caused an overflow. This PR sets a responsive width for the wavebar.

### 🛠 Implementation details

- The wavebar container doesn't have a fix size anymore
- The wavebars still have a fixed width
- The React SDK uses a fixed a sample size (40) so it will always create
a wavebar that's 120px wide (no UI change there)
- The Angular SDK uses the
`--str-chat__voice-recording-amplitude-bar-width` and
`--str-chat__voice-recording-amplitude-bar-gap-width` variables to
compute the sample size that fits the wavebar container

My first implementation was to set `width: auto` to the individual
wavebars and then there is no need to compute anything in the SDK, but
the problem is that this can lead to non-integer pixel values, which can
look wonky when rendered (some bars looked thinner than the others even
though they had the same width)

### 🎨 UI Changes

Before:
![Screenshot 2024-03-21 at 14 25
52](https://github.com/GetStream/stream-chat-css/assets/6690098/50fea38e-508b-4ca2-873c-e80d7a54c355)

After:
![Screenshot 2024-03-21 at 14 26
32](https://github.com/GetStream/stream-chat-css/assets/6690098/7de90062-57b8-4756-be2c-8cc42835887e)
---
 .../AttachmentList/AttachmentList-layout.scss | 21 ++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/v2/styles/AttachmentList/AttachmentList-layout.scss b/src/v2/styles/AttachmentList/AttachmentList-layout.scss
index 936df93..4fe2ea3 100644
--- a/src/v2/styles/AttachmentList/AttachmentList-layout.scss
+++ b/src/v2/styles/AttachmentList/AttachmentList-layout.scss
@@ -6,6 +6,12 @@
 
   /* The height of GIFs */
   --str-chat__gif-height: calc(var(--str-chat__spacing-px) * 200);
+
+  /* The width of the amplitude bar of the voice recording wave data */
+  --str-chat__voice-recording-amplitude-bar-width: 2px;
+
+  /* The gap between amplitudes of the wave data of a voice recording */
+  --str-chat__voice-recording-amplitude-bar-gap-width: var(--str-chat__spacing-px);
 }
 
 .str-chat__attachment-list {
@@ -346,7 +352,7 @@
     grid-template-columns: 36px auto 55px;
     align-items: center;
     justify-content: center;
-    gap: calc(var(--str-chat__spacing-px) * 14);
+    gap: calc(var(--str-chat__spacing-px) * 9);
     padding: var(--str-chat__spacing-2);
     margin: var(--str-chat__attachment-margin);
 
@@ -375,19 +381,24 @@
       width: calc(var(--str-chat__spacing-px) * 45);
     }
 
+    stream-voice-recording-wavebar {
+      flex: 1;
+    }
+
     .str-chat__wave-progress-bar__track {
       $min_amplitude_height: 2px;
       position: relative;
       flex: 1;
-      width: 120px;
+      width: 100%;
       height: calc(var(--str-chat__spacing-px) * 25);
       display: flex;
       align-items: center;
-      gap: var(--str-chat__spacing-px);
+      justify-content: space-between;
+      gap: var(--str-chat__voice-recording-amplitude-bar-gap-width);
 
       .str-chat__wave-progress-bar__amplitude-bar {
-        width: 2px;
-        min-width: 2px;
+        width: var(--str-chat__voice-recording-amplitude-bar-width);
+        min-width: var(--str-chat__voice-recording-amplitude-bar-width);
         height: calc(
           var(--str-chat__wave-progress-bar__amplitude-bar-height) + #{$min_amplitude_height}
         ); // variable set dynamically on element