restyle: right align edit buttons

cisco-ce · Apr 24, 2024 · 9dcf6eb · 9dcf6eb
1 parent 5d44788
commit 9dcf6eb
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git 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
@@ -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>