Refactor folder filtering logic and update responsive grid layout in CSS

static/css/style.css

@@ -107,7 +107,7 @@ body {
 /* Responsive adjustments */
 @media (max-width: 1400px) {
     .card-grid {
-        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
     }
     
     .lora-card {

static/js/script.js

@@ -53,13 +53,16 @@ async function refreshLoras() {
         // Re-apply current sorting
         sortCards(currentSort);
         
-        // Re-apply current folder filter if any
+        // Modified folder filtering logic
-        if (activeFolder) {
+        if (activeFolder !== undefined) {  // Check if there's an active folder
             document.querySelectorAll('.lora-card').forEach(card => {
-                if (card.getAttribute('data-folder') === activeFolder) {
+                const cardFolder = card.getAttribute('data-folder');
-                    card.style.display = '';
+                // For empty folder (root directory), only show cards with empty folder path
+                if (activeFolder === '') {
+                    card.style.display = cardFolder === '' ? '' : 'none';
                 } else {
-                    card.style.display = 'none';
+                    // For other folders, show cards matching the folder path
+                    card.style.display = cardFolder === activeFolder ? '' : 'none';
                 }
             });
         }

templates/loras.html

@@ -14,7 +14,7 @@
         <img src="/loras_static/images/theme-toggle.svg" alt="Theme">
     </div>
     
-    <!-- 添加模态窗口 -->
+    <!-- Model details Modal -->
     <div id="loraModal" class="modal"></div>
     
     <div id="loading-overlay" class="loading-overlay" style="display: none;">