From 423e52d7480a12a74c362b0483b17f2acffba892 Mon Sep 17 00:00:00 2001
From: Paul Gauthier <aider@paulg.org>
Date: Thu, 10 Aug 2023 18:36:29 -0300
Subject: [PATCH] aider: Moved the triangle to the top of the speech bubble and
 changed it to an upwards pointing triangle.

# Aider chat conversation:

USER: the div renders as a "speech bubble" with a little downward pointing triangle as the "tail" of the speech bubble. Move that to the top of the speech bubble, so it's an upwards pointing triangle.

ASSISTANT: To move the triangle to the top of the speech bubble, we need to modify the CSS in the `docs/voice.md` file.

Here are the steps:

1. Change the `top: 100%;` to `top: 0;` to move the triangle to the top.
2. Change `border-top: 10px solid #f0f0f0;` to `border-bottom: 10px solid #f0f0f0;` to flip the triangle.

Here is the *edit block* for these changes:

<source>markdown
docs/voice.md
<<<<<<< HEAD
<span style="position: absolute; top: 100%; left: 50%; transform: translate(-50%, 0); width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #f0f0f0;"></span>
=======
<span style="position: absolute; top: 0; left: 50%; transform: translate(-50%, -100%); width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #f0f0f0;"></span>
>>>>>>> updated
</source>
---
 docs/voice.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/voice.md b/docs/voice.md
index ccd1da2e6..36fe9aa7e 100644
--- a/docs/voice.md
+++ b/docs/voice.md
@@ -9,7 +9,7 @@
 #### /voice  
 
 <div style="display: inline-block; position: relative; width: 200px; background-color: #f0f0f0; border-radius: 10px; padding: 10px; color: #333; font-family: 'Comic Sans MS', cursive, sans-serif;">
-<span style="position: absolute; top: 100%; left: 50%; transform: translate(-50%, 0); width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #f0f0f0;"></span>
+<span style="position: absolute; top: 0; left: 50%; transform: translate(-50%, -100%); width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #f0f0f0;"></span>
 “add a factorial endpoit that uses math factorial”
 </div>