Text sizing correction.

9b3552631a045342390d9435346b8ce0a3a8ee83

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

Parents: 09035a71dc16b3d503fde448fd9cb954e99f2db5

public/style.css+38 -49 Viewed

 #user_avatar_block {
     display: flex;
 -    flex-wrap: wrap;  /* Ensures cards go to the next row if there's not enough space */
 +    flex-wrap: wrap;
 -    gap: 10px;  /* Adds space between cards */
 +    gap: 10px;
+}
 /* Main structure for the model cards */
 .model-card {
     display: flex;
 -    justify-content: space-between;  /* Align the title and details across the card */
 +    justify-content: space-between;
     align-items: center;  /* Center align the items vertically */
 -    padding: 15px;  /* Padding around the content */
 +    padding: 15px;
     border: 1px solid #333;  /* Border for the card */
     border-radius: 8px;  /* Rounded corners for the card */
     background-color: #222;  /* Card background color */
     color: #fff;  /* Text color */
     margin: 7px;  /* Space between cards */
     width: calc(100% - 7px);  /* Full width minus margin */
     box-sizing: border-box;  /* Include padding and border in the width */
     transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out, border 0.2s ease-in-out;
+}
 .model-card:hover {
     transform: scale(1.02);  /* 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 */
+}
 -/* Highlight the selected model card */
 .model-card.selected {
     border: 2px solid var(--okGreen70a);  /* Add a blue border to indicate selection */
     background-color: var(--okGreen70a);  /* Slightly darker background for selected state */
+}
 -/* Model title information */
 .model-info {
 -    flex: 1;  /* Take up the remaining space */
 +    flex: 1;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;  /* Ellipsis for overflow text */
+}
 .model-title {
     font-size: 16px--mainFontSize;
 -    font-weight: bold;  /* Bold text for the model title */
 +    font-weight: bold;
     overflow: hidden;
+}
 -/* Model details section */
 .model-details {
     display: flex;
 -    flex-direction: column;  /* Stack class and context length vertically */
 +    flex-direction: column;
     align-items: flex-end;  /* Align details to the end (right) */
 -    text-align: right;  /* Right-aligned text for class and context length */
 +    text-align: right;
 -    min-width: 120px;  /* Minimum width to prevent excessive squeezing */
 +    min-width: 120px;
+}
 .model-class, .model-context-length {
 -    font-size: 14px;  /* Smaller font size for details */
 +    font-size: calc(--mainFontSize - 3);
+}
 .model-class {
 -    margin-bottom: 5px;  /* Space between class and context length */
 +    margin-bottom: 5px;
+}
 -/* Grid-view layout for the card container */
 #model_card_block.grid-view {
 -    /* 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 */
 +    flex-wrap: wrap;
 -    gap: 5px;  /* Space between grid items */
 +    gap: 5px;
     justify-content: flex-start;  /* Align cards to the left */
+}
 /* Grid-view card */
 #model_card_block.grid-view .model-card {
 -    flex-direction: column; /* Stack title, class, and context length vertically for grid */
 +    flex-direction: column;
     flex: 1 1 calc(50% - 30px); /* 3 cards per row with spacing */
 -    /* margin-bottom: 10px; */
+}
 -/* Ensure the search bar takes most of the width */
 #model_search_bar {
     width: 15ch;
     flex-grow: 0;
 -    /* min-width: 10ch; */
     align-self: center;
+}
 -/* Sort dropdown should be auto-sized based on its content */
 #model_sort_order {
     width: auto;
     flex-shrink: 0;
     align-self: center;
+}
 -/* Grid toggle button */
 #model_grid_toggle {
     flex-shrink: 0;
 -    width: auto;  /* Keep default button size */
 +    width: auto;
     cursor: pointer;
+}

@@ -5590,23 +5580,22 @@ body:not(.movingUI) .drawer-content.maximized {
5590	5580	align-self: center;
5591	5581	}
5592	5582
5593		-/* Media query for mobile devices */
5594	5583	@media (max-width: 768px) {
5595	5584	.model-card {
5596		- flex-direction: column; /* Stack content vertically on small screens */
	5585	+ flex-direction: column;
5597		- align-items: stretch; /* Stretch items to take full width */
	5586	+ align-items: stretch;
5598	5587	}
5599	5588
5600	5589	.model-info, .model-details {
5601	5590	width: 100%; /* Take full width */
5602	5591	text-align: left; /* Left-align text */
5603	5592	}
5604	5593
5605	5594	#model_search_bar {
5606		- width: 100%; /* Take full width on small screens */
	5595	+ width: 100%;
5607	5596	}
5608	5597
5609	5598	#model_sort_order, #model_grid_toggle {
5610		- margin-top: 10px; /* Add some space above these elements */
	5599	+ margin-top: 10px;
5611	5600	}
5612	5601	}