Merge branch 'SillyTavern:staging' into staging

public/css/world-info.css

@@ -39,7 +39,6 @@
 #world_popup_bottom_holder div {
     width: fit-content;
     user-select: none;
-    opacity: 0.8;
 }
 
 .world_popup_logo_block {
@@ -60,7 +59,6 @@
 #form_rename_world {
     display: flex;
     align-items: center;
-    opacity: 0.8;
     gap: 5px;
 }
 
@@ -178,4 +176,10 @@
 /* possible place for WI Entry header styling */
 /* .world_entry_form .inline-drawer-header {
     background-color: var(--SmartThemeShadowColor);
-} */
+} */
+
+#world_editor_select {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 10em;
+}

public/index.html

@@ -2091,7 +2091,7 @@
                                 <label for="context_story_string">
                                     <small data-i18n="Story String">Story String</small>
                                 </label>
-                                <textarea id="context_story_string" class="text_pole textarea_compact" rows="3"></textarea>
+                                <textarea id="context_story_string" class="text_pole textarea_compact" rows="6"></textarea>
                                 <div class="flex-container">
                                     <div class="flex1">
                                         <label for="context_example_separator">
@@ -2167,7 +2167,7 @@
                             <div class="prompt_overridden">
                                 Overridden by the Character Definitions.
                             </div>
-                            <textarea id="instruct_system_prompt" class="text_pole textarea_compact"></textarea>
+                            <textarea id="instruct_system_prompt" class="text_pole textarea_compact" rows="4"></textarea>
                             <div class="flex-container">
                                 <div class="flex1">
                                     <label for="instruct_input_sequence">
@@ -2221,15 +2221,6 @@
                                 </div>
                             </div>
                         </div>
-
-                        <div>
-                            <h4 data-i18n="Non-markdown strings">
-                                Non-markdown strings
-                            </h4>
-                            <div>
-                                <input id="markdown_escape_strings" class="text_pole textarea_compact" type="text" data-i18n="[placeholder]separate with commas w/o space between" placeholder="separate with commas w/o space between" maxlength="100" />
-                            </div>
-                        </div>
                     </div>
                     <div name="ContextFormatting" class="flex1">
                         <div>
@@ -2306,6 +2297,14 @@
                                     Show reply prefix in chat
                                 </span>
                             </label>
+                            <div>
+                                <h4 data-i18n="Non-markdown strings">
+                                    Non-markdown strings
+                                </h4>
+                                <div>
+                                    <input id="markdown_escape_strings" class="text_pole textarea_compact" type="text" data-i18n="[placeholder]separate with commas w/o space between" placeholder="separate with commas w/o space between" maxlength="100" />
+                                </div>
+                            </div>
                             <h4>
                                 <span data-i18n="Custom Stopping Strings">
                                     Custom Stopping Strings (KoboldAI/TextGen/NovelAI)
@@ -2508,8 +2507,8 @@
                         <div id="world_popup_text">
                             <div id="world_popup_header" class="flex-container flexGap5">
                                 <div class="world_popup_logo_block">
-                                    <h3 data-i18n="World/Lore Editor">
-                                        World/Lore Editor
+                                    <h3 data-i18n="Editor">
+                                        Editor
                                         <a href="https://docs.sillytavern.app/usage/core-concepts/worldinfo/#world-info-entry" class="notes-link" target="_blank"><span class="note-link-span">?</span></a>
                                     </h3>
                                 </div>
@@ -2525,13 +2524,13 @@
                                         <div id="world_import_button" class="menu_button fa-solid fa-file-import fa-fw" title="Import World Info" data-i18n="[title]Import World Info"></div>
                                         <div id="world_popup_export" class="menu_button fa-solid fa-file-export margin0 fa-fw" title="Export World Info" data-i18n="[title]Export World Info"></div>
                                         <div id="world_popup_delete" class="menu_button fa-solid fa-trash-can redWarningBG margin0 fa-fw" title="Delete World Info" data-i18n="[title]Delete World Info"></div>
-                                        <span data-i18n="Editing:">&nbsp;Editing:</span>
+                                        <small data-i18n="Editing:">&nbsp;Editing:</small>
                                         <select id="world_editor_select" class="margin0">
                                             <option value="" data-i18n="--- None ---">--- None ---</option>
                                         </select>
                                         <div id="world_popup_name_button" class="menu_button fa-solid fa-i-cursor fa-fw" title="Rename World Info" data-i18n="[title]Rename World Info"></div>
