Ui bug Fixes

fa52fb4ae6c318f49c3477b2ac008da1d7d78b03

DarokCx <77368869+DarokCx@users.noreply.github.com>

public/scripts/textgen-models.js+3 -2 Viewed

 import { tokenizers } from './tokenizers.js';
 import { renderTemplateAsync } from './templates.js';
 import { POPUP_TYPE, callGenericPopup } from './popup.js';
+import { PAGINATION_TEMPLATE } from './utils.js';
 let mancerModels = [];
 let togetherModels = [];

             pageRange: 1,
             pageNumber: 1,
             showPageNumbers: true,
-            showSizeChanger: true,
+            showSizeChanger: false,
             prevText: '<',
             nextText: '>',
             formatNavigator: function (currentPage, totalPage) {
-                return 'Page ' + currentPage + ' of ' + totalPage;
+                return (currentPage - 1) * perPage + 1  + ' - ' + currentPage * perPage + ' of ' + totalPage * perPage;
             },
             showNavigator: true,
             callback: function (modelsOnPage) {

public/style.css+6 -4 Viewed

@@ -5502,7 +5502,7 @@ body:not(.movingUI) .drawer-content.maximized {
5502	}	5502	}
5503		5503
5504	.model-card:hover {	5504	.model-card:hover {
5505	transform: scale(1.05); /* Grow the card slightly on hover */	5505	transform: scale(1.025); /* Grow the card slightly on hover */
5506	background-color: #444; /* Highlight background on hover */	5506	background-color: #444; /* Highlight background on hover */
5507	transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out; /* Smooth transition */	5507	transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out; /* Smooth transition */
5508	}	5508	}

 /* Grid-view layout for the card container */
 #model_card_block.grid-view {
-    grid-row: 1 / span 2;  /* Span two rows */
+    /* grid-row: 1 / span 2;  Span two rows */
+    grid-template-columns: repeat(2, 1fr);
     display: flex;
     flex-wrap: wrap;  /* Cards wrap onto new lines when necessary */
     gap: 15px;  /* Space between grid items */

 /* Ensure the search bar takes most of the width */
 #model_search_bar {
-    flex-grow: 1;
+    width: 15ch;
-    min-width: 10ch;
+    flex-grow: 0;
+    /* min-width: 10ch; */
     align-self: center;
+}