Only CharList scrolls now

- new group panel not perfect yet

public/index.html

@@ -1437,6 +1437,8 @@
             </div>
             <nav id="right-nav-panel" class="drawer-content closedDrawer fillRight">
                 <div id="right-nav-panelheader" class="fa-solid fa-grip drag-grabber"></div>
+
+                <div id="rm_PinAndTabs">
                     <div id="rm_button_panel_pin_div" title="Locked = Character Management panel will stay open">
                         <input type="checkbox" id="rm_button_panel_pin">
                         <label for="rm_button_panel_pin">
@@ -1444,16 +1446,18 @@
                             <div class="fa-solid checked  fa-lock" alt=""></div>
                         </label>
                     </div>
-                <div class="scrollableInner">
                     <div id="right-nav-panel-tabs">
                         <div class="right_menu_button fa-solid fa-list-ul" id="rm_button_characters" title="Select/Create Characters"></div>
                         <div class="right_menu_button" id="rm_button_selected_ch">
                             <h2></h2>
                         </div>
-
                     </div>
-                    <div id="rm_ch_create_block" class="right_menu" style="display: none;">
+                </div>
+
+
+                <div id="rm_ch_create_block" class="right_menu flex-container flexFlowColumn" style="display: none;">
                     <form id="form_create" action="javascript:void(null);" method="post" enctype="multipart/form-data">
+
                         <div id="avatar-and-name-block">
                             <div id="name_div">
                                 <h4>Character Name</h4>
@@ -1523,6 +1527,7 @@
                                 <input id="last_mes_pole" name="last_mes" class="text_pole" maxlength="999" size="2" value="" autocomplete="off">
                             </div>
                         </div>
+
                         <!-- now back to normal divs for display purposes-->
                     </form>
                 </div>
@@ -1566,13 +1571,12 @@
                         <h3>Add Members</h3>
                         <input id="rm_group_filter" class="text_pole" type="search" placeholder="Filter..." maxlength="100" />
                     </div>
-                        <!-- !!!Don't break line after div!!! -->
+                    <div class="flex-container flexFlowColumn overflowYAuto">
                         <div id="rm_group_add_members"></div>
                         <h3>Members</h3>
-                        <!-- !!!Don't break line after div!!! -->
                         <div id="rm_group_members"></div>
                     </div>
-
+                </div>
                 <div id="rm_character_import" class="right_menu" style="display: none;">
                     <form id="form_import" action="javascript:void(null);" method="post" enctype="multipart/form-data">
                         <input multiple type="file" id="character_import_file" accept=".json, image/png, image/webp" name="avatar">
@@ -1580,6 +1584,7 @@
                     </form>
                 </div>
                 <div id="rm_characters_block" class="right_menu">
+                    <div id="charListFixedTop">
                         <div class="form_create_bottom_buttons_block">
                             <div id="rm_button_create" title="Create New Character" class="menu_button fa-solid fa-user-plus "></div>
                             <div id="character_import_button" title="Import Character from File" class="menu_button fa-solid fa-file-arrow-up "></div>
@@ -1599,8 +1604,7 @@
                                 <option data-field="chat_size" data-order="asc">Least chatted</option>
                             </select>
                         </form>
-                        <div id="rm_tag_filter" class="tags">
+                        <div id="rm_tag_filter" class="tags"></div>
-
                     </div>
                     <div id="rm_print_characters_block"></div>
                 </div>
@@ -1613,7 +1617,7 @@
                         <div id="rm_info_button" class="menu_button">Back</div>
                     </div>
                 </div>
-                </div>
+
             </nav>
         </div>
 

public/script.js

@@ -5288,6 +5288,7 @@ $(document).ready(function () {
         var icon = $(this).find('.drawer-icon');
         var drawer = $(this).parent().find('.drawer-content');
         var drawerWasOpenAlready = $(this).parent().find('.drawer-content').hasClass('openDrawer');
+        let targetDrawerID = $(this).parent().find('.drawer-content').attr('id');
         const pinnedDrawerClicked = drawer.hasClass('pinnedOpen');
 
         if (!drawerWasOpenAlready) {
@@ -5296,7 +5297,21 @@ $(document).ready(function () {
             $('.openDrawer').not('.pinnedOpen').toggleClass('closedDrawer openDrawer');
             icon.toggleClass('openIcon closedIcon');
             drawer.toggleClass('openDrawer closedDrawer');
+
+            console.log(targetDrawerID);
+            if (targetDrawerID === 'right-nav-panel') {
+                $(this).closest('.drawer').find('.drawer-content').slideToggle({
+                    duration: 200,
+                    easing: "swing",
+                    start: function () {
+                        jQuery(this).css('display', 'flex');
+                    }
+                })
+            } else {
                 $(this).closest('.drawer').find('.drawer-content').slideToggle(200, "swing");
+            }
+
+
         } else if (drawerWasOpenAlready) {
             icon.toggleClass('closedIcon openIcon');
 

public/style.css

@@ -955,6 +955,10 @@ select option:not(:checked) {
     display: none;
 }
 
+.overflowYAuto {
+    overflow-y: auto;
+}
+
 #rm_characters_block {
     display: flex;
     overflow-y: auto;
@@ -2566,6 +2570,8 @@ body .ui-widget-content {
     margin-bottom: 0.5rem;
     width: 100%;
     flex: 1;
+    max-height: 40%;
+    min-height: 40%;
     overflow: auto;
     display: flex;
     flex-direction: column;
@@ -3030,6 +3036,7 @@ a {
     border-radius: 0 0 0 20px;
     overflow: hidden;
     scrollbar-width: thin;
+    flex-flow: column;
 }
 
 #nav-toggle {