+                                        <div id="world_info_pagination"></div>
                                     </form>
-
                                 </div>
                             </div>
                         </div>
@@ -2554,7 +2553,7 @@
                 </div>
                 <div class="flex-container spaceEvenly">
                     <div id="UI-Theme-Block" class="flex-container flexFlowColumn drawer33pWidth">
-                        <div id="color-picker-block" class="flex-container flexFlowColumn">
+                        <div id="color-picker-block" class="flex-container flexFlowColumn flexNoGap">
                             <h4><span data-i18n="UI Colors">UI Colors</span></h4>
                             <div class="flex-container">
                                 <toolcool-color-picker id="main-text-color-picker"></toolcool-color-picker>
@@ -3084,13 +3083,18 @@
                         <div id="rm_button_selected_ch">
                             <h2></h2>
                         </div>
-                        <i id="hideCharPanelAvatarButton" class="fa-solid fa-eye right_menu_button"></i>
+                        <div id="result_info" class="flex-container" style="display: none;">
+                            <span id="result_info_text"  title="Token counts may be inaccurate and provided just for reference." data-i18n="[title]Token counts may be inaccurate and provided just for reference.">
+                                <strong id="result_info_total_tokens">Calculating...</strong> Total Tokens
+                            </span>
+                            <a id="chartokenwarning" class="right_menu_button fa-solid fa-triangle-exclamation" href="https://docs.sillytavern.app/usage/core-concepts/characterdesign/#character-tokens" target="_blank" title="About Token 'Limits'"></a>
+                            <i title="Click for stats!" class="fa-solid fa-ranking-star right_menu_button rm_stats_button"></i>
+                            <i title="Toggle character info panel" id="hideCharPanelAvatarButton" class="fa-solid fa-eye right_menu_button"></i>
+                        </div>
                     </div>
                 </div>
                 <!-- end group peeking cope structure-->
 
-
-
                 <div name="Solo Char Create/Edit Panel" 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">
 
@@ -3173,14 +3177,6 @@
                             <a href="https://docs.sillytavern.app/usage/core-concepts/characterdesign/#character-description" class="notes-link" target="_blank">
                                 <span class="note-link-span">?</span>
                             </a>
-                            <span class="expander">&nbsp;</span>
-                            <div id="result_info" class="flex-container" title="Token counts may be inaccurate and provided just for reference." data-i18n="[title]Token counts may be inaccurate and provided just for reference.">
-                                <span id="result_info_text"><strong id="result_info_total_tokens">Calculating...</strong> Total Tokens</span>
-                                <i title="Click for stats!" class="fa-solid fa-circle-info rm_stats_button"></i>
-                                <div id="chartokenwarning" class="menu_button margin0 whitespacenowrap">
-                                    <a href="https://docs.sillytavern.app/usage/core-concepts/characterdesign/#character-tokens" target="_blank">About Token 'Limits'</a>
-                                </div>
-                            </div>
                         </div>
 
                         <textarea id="description_textarea" data-i18n="[placeholder]Describe your character's physical and mental traits here." placeholder="Describe your character's physical and mental traits here." class="marginBot5" name="description" placeholder=""></textarea>
@@ -3551,61 +3547,6 @@
     </div>
 
     <!-- templates for JS to reuse when needed -->
