diff --git a/public/scripts/textgen-models.js b/public/scripts/textgen-models.js index dd7c58793..af447d254 100644 --- a/public/scripts/textgen-models.js +++ b/public/scripts/textgen-models.js @@ -4,6 +4,7 @@ import { textgenerationwebui_settings as textgen_settings, textgen_types } from 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 = []; @@ -306,11 +307,11 @@ export async function loadFeatherlessModels(data) { 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) { diff --git a/public/style.css b/public/style.css index c354a7cba..1a200fe3a 100644 --- a/public/style.css +++ b/public/style.css @@ -5502,7 +5502,7 @@ body:not(.movingUI) .drawer-content.maximized { } .model-card:hover { - transform: scale(1.05); /* Grow the card slightly on hover */ + transform: scale(1.025); /* Grow the card slightly on hover */ background-color: #444; /* Highlight background on hover */ transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out; /* Smooth transition */ } @@ -5546,7 +5546,8 @@ body:not(.movingUI) .drawer-content.maximized { /* 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 */ @@ -5562,8 +5563,9 @@ body:not(.movingUI) .drawer-content.maximized { /* Ensure the search bar takes most of the width */ #model_search_bar { - flex-grow: 1; - min-width: 10ch; + width: 15ch; + flex-grow: 0; + /* min-width: 10ch; */ align-self: center; }