From 70617e7b6c865cc8e606b15888a3df6478ade067 Mon Sep 17 00:00:00 2001
From: Paul Gauthier <aider@paulg.org>
Date: Thu, 10 Aug 2023 22:32:23 -0300
Subject: [PATCH] aider: The progress bar and the "Recording, ..." text are now
 displayed on the same line.

# Aider chat conversation:

USER: i want the bar to stay on the same line as the "Recording, ..." text

ASSISTANT: To keep the progress bar on the same line as the "Recording, ..." text, we need to modify the `docs/voice.md` file. We will use CSS to make the progress bar and the text appear on the same line.

Here are the steps:

1. Wrap the "Recording, ..." text and the progress bar in a `div` element with a class of `recording-line`.
2. Add CSS to make the elements within `recording-line` display inline.

Here is the *edit block* for these changes:

<source>markdown
docs/voice.md
<<<<<<< HEAD
<blockquote>
<p>Recording, press ENTER when done... 3.5sec
<div id="progress-bar">
    <div id="progress"></div>
</div>
</p>
</blockquote>

<style>
    #progress-bar {
        width: 100px;
        height: 20px;
        background-color: #f0f0f0;
        border-radius: 10px;
    }
    #progress {
        height: 100%;
        background-color: #333;
        animation: progress 1s infinite;
    }
    @keyframes progress {
        0% { width: 10%; }
        50% { width: 90%; }
        100% { width: 10%; }
    }
</style>
=======
<blockquote>
<div class="recording-line">
    <p style="display: inline;">Recording, press ENTER when done... 3.5sec</p>
    <div id="progress-bar">
        <div id="progress"></div>
    </div>
</div>
</blockquote>

<style>
    .recording-line > * {
        display: inline-block;
        vertical-align: middle;
    }
    #progress-bar {
        width: 100px;
        height: 20px;
        background-color: #f0f0f0;
        border-radius: 10px;
        margin-left: 10px;
    }
    #progress {
        height: 100%;
        background-color: #333;
        animation: progress 1s infinite;
    }
    @keyframes progress {
        0% { width: 10%; }
        50% { width: 90%; }
        100% { width: 10%; }
    }
</style>
>>>>>>> updated
</source>

This will make the progress bar and the "Recording, ..." text appear on the same line. The `display: inline-block;` property in the CSS code makes the elements within `recording-line` display inline. The `vertical-align: middle;` property aligns the elements vertically in the middle. The `margin-left: 10px;` property adds a 10px space to the left of the progress bar for better visual separation.
---
 docs/voice.md | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/docs/voice.md b/docs/voice.md
index e4dae3972..238ff0d4e 100644
--- a/docs/voice.md
+++ b/docs/voice.md
@@ -20,19 +20,25 @@ the aider chat session.
 #### /voice  
 
 <blockquote>
-<p>Recording, press ENTER when done... 3.5sec 
-<div id="progress-bar">
-    <div id="progress"></div>
+<div class="recording-line">
+    <p style="display: inline;">Recording, press ENTER when done... 3.5sec</p>
+    <div id="progress-bar">
+        <div id="progress"></div>
+    </div>
 </div>
-</p>
 </blockquote>
 
 <style>
+    .recording-line > * {
+        display: inline-block;
+        vertical-align: middle;
+    }
     #progress-bar {
         width: 100px;
         height: 20px;
         background-color: #f0f0f0;
         border-radius: 10px;
+        margin-left: 10px;
     }
     #progress {
         height: 100%;