-    <div id="context_editor_template" class="template_element">
-        <div class="context_editor">
-            <h3>Context Template Editor</h3>
-            <h4 class="template_name"></h4>
-
-            <div class="inline-drawer wide100p">
-                <div class="inline-drawer-toggle inline-drawer-header">
-                    Substitution Parameters
-                    <div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
-                </div>
-                <div class="inline-drawer-content">
-                    <i>Click to copy.</i>
-                    <ul class="template_parameters_list justifyLeft margin0">
-                        <li><code>{{char}}</code> - current character name</li>
-                        <li><code>{{user}}</code> - current user name</li>
-                        <li><code>{{description}}</code> - character description</li>
-                        <li><code>{{scenario}}</code> - character or group scenario</li>
-                        <li><code>{{personality}}</code> - character personality</li>
-                        <li><code>{{mesExamples}}</code> - message examples</li>
-                        <li><code>{{wiBeforeCharacter}}</code> - activated World Info entries (Before Char)</li>
-                        <li><code>{{wiAfterCharacter}}</code> - activated World Info entries (After Char)</li>
-                        <li><code>{{instructSystemPrompt}}</code> - system prompt (Instruct mode only)</li>
-                    </ul>
-                </div>
-            </div>
-            <div>
-                <div class="margin-bot-10px wide100p justifyLeft">
-                    Story String Template
-                </div>
-                <textarea class="wide100p textarea_compact story_string_template" rows="8"></textarea>
-                <div>
-                    <small>Lines containing parameters resolving to an empty value will be removed from the template
-                        string.</small>
-                </div>
-            </div>
-            <div>
-                <div class="title_restorable">
-                    <span>Chat Injections</span>
-                    <div title="Add chat injection" data-i18n="[title]Add chat injection" class="menu_button chat_injection_add">
-                        <div class="fa-solid fa-plus"></div>
-                    </div>
-                </div>
-                <div class="chat_injections_list flex-container flexFlowColumn flexGap5 wide100p"></div>
-            </div>
-        </div>
-    </div>
-
-    <div id="chat_injection_template" class="template_element">
-        <div class="chat_injection flex-container wide100p flexGap5 flexnowrap">
-            <input class="chat_injection_text textarea_compact text_pole flex2" data-i18n="[placeholder]Injection text (supports parameters)" placeholder="Injection text (supports parameters)" type="text" />
-            <input class="chat_injection_depth textarea_compact text_pole flex1" data-i18n="[placeholder]Injection depth" placeholder="Injection depth" type="number" min="0" max="100" />
-            <div title="Remove injection" data-i18n="[title]Remove injection" class="menu_button fa-solid fa-xmark chat_injection_remove"></div>
-        </div>
-    </div>
-
     <div id="scenario_override_template" class="template_element">
         <div class="scenario_override range-block flexFlowColumn flex-container">
             <div class="range-block-title title_restorable">
@@ -3747,7 +3688,7 @@
                                 <textarea class="text_pole keysecondarytextpole" name="keysecondary" rows="1" data-i18n="[placeholder]Comma separated (ignored if empty)" placeholder="Comma separated (ignored if empty)" maxlength="1000"></textarea>
                             </div>
                         </div>
-                        <div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
+                        <div class="fa-fw fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
                     </div>
                     <div class="inline-drawer-content flex-container">
                         <div class="WIEntryContentAndMemo flex-container">

public/script.js

@@ -133,6 +133,7 @@ import {
     isDataURL,
     getCharaFilename,
     isDigitsOnly,
+    PAGINATION_TEMPLATE,
 } from "./scripts/utils.js";
 
 import { extension_settings, getContext, loadExtensionSettings, runGenerationInterceptors, saveMetadataDebounced } from "./scripts/extensions.js";
