character list grid display toggle

public/index.html

@@ -2868,11 +2868,14 @@
                             <div class="tags rm_tag_filter"></div>
                         </div>
                         <!-- a div containing a dynamically updated count of characters currently displayed -->
-                        <div id="rm_character_count"></div>
+                        <div class="flex-container">
+                            <div id="rm_character_count"></div>
+                            <i id="charListGridToggle" class="fa-solid fa-table-cells-large menu_button"></i>
+                        </div>
                         <hr>
                     </div>
 
-                    <div id="rm_print_characters_block"></div>
+                    <div id="rm_print_characters_block" class="flexFlowColumn"></div>
                 </div>
 
                 <!-- only displays after creating/deleting a character/group -->
@@ -3367,7 +3370,10 @@
                 <img src="">
             </div>
             <div class="flex-container wide100pLess70px">
-                <div class="wide100p"><span class="ch_name"></span> <i class="ch_avatar_url"></i></div>
+                <div class="wide100p">
+                    <span class="ch_name"></span>
+                    <i class="ch_avatar_url"></i>
+                </div>
                 <i class="ch_fav_icon fa-solid fa-star"></i>
                 <input class="ch_fav" value="" hidden />
                 <div class="ch_description"></div>

public/script.js

@@ -8613,4 +8613,32 @@ $(document).ready(function () {
             }
         }
     }
+
+    $("#charListGridToggle").on('click', async () => {
+        doCharListDisplaySwitch()
+    })
+
+    function doCharListDisplaySwitch() {
+
+        $("body").toggleClass('charListGrid')
+
+        //(wide100p alignitemsflexstart) removed, the rest added
+        $("#rm_print_characters_block").toggleClass('flexFlowColumn flex-container')
+
+        $("#rm_print_characters_block .character_select").toggleClass('wide100p alignitemsflexstart heightMinContent flexFlowColumn wide30p overflowHidden wideMax100px')
+        $("#rm_print_characters_block .character_select .ch_name").toggleClass('wide100p wideMax100px')
+        $("#rm_print_characters_block .character_select .ch_name").parent().toggleClass('wide100p')
+        $("#rm_print_characters_block .character_select .ch_name").parent().parent().toggleClass('wide100pLess70px justifyCenter wideMax100px')
+
+        $("#rm_print_characters_block .group_select").toggleClass('wide100p alignitemsflexstart heightMinContent alignitemscenter flexFlowColumn wide30p overflowHidden wideMax100px')
+        $("#rm_print_characters_block .group_select .ch_name").toggleClass('wide100p wideMax100px')
+        $("#rm_print_characters_block .group_select .ch_name").parent().toggleClass('wide100pLess70px')
+
+        $(".character_select .ch_description").toggle()
+        $("#rm_print_characters_block .tags_inline").toggle()
+        power_user.charListGrid = $("body").hasClass("charListGrid") ? true : false;
+        saveSettingsDebounced()
+        select_rm_characters()
+
+    }
 })

public/scripts/power-user.js

@@ -742,10 +742,22 @@ function loadPowerUserSettings(settings, data) {
     switchWaifuMode();
     switchSpoilerMode();
     loadMovingUIState();
+    loadCharListState();
 
     //console.log(power_user)
 }
 
+async function loadCharListState() {
+    if (document.getElementById('CharID0') !== null) {
+        if (power_user.charListGrid === true) {
+            $("#charListGridToggle").trigger('click')
+        }
+    } else {
+        await delay(100)
+        loadCharListState();
+    }
+}
+
 function loadMovingUIState() {
     if (isMobile() === false
         && power_user.movingUIState

public/style.css

@@ -1189,7 +1189,6 @@ input[type="file"] {
     overflow-y: auto;
     flex-grow: 1;
     display: flex;
-    flex-direction: column;
     /* row-gap: 5px; */
 }
 
@@ -1377,6 +1376,10 @@ input[type=search]:focus::-webkit-search-cancel-button {
 
 }
 
+.heightMinContent {
+    height: min-content;
+}
+
 /*applies to char list and mes_text char display name*/
 
 .ch_name {
@@ -1420,9 +1423,10 @@ body.big-avatars .ch_description {
 #rm_print_characters_block .ch_name {
     width: 100%;
     white-space: nowrap;
-    max-width: calc(100% - 29px);
+    /* max-width: calc(100% - 29px); */
     overflow: hidden;
     text-overflow: ellipsis;
+    display: block;
 }
 
 .character_select:hover {
@@ -3378,10 +3382,13 @@ body .ui-widget-content li:hover {
 
 body:not(.big-avatars) .avatar_collage {
     min-width: 50px;
+    aspect-ratio: 1 / 1;
 }
 
 body.big-avatars .avatar_collage {
     min-width: 60px;
+    max-width: 60px;
+    aspect-ratio: 2 / 3;
 }
 
 
@@ -3840,6 +3847,7 @@ label[for="extensions_autoconnect"] {
 .extensions_info .extension_missing {
     color: gray;
 }
+
 input.extension_missing[type="checkbox"] {
     opacity: 0.5;
 }
@@ -4110,6 +4118,18 @@ toolcool-color-picker {
     text-overflow: ellipsis;
 }
 
+.maxWidth200px {
+    max-width: 200px;
+}
+
+.alignContentFlexStart {
+    align-content: flex-start;
+}
+
+.overflowHidden {
+    overflow: hidden;
+}
+
 .padding5 {
     padding: 5px;
 }
@@ -4154,6 +4174,10 @@ toolcool-color-picker {
     width: 50% !important;
 }
 
+.wide25p {
+    width: 25%;
+}
+
 .wide30p {
     width: 30% !important;
 }