Display group member card as a button

public/css/notes.css

@@ -39,7 +39,7 @@ code {
     padding: 5px;
     border-radius: 5px;
     display: block;
-    white-space: normal;
+    white-space: pre-line;
 }
 
 a {

public/index.html

@@ -1448,7 +1448,7 @@
 
         <div id="rightNavHolder" class="drawer">
             <div id="unimportantYes" class="drawer-toggle drawer-header">
-                <div id="rightNavDrawerIcon" class="drawer-icon fa-solid fa-id-card  closedIcon" title="Character Management">
+                <div id="rightNavDrawerIcon" class="drawer-icon fa-solid fa-address-card  closedIcon" title="Character Management">
                 </div>
             </div>
             <nav id="right-nav-panel" class="drawer-content closedDrawer fillRight">
@@ -1986,10 +1986,11 @@
             <div class="avatar">
                 <img alt="Avatar" src="" />
             </div>
-            <a href="javascript:void(0);" class="ch_name"></a>
+            <div class="ch_name"></div>
             <div class="group_member_icon">
                 <div title="Move up" data-action="up" class="right_menu_button fa-solid fa-xl fa-chevron-up"></div>
                 <div title="Move down" data-action="down" class="right_menu_button fa-solid fa-xl fa-chevron-down"></div>
+                <div title="View character card" data-action="view" class="right_menu_button fa-solid fa-xl fa-id-badge"></div>
                 <div title="Remove from group" data-action="remove" class="right_menu_button fa-solid fa-2xl fa-xmark"></div>
                 <div title="Add to group" data-action="add" class="right_menu_button fa-solid fa-2xl fa-plus"></div>
             </div>

public/notes/content.md

@@ -115,7 +115,7 @@ Use {{user}} instead of the user name.
 
 Example:
 
-`
+```
 <START>
 {{user}}: Hi Aqua, I heard you like to spend time in the pub.  
 {{char}}: *excitedly* Oh my goodness, yes! I just love spending time at the pub! It's so much fun to talk to all the adventurers and hear about their exciting adventures! And you are?  
@@ -125,7 +125,7 @@ Example:
 <START>
 {{user}}: Hello  
 {{char}}: *excitedly* Hello there, dear! Are you new to Axel? Don't worry, I, Aqua the goddess of water, am here to help you! Do you need any assistance? And may I say, I look simply radiant today! *strikes a pose and looks at you with puppy eyes*
-`
+```
 
 ### Scenario
 

public/scripts/group-chats.js

@@ -936,6 +936,10 @@ function select_group_chats(groupId, skipAnimation) {
             await reorderGroupMember(groupId, member, action);
         }
 
+        if (action == 'view') {
+            openCharacterDefinition(member);
+        }
+
         sortCharactersList("#rm_group_add_members .group_member");
     });
 }
@@ -969,13 +973,12 @@ async function selectGroup() {
     }
 }
 
-function openCharacterDefinition() {
+function openCharacterDefinition(characterSelect) {
     if (is_group_generating) {
         console.warn("Can't peek a character def while group reply is being generated");
         return;
     }
 
-    const characterSelect = $(this).closest('.group_member');
     const chid = characterSelect.attr('chid');
 
     if (chid === null || chid === undefined) {
@@ -983,7 +986,7 @@ function openCharacterDefinition() {
     }
 
     setCharacterId(chid);
-    select_selected_character(chid, true);
+    select_selected_character(chid);
     // Gentle nudge to recalculate tokens
     RA_CountCharTokens();
     // Do a little tomfoolery to spoof the tag selector
@@ -1056,7 +1059,6 @@ async function createGroup() {
 }
 
 $(document).ready(() => {
-    $(document).on("click", ".group_member .ch_name", openCharacterDefinition);
     $(document).on("click", ".group_select", selectGroup);
     $("#rm_group_filter").on("input", filterGroupMembers);
     $("#rm_group_submit").on("click", createGroup);

public/style.css

@@ -1187,8 +1187,8 @@ input[type=search]:focus::-webkit-search-cancel-button {
     display: flex;
     width: 100%;
     flex-wrap: wrap;
-    margin-top: 16px;
-    margin-bottom: 10px;
+    margin-top: 0px;
+    margin-bottom: 6px;
     align-items: center;
 }
 
@@ -2693,7 +2693,7 @@ body .ui-widget-content li:hover {
 /* Rules for icon display */
 #rm_group_members .group_member[order="start"] .fa-chevron-down,
 #rm_group_members .group_member[order="end"] .fa-chevron-up,
-#rm_group_add_members .right_menu_button:not(.fa-plus),
+#rm_group_add_members .right_menu_button:not(.fa-plus,.fa-id-badge),
 #rm_group_members .fa-plus {
     display: none;
 }