From 91dabeff53cfc769bcfca32a7fcf2bd499aa9742 Mon Sep 17 00:00:00 2001
From: Wolfsblvt <wolfsblvt@gmail.com>
Date: Fri, 24 Jan 2025 21:57:47 +0100
Subject: [PATCH] Add css class to allow multiple avatar lists

---
 public/css/toggle-dependent.css | 6 ++++++
 public/index.html               | 4 ++--
 public/scripts/personas.js      | 4 ++--
 public/style.css                | 7 +++++++
 4 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/public/css/toggle-dependent.css b/public/css/toggle-dependent.css
index b6cf2ace1..7b7ccbee1 100644
--- a/public/css/toggle-dependent.css
+++ b/public/css/toggle-dependent.css
@@ -231,10 +231,16 @@ body.big-avatars .avatars_inline_small .avatar img {
 body.big-avatars .avatars_inline {
     max-height: calc(var(--avatar-base-height) * var(--big-avatar-height-factor) + 2 * var(--avatar-base-border-radius));
 }
+body.big-avatars .avatars_inline.avatars_multiline {
+    max-height: fit-content;
+}
 
 body.big-avatars .avatars_inline.avatars_inline_small {
     height: calc(var(--avatar-base-height) * var(--big-avatar-height-factor) * var(--inline-avatar-small-factor) + 2 * var(--avatar-base-border-radius));
 }
+body.big-avatars .avatars_inline.avatars_inline_small.avatars_multiline {
+    height: inherit;
+}
 
 body:not(.big-avatars) .avatars_inline_small .avatar_collage {
     min-width: calc(var(--avatar-base-width) * var(--inline-avatar-small-factor));
diff --git a/public/index.html b/public/index.html
index 8b5093164..6b3de8598 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4981,7 +4981,7 @@
                                         <div data-i18n="Character">Character</div>
                                     </div>
                                 </div>
-                                <div id="persona_connections_list" class="text_muted m-b-1 avatars_inline flex-container scroll-reset-container expander" data-i18n="persona_no_connections">
+                                <div id="persona_connections_list" class="text_muted m-b-1 avatars_inline avatars_multiline scroll-reset-container expander" data-i18n="persona_no_connections">
                                     [No connections]
                                 </div>
                             </div>
@@ -5039,7 +5039,7 @@
                         <div class="right_menu_button fa-solid fa-list-ul" id="rm_button_characters" title="Select/Create Characters" data-i18n="[title]Select/Create Characters"></div>
                     </div>
                     <div id="HotSwapWrapper" class="alignitemscenter flex-container margin0auto wide100p">
-                        <div class="hotswap avatars_inline flex-container scroll-reset-container expander" data-i18n="[no_favs]Favorite characters to add them to HotSwaps" no_favs="Favorite characters to add them to HotSwaps"></div>
+                        <div class="hotswap avatars_inline scroll-reset-container expander" data-i18n="[no_favs]Favorite characters to add them to HotSwaps" no_favs="Favorite characters to add them to HotSwaps"></div>
                     </div>
                 </div>
                 <hr>
diff --git a/public/scripts/personas.js b/public/scripts/personas.js
index f2d73dcad..41bd0d6bd 100644
--- a/public/scripts/personas.js
+++ b/public/scripts/personas.js
@@ -558,7 +558,7 @@ export async function askForPersonaSelection(title, text, personas) {
     content.appendChild(textElement);
 
     const personaListBlock = document.createElement('div');
-    personaListBlock.classList.add('persona-list', 'avatars_inline', 'flex-container');
+    personaListBlock.classList.add('persona-list', 'avatars_inline', 'avatars_multiline');
     content.appendChild(personaListBlock);
 
     buildPersonaAvatarList(personaListBlock, personas, { interactable: true });
@@ -1201,7 +1201,7 @@ async function loadPersonaForCurrentChat() {
                 toastr.warning(t`More than one persona is connected to this character. Using the first available persona for this chat.`, t`Automatic Persona Selection`);
             } else {
                 chatPersona = await askForPersonaSelection(t`Select Persona`,
-                    t`Select one of multiple with this character connected persona to use for this chat`,
+                    t`Multiple personas are connected to this character. Select a persona to use for this chat.`,
                     connectedPersonas);
             }
         }
diff --git a/public/style.css b/public/style.css
index efc3d3223..413a6273f 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1191,6 +1191,8 @@ body.swipeAllMessages .mes:not(.last_mes) .swipes-counter {
 }
 
 .avatars_inline {
+    display: flex;
+    gap: 5px;
     flex-wrap: wrap;
     overflow: hidden;
     max-height: calc(var(--avatar-base-height) + 2 * var(--avatar-base-border-radius));
@@ -1227,6 +1229,11 @@ body.swipeAllMessages .mes:not(.last_mes) .swipes-counter {
     margin-right: calc(var(--avatar-base-border-radius));
 }
 
+.avatars_multiline {
+    max-height: fit-content;
+    height: inherit;
+}
+
 .mes_block {
     padding-top: 0;
     padding-left: 10px;