@@ -195,7 +196,6 @@ export {
     setEditedMessageId,
     setSendButtonState,
     selectRightMenuWithAnimation,
-    setRightTabSelectedClass,
     openCharacterChat,
     saveChat,
     messageFormatting,
@@ -1049,6 +1049,7 @@ async function printCharacters(fullRefresh = false) {
         showSizeChanger: true,
         prevText: '<',
         nextText: '>',
+        formatNavigator: PAGINATION_TEMPLATE,
         showNavigator: true,
         callback: function (data) {
             $("#rm_print_characters_block").empty();
@@ -5819,7 +5820,7 @@ function selectRightMenuWithAnimation(selectedMenuId) {
         'rm_api_block': 'grid',
         'rm_characters_block': 'flex',
     };
-    $('#hideCharPanelAvatarButton').toggle(selectedMenuId === 'rm_ch_create_block');
+    $('#result_info').toggle(selectedMenuId === 'rm_ch_create_block');
     document.querySelectorAll('#right-nav-panel .right_menu').forEach((menu) => {
         $(menu).css('display', 'none');
 
@@ -5837,16 +5838,6 @@ function selectRightMenuWithAnimation(selectedMenuId) {
     })
 }
 
-function setRightTabSelectedClass(selectedButtonId) {
-    document.querySelectorAll('#right-nav-panel-tabs .right_menu_button').forEach((button) => {
-        button.classList.remove('selected-right-tab');
-
-        if (selectedButtonId && selectedButtonId.replace('#', '') === button.id) {
-            button.classList.add('selected-right-tab');
-        }
-    });
-}
-
 function select_rm_info(type, charId, previousCharId = null) {
     if (!type) {
         toastr.error(`Invalid process (no 'type')`);
@@ -5909,7 +5900,6 @@ function select_rm_info(type, charId, previousCharId = null) {
             }
         }
     }, 100);
-    setRightTabSelectedClass();
 
     if (previousCharId) {
         const newId = characters.findIndex((x) => x.avatar == previousCharId);
@@ -5926,7 +5916,6 @@ export function select_selected_character(chid) {
     menu_type = "character_edit";
     $("#delete_button").css("display", "flex");
     $("#export_button").css("display", "flex");
-    setRightTabSelectedClass('rm_button_selected_ch');
     var display_name = characters[chid].name;
 
     //create text poles
@@ -6001,8 +5990,6 @@ function select_rm_create() {
     }
 
     selectRightMenuWithAnimation('rm_ch_create_block');
-    setRightTabSelectedClass();
-
 
     $('#set_chat_scenario').hide();
     $("#delete_button_div").css("display", "none");
@@ -6049,7 +6036,6 @@ function select_rm_create() {
 function select_rm_characters() {
     menu_type = "characters";
     selectRightMenuWithAnimation('rm_characters_block');
-    setRightTabSelectedClass('rm_button_characters');
     printCharacters(false); // Do a quick refresh of the characters list
 }
 
@@ -7369,7 +7355,6 @@ export async function deleteCharacter(name, avatar) {
     name2 = systemUserName;
     chat = [...safetychat];
     chat_metadata = {};
-    setRightTabSelectedClass();
     $(document.getElementById("rm_button_selected_ch")).children("h2").text("");
     clearChat();
     this_chid = undefined;
@@ -7485,7 +7470,6 @@ $(document).ready(function () {
         selected_button = "settings";
         menu_type = "settings";
         selectRightMenuWithAnimation('rm_api_block');
-        setRightTabSelectedClass('rm_button_settings');
     });
     $("#rm_button_characters").click(function () {
         selected_button = "characters";
@@ -9242,7 +9226,7 @@ $(document).ready(function () {
         doCharListDisplaySwitch();
     });
 
-    $("#hideCharPanelAvatarButton").hide().on('click', () => {
+    $("#hideCharPanelAvatarButton").on('click', () => {
         $('#avatar-and-name-block').slideToggle()
     });
 });

public/scripts/group-chats.js

@@ -6,7 +6,8 @@ import {
     isDataURL,
     createThumbnail,
     extractAllWords,
-    saveBase64AsFile
+    saveBase64AsFile,
+    PAGINATION_TEMPLATE,
 } from './utils.js';
 import { RA_CountCharTokens, humanizedDateTime, dragElement, favsToHotswap } from "./RossAscends-mods.js";
 import { loadMovingUIState, sortEntitiesList } from './power-user.js';
@@ -35,7 +36,6 @@ import {
     online_status,
     talkativeness_default,
     selectRightMenuWithAnimation,
-    setRightTabSelectedClass,
     default_ch_mes,
     deleteLastMessage,
     showSwipeButtons,
@@ -832,7 +832,6 @@ async function deleteGroup(id) {
         select_rm_info("group_delete", id);
 
         $("#rm_button_selected_ch").children("h2").text('');
-        setRightTabSelectedClass();
     }
 }
 
@@ -991,6 +990,7 @@ function printGroupCandidates() {
         showSizeChanger: false,
         prevText: '<',
         nextText: '>',
+        formatNavigator: PAGINATION_TEMPLATE,
         showNavigator: true,
         showSizeChanger: true,
         pageSize: Number(localStorage.getItem(storageKey)) || 5,
@@ -1018,6 +1018,7 @@ function printGroupMembers() {
         showSizeChanger: false,
         prevText: '<',
         nextText: '>',
+        formatNavigator: PAGINATION_TEMPLATE,
         showNavigator: true,
         showSizeChanger: true,
         pageSize: Number(localStorage.getItem(storageKey)) || 5,
@@ -1139,7 +1140,6 @@ function select_group_chats(groupId, skipAnimation) {
     if (group) {
         $("#rm_group_automode_label").show();
         $("#rm_button_selected_ch").children("h2").text(groupName);
-        setRightTabSelectedClass('rm_button_selected_ch');
     }
     else {
         $("#rm_group_automode_label").hide();

public/scripts/horde.js

@@ -30,8 +30,8 @@ let horde_settings = {
     trusted_workers_only: false,
 };
 
-const MAX_RETRIES = 100;
-const CHECK_INTERVAL = 3000;
+const MAX_RETRIES = 200;
+const CHECK_INTERVAL = 5000;
 const MIN_AMOUNT_GEN = 16;
 const getRequestArgs = () => ({
     method: "GET",

public/scripts/utils.js

@@ -1,6 +1,8 @@
 import { getContext } from "./extensions.js";
 import { getRequestHeaders } from "../script.js";
 
+export const PAGINATION_TEMPLATE = '<%= rangeStart %>-<%= rangeEnd %> of <%= totalNumber %>';
+
 export function onlyUnique(value, index, array) {
     return array.indexOf(value) === index;
 }

public/scripts/world-info.js

@@ -1,5 +1,5 @@
 import { saveSettings, callPopup, substituteParams, getTokenCount, getRequestHeaders, chat_metadata, this_chid, characters, saveCharacterDebounced, menu_type, eventSource, event_types } from "../script.js";
-import { download, debounce, initScrollHeight, resetScrollHeight, parseJsonFile, extractDataFromPng, getFileBuffer, getCharaFilename, deepClone, getSortableDelay, escapeRegex } from "./utils.js";
+import { download, debounce, initScrollHeight, resetScrollHeight, parseJsonFile, extractDataFromPng, getFileBuffer, getCharaFilename, deepClone, getSortableDelay, escapeRegex, PAGINATION_TEMPLATE } from "./utils.js";
 import { getContext } from "./extensions.js";
 import { NOTE_MODULE_NAME, metadata_keys, shouldWIAddPrompt } from "./authors-note.js";
 import { registerSlashCommand } from "./slash-commands.js";
@@ -45,6 +45,8 @@ const saveSettingsDebounced = debounce(() => {
     saveSettings()
 }, 1000);
 const sortFn = (a, b) => b.order - a.order;
+const navigation_option = { none: 0, previous: 1, last: 2, };
+let updateEditor = (navigation) => { navigation; };
 
 export function getWorldInfoSettings() {
     return {
@@ -223,7 +225,9 @@ function nullWorldInfo() {
     toastr.info("Create or import a new World Info file first.", "World Info is not set", { timeOut: 10000, preventDuplicates: true });
 }
 
-function displayWorldEntries(name, data) {
+function displayWorldEntries(name, data, navigation = navigation_option.none) {
+    updateEditor = (navigation) => displayWorldEntries(name, data, navigation);
+
     $("#world_popup_entries_list").empty().show();
 
     if (!data || !("entries" in data)) {
@@ -232,22 +236,55 @@ function displayWorldEntries(name, data) {
         $("#world_popup_export").off('click').on('click', nullWorldInfo);
         $("#world_popup_delete").off('click').on('click', nullWorldInfo);
         $("#world_popup_entries_list").hide();
+        $("#world_info_pagination").pagination('destroy');
         return;
     }
 
-    // Convert the data.entries object into an array
-    const entriesArray = Object.keys(data.entries).map(uid => {
-        const entry = data.entries[uid];
-        entry.displayIndex = entry.displayIndex ?? entry.uid;
-        return entry;
+    function getDataArray(callback) {
+        // Convert the data.entries object into an array
+        const entriesArray = Object.keys(data.entries).map(uid => {
+            const entry = data.entries[uid];
+            entry.displayIndex = entry.displayIndex ?? entry.uid;
+            return entry;
+        });
+
+        // Sort the entries array by displayIndex and uid
+        entriesArray.sort((a, b) => a.displayIndex - b.displayIndex || a.uid - b.uid);
+        callback(entriesArray);
+    }
+
+    let startPage = 1;
+
+    if (navigation === navigation_option.previous) {
+        startPage = $("#world_info_pagination").pagination('getCurrentPageNum');
+    }
+
+    const storageKey = 'WI_PerPage';
+    $("#world_info_pagination").pagination({
+        dataSource: getDataArray,
+        pageSize: Number(localStorage.getItem(storageKey)) || 10,
+        sizeChangerOptions: [10, 25, 50, 100],
+        pageRange: 1,
+        pageNumber: startPage,
+        position: 'top',
+        showPageNumbers: false,
+        showSizeChanger: true,
+        prevText: '<',
+        nextText: '>',
+        formatNavigator: PAGINATION_TEMPLATE,
+        showNavigator: true,
+        callback: function (page) {
+            $("#world_popup_entries_list").empty();
+            const blocks = page.map(entry => getWorldEntry(name, data, entry));
+            $("#world_popup_entries_list").append(blocks);
+        },
+        afterSizeSelectorChange: function (e) {
+            localStorage.setItem(storageKey, e.target.value);
+        }
     });
 
-    // Sort the entries array by displayIndex and uid
-    entriesArray.sort((a, b) => a.displayIndex - b.displayIndex || a.uid - b.uid);
-
-    // Loop through the sorted array and call appendWorldEntry
-    for (const entry of entriesArray) {
-        appendWorldEntry(name, data, entry);
+    if (navigation === navigation_option.last) {
+        $("#world_info_pagination").pagination('go', $("#world_info_pagination").pagination('getTotalPage'));
     }
 
     $("#world_popup_new").off('click').on('click', () => {
@@ -360,7 +397,7 @@ function deleteOriginalDataValue(data, uid) {
     }
 }
 
-function appendWorldEntry(name, data, entry) {
+function getWorldEntry(name, data, entry) {
     const template = $("#entry_edit_template .world_entry").clone();
     template.data("uid", entry.uid);
 
@@ -454,12 +491,10 @@ function appendWorldEntry(name, data, entry) {
     commentToggle.parent().hide()
 
     // content
-    const countTokensDebounced = debounce(function (that, value) {
+    const counter = template.find(".world_entry_form_token_counter");
+    const countTokensDebounced = debounce(function (counter, value) {
         const numberOfTokens = getTokenCount(value);
-        $(that)
-            .closest(".world_entry")
-            .find(".world_entry_form_token_counter")
-            .text(numberOfTokens);
+        $(counter).text(numberOfTokens);
     }, 1000);
 
     const contentInput = template.find('textarea[name="content"]');
@@ -477,17 +512,15 @@ function appendWorldEntry(name, data, entry) {
         }
 
         // count tokens
-        countTokensDebounced(this, value);
+        countTokensDebounced(counter, value);
     });
     contentInput.val(entry.content).trigger("input", { skipCount: true });
     //initScrollHeight(contentInput);
 
     template.find('.inline-drawer-toggle').on('click', function () {
-        const counter = template.find(".world_entry_form_token_counter");
-
         if (counter.data('first-run')) {
             counter.data('first-run', false);
-            countTokensDebounced(contentInput, contentInput.val());
+            countTokensDebounced(counter, contentInput.val());
         }
     });
 
@@ -664,11 +697,10 @@ function appendWorldEntry(name, data, entry) {
         const uid = $(this).data("uid");
         deleteWorldInfoEntry(data, uid);
         deleteOriginalDataValue(data, uid);
-        $(this).closest(".world_entry").remove();
         saveWorldInfo(name, data);
+        updateEditor(navigation_option.previous);
     });
 
-    template.appendTo("#world_popup_entries_list");
     template.find('.inline-drawer-content').css('display', 'none'); //entries start collapsed
 
     return template;
@@ -709,8 +741,7 @@ function createWorldInfoEntry(name, data) {
     const newEntry = { uid: newUid, ...newEntryTemplate };
     data.entries[newUid] = newEntry;
 
-    const entryTemplate = appendWorldEntry(name, data, newEntry);
-    entryTemplate.get(0).scrollIntoView({ behavior: "smooth" });
+    updateEditor(navigation_option.last);
 }
 
 async function _save(name, data) {

public/style.css

@@ -717,7 +717,6 @@ hr {
 .ui-settings {
     display: flex;
     flex-direction: column;
-    gap: 5px;
     flex-grow: 1;
 }
 
@@ -986,7 +985,7 @@ input[type="file"] {
     align-items: center;
     gap: 10px;
     overflow: hidden;
-    width: fit-content;
+    width: 100%;
 }
 
 #rm_PinAndTabs {
@@ -1000,6 +999,7 @@ input[type="file"] {
 #right-nav-panel-tabs .right_menu_button,
 #CharListButtonAndHotSwaps .right_menu_button {
     padding-right: 0;
+    color: unset;
 }
 
 #chartokenwarning.menu_button {
@@ -1586,11 +1586,6 @@ input[type=search]:focus::-webkit-search-cancel-button {
     display: flex;
 }
 
-#description_div {
-    display: flex;
-    align-items: center;
-}
-
 #name_div {
     width: 100%;
 }
@@ -1677,11 +1672,12 @@ grammarly-extension {
     align-self: center !important;
 }
 
+#description_div,
 #first_message_div {
-    position: relative;
+    display: flex;
+    align-items: center;
 }
 
-
 #rm_characters_block .form_create_bottom_buttons_block {
     justify-content: space-evenly !important;
     flex-grow: 0;
@@ -1716,6 +1712,7 @@ grammarly-extension {
     font-size: calc(var(--mainFontSize) * 0.9);
     display: flex;
     align-items: baseline;
+    gap: 10px;
 }
 
 .rm_stats_button {