read-receipts-list: Add a border between avatars

Uses a round cutout rather than a border to have a better visual
if part of the avatar is transparent.

data/resources/style.css

@@ -505,6 +505,12 @@ message-reactions .reaction-count {
   padding: 2px;
 }
 
+read-receipts-list .cutout {
+  background-color: @view_bg_color;
+  border-radius: 999px;
+  padding: 1px;
+}
+
 .divider-row {
   font-size: 0.9em;
   font-weight: bold;

src/session/view/content/room_history/read_receipts_list.rs

@@ -41,6 +41,7 @@ mod imp {
 
         fn class_init(klass: &mut Self::Class) {
             Self::bind_template(klass);
+            klass.set_css_name("read-receipts-list");
         }
 
         fn instance_init(obj: &InitializingObject<Self>) {
@@ -112,7 +113,9 @@ impl ReadReceiptsList {
                 let avatar = Avatar::new();
                 avatar.set_size(20);
                 avatar.set_data(Some(avatar_data.clone()));
-                avatar.upcast()
+
+                let cutout = adw::Bin::builder().child(&avatar).css_classes(["cutout"]).build();
+                cutout.upcast()
             }),
         );