- fix charPanel div heights - fix noHotswap area height & flex dir

506e2f2c6f186fb30a0fff6ce80c54b732e8cd2d

RossAscends <124905043+RossAscends@users.noreply.github.com>

Parents: 192d50afb0975cf95c5120e9f1a9b1c40ea54e8e

public/css/st-tailwind.css+5 -1 Viewed

@@ -332,6 +332,10 @@
332	overflow: hidden;	332	overflow: hidden;
333	}	333	}
334		334
		335	.overflowYScroll {
		336	overflow-y: scroll;
		337	}
		338
335	.padding0 {	339	.padding0 {
336	padding: 0;	340	padding: 0;
337	}	341	}

 .wordBreakAll {
     word-break: break-all;
 }
 \ No newline at end of file

public/css/toggle-dependent.css+8 -1 Viewed

+}
 body.no-hotswap .hotswap,
+body.no-hotswap .hotswap~hr,
 body.no-timer .mes_timer,
 body.no-timestamps .timestamp,
 body.no-tokenCount .tokenCounterDisplay,

     display: none !important;
+}
+body.no-hotswap #CharListButtonAndHotSwaps .flex-container {
+    flex-wrap: nowrap;
+    align-items: flex-end;
+    flex-flow: row;
+}
 body.hideChatAvatars .last_mes:not(.smallSysMes) {
     padding-bottom: 20px !important;
+}

 label[for="bind_preset_to_connection"]:has(input:checked) {
     color: var(--active);
 }
 \ No newline at end of file

public/index.html+19 -17 Viewed

                                         <div data-preset-manager-import="novel" class="margin0 menu_button_icon menu_button" title="Import preset" data-i18n="[title]Import preset">
                                             <i class="fa-fw fa-solid fa-file-import"></i>
                                         </div>
-                                        <div data-preset-manager-export="novel"  class="margin0 menu_button_icon menu_button" title="Export preset" data-i18n="[title]Export preset">
+                                        <div data-preset-manager-export="novel" class="margin0 menu_button_icon menu_button" title="Export preset" data-i18n="[title]Export preset">
                                             <i class="fa-fw fa-solid fa-file-export"></i>
                                         </div>
                                         <div data-preset-manager-delete="novel" class="margin0 menu_button_icon menu_button" title="Delete the preset" data-i18n="[title]Delete the preset">

                                 <div data-source="openrouter" class="range-block">
                                     <div class="range-block-title" title="Allow compressing requests by removing messages from the middle of the prompt.">
                                         <span data-i18n="Middle-out Transform">Middle-out Transform</span>
-                                        <a href="https://openrouter.ai/docs/transforms" target="_blank" rel="noreferrer noopener"  class="note-link-span fa-solid fa-circle-question"></a>
+                                        <a href="https://openrouter.ai/docs/transforms" target="_blank" rel="noreferrer noopener" class="note-link-span fa-solid fa-circle-question"></a>
                                     </div>
                                     <div class="wide100p">
                                         <select id="openrouter_middleout" class="text_pole">

                                         <span id="vertexai_service_account_info"></span>
                                     </div>
                                     <textarea id="vertexai_service_account_json" class="text_pole textarea_compact" rows="4" placeholder='Paste your Service Account JSON content here, e.g.:
-{
+                {
-  "type": "service_account",
+                "type": "service_account",
-  "project_id": "your-project-id",
+                "project_id": "your-project-id",
-  "private_key_id": "...",
+                "private_key_id": "...",
-  "private_key": "-----BEGIN PRIVATE KEY-----\n...\n-----END PRIVATE KEY-----\n",
+                "private_key": "-----BEGIN PRIVATE KEY-----\n...\n-----END PRIVATE KEY-----\n",
-  "client_email": "...",
+                "client_email": "...",
-  "client_id": "...",
+                "client_id": "...",
-  "auth_uri": "https://accounts.google.com/o/oauth2/auth",
+                "auth_uri": "https://accounts.google.com/o/oauth2/auth",
-  "token_uri": "https://oauth2.googleapis.com/token"
+                "token_uri": "https://oauth2.googleapis.com/token"
-}'></textarea>
+                }'></textarea>
                                     <div data-for="vertexai_service_account_json" class="neutral_warning" data-i18n="For privacy reasons, your Service Account JSON content will be hidden after you reload the page.">
                                         For privacy reasons, your Service Account JSON content will be hidden after you reload the page.
                                     </div>

                                     <input id="instruct_bind_to_context" type="checkbox" style="display:none;" />
                                     <small><i class="fa-solid fa-link menu_button margin0"></i></small>
                                 </label>
-                                <label id="instruct_enabled_label"for="instruct_enabled" class="checkbox_label flex1" title="Enable Instruct Mode" data-i18n="[title]instruct_enabled">
+                                <label id="instruct_enabled_label" for="instruct_enabled" class="checkbox_label flex1" title="Enable Instruct Mode" data-i18n="[title]instruct_enabled">
                                     <input id="instruct_enabled" type="checkbox" style="display:none;" />
                                     <small><i class="fa-solid fa-power-off menu_button togglable margin0"></i></small>
                                 </label>

                 <div class="flex-container wide100p alignitemscenter spaceBetween flexNoGap">
                     <div class="flex-container alignItemsBaseline wide100p">
                         <div class="flex1 flex-container alignItemsBaseline">
-                            <h3 class="margin0" >
+                            <h3 class="margin0">
                                 <span data-i18n="Persona Management">Persona Management</span>
                                 <a href="https://docs.sillytavern.app/usage/core-concepts/personas/" target="_blank">
                                     <span class="fa-solid fa-circle-question note-link-span"></span>

                         <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 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>
+                        <hr class="wide100p">
                     </div>
                 </div>
-                <hr>
                 <!-- this div structure must be preserved until group peeking can adjust -->
                 <div id="rm_PinAndTabs">
                     <div id="right-nav-panel-tabs" class="">

     </script>
 </body>
 </html>
 \ No newline at end of file

public/script.js+22 -0 Viewed

         icon.toggleClass('openIcon closedIcon');
         drawer.toggleClass('openDrawer closedDrawer');
+        //commented code is to prevent scrollbars showing during transition, if we want to do that
+        //'scrollableInner' only exists on samplers panel though, so will need different logic for each drawer
+        //this does create an undesireable leftward width retraction of about 15px if a natural scrollbar pops after transition
+        //however, if we don't prevent the transition scrollbar, we get a 15px expansion right when it is no longer needed
+        //we get to pick our poison. (or...we go with just opacity transitions and stop caring about height and layout shifts.)
+        //only true fix for this is to make scrollbars always show (overflow-y:scroll), and style them so they are transparent until div hover
+        //this creates a 15px perma-padding on the right of the div tho, even when not needed
+        //example of this can be seen on STMP's pastChat list
+        //drawer.find('.scrollableInner').addClass('overflowHidden'); //prevents scrollbars
+        //await delay(250); //this duration is presumed
+        //drawer.find('.scrollableInner').removeClass('overflowHidden'); //restore after transition
         if (targetDrawerID === 'right-nav-panel') {
             favsToHotswap();
             $('#rm_print_characters_block').trigger('scroll');
+            const hotSwapBlockHeight = $('#CharListButtonAndHotSwaps').css('height');
+            const heightMinusHotSwapBlockHeight = 'calc(100% - ' + hotSwapBlockHeight + ')';
+            $('#rm_ch_create_block, #rm_characters_block').css('height', heightMinusHotSwapBlockHeight);
+        }
         // Set the height of "autoSetHeight" textareas within the drawer to their scroll height

@@ -10353,8 +10369,14 @@ export async function doNavbarIconClick() {
10353	}	10369	}
10354	}	10370	}
10355	} else if (drawerWasOpenAlready) {	10371	} else if (drawerWasOpenAlready) {
		10372
		10373	//drawer.find('.scrollableInner').toggleClass('overflowHidden'); //prevents scrollbars
		10374
10356	icon.toggleClass('closedIcon openIcon');	10375	icon.toggleClass('closedIcon openIcon');
10357	drawer.toggleClass('closedDrawer openDrawer');	10376	drawer.toggleClass('closedDrawer openDrawer');
		10377
		10378	//await delay(250); //this duration is presumed
		10379	//drawer.find('.scrollableInner').toggleClass('overflowHidden'); //restore to default
10358	}	10380	}
10359	}	10381	}
10360		10382

public/scripts/power-user.js+3 -0 Viewed

 function switchHotswap() {
     $('body').toggleClass('no-hotswap', !power_user.hotswap_enabled);
     $('#hotswapEnabled').prop('checked', power_user.hotswap_enabled);
+    const hotSwapBlockHeight = $('#CharListButtonAndHotSwaps').css('height');
+    const heightMinusHotSwapBlockHeight = 'calc(100% - ' + hotSwapBlockHeight + ')';
+    $('#rm_ch_create_block, #rm_characters_block').css('height', heightMinusHotSwapBlockHeight);
+}
 function switchTimer() {

public/style.css+2 -2 Viewed

 #form_create {
     display: flex;
     flex-direction: column;
-    height: 100%;
+    height: calc(100% - var(--topBarBlockSize));
     overflow-y: auto;
     padding: 1px;
+}

 .info-block.error {
     border-color: var(--error-color, #e87f7f);
     background-color: rgba(241, 163, 163, 0.2);
 }
 \ No newline at end of file