From 9dcf6eb08554554ee7229a7b60c62c70d955b4d7 Mon Sep 17 00:00:00 2001
From: Tore Bjolseth <tbjolset@cisco.com>
Date: Wed, 24 Apr 2024 12:46:04 +0200
Subject: [PATCH] restyle: right align edit buttons

---
 assets/style.css | 4 ++++
 index.html       | 4 ++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/assets/style.css b/assets/style.css
index c483a8c..f5157a7 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -98,6 +98,10 @@ input:focus, textarea:focus, select:focus, button:focus {
   width: 30em;
 }
 
+.grow {
+  flex-grow: 1;
+}
+
 .tip {
   color: #ccc;
   font-size: 0.9em;
diff --git a/index.html b/index.html
index 81f1f53..2ce5bb1 100644
--- a/index.html
+++ b/index.html
@@ -65,7 +65,7 @@
     ></textarea>
     <div x-show="sender" class="row field">
       <span class="avatar" x-show="sender" :style="{ 'background-image': `url(${sender?.avatar})`}"></span>
-      <div x-text="sender?.displayName"></div>
+      <div x-text="sender?.displayName" class="grow"></div>
       <button @click="sender = null">Edit</button>
     </div>
 
@@ -85,7 +85,7 @@
         x-show="receiver?.avatar"
         :style="{ 'background-image': `url(${receiver?.avatar})`}"
       ></span>
-      <div x-text="receiver?.name"></div>
+      <div x-text="receiver?.name" class="grow"></div>
       <button @click="receiver = null">Edit</button>
     </div>
     <div x-text="error || success" x-show="error || success" :class="error ? 'error' : 'success'"></div>