Add compact mode settings and styles for improved layout control. Fixes #33

static/css/components/card.css

@@ -84,6 +84,26 @@
     min-height: 0; /* Fix for potential flexbox sizing issue in Firefox */
 }
 
+/* Smaller text for compact mode */
+.compact-mode .model-name {
+    font-size: 0.9em;
+    max-height: 2.4em;
+}
+
+.compact-mode .base-model-label {
+    font-size: 0.8em;
+    max-width: 110px;
+}
+
+.compact-mode .card-actions i {
+    font-size: 0.95em;
+    padding: 3px;
+}
+
+.compact-mode .model-info {
+    padding-bottom: 2px;
+}
+
 .card-preview img,
 .card-preview video {
     width: 100%;

static/css/components/modal.css

@@ -673,3 +673,13 @@ input:checked + .toggle-slider:before {
 .changelog-item a:hover {
     text-decoration: underline;
 }
+
+/* Add warning text style for settings */
+.warning-text {
+    color: var(--lora-warning, #e67e22);
+    font-weight: 500;
+}
+
+[data-theme="dark"] .warning-text {
+    color: var(--lora-warning, #f39c12);
+}

static/js/managers/SettingsManager.js

@@ -26,6 +26,11 @@ export class SettingsManager {
         if (savedSettings) {
             state.global.settings = { ...state.global.settings, ...savedSettings };
         }
+        
+        // Initialize default values for new settings if they don't exist
+        if (state.global.settings.compactMode === undefined) {
+            state.global.settings.compactMode = false;
+        }
     }
 
     initialize() {
@@ -77,6 +82,12 @@ export class SettingsManager {
             autoplayOnHoverCheckbox.checked = state.global.settings.autoplayOnHover || false;
         }
         
+        // Set compact mode setting
+        const compactModeCheckbox = document.getElementById('compactMode');
+        if (compactModeCheckbox) {
+            compactModeCheckbox.checked = state.global.settings.compactMode || false;
+        }
+
         // Load default lora root
         await this.loadLoraRoots();
         
@@ -149,6 +160,8 @@ export class SettingsManager {
             state.global.settings.autoplayOnHover = value;
         } else if (settingKey === 'optimize_example_images') {
             state.global.settings.optimizeExampleImages = value;
+        } else if (settingKey === 'compact_mode') {
+            state.global.settings.compactMode = value;
         } else {
             // For any other settings that might be added in the future
             state.global.settings[settingKey] = value;
@@ -185,6 +198,12 @@ export class SettingsManager {
                 this.reloadContent();
             }
             
+            // Recalculate layout when compact mode changes
+            if (settingKey === 'compact_mode' && state.virtualScroller) {
+                state.virtualScroller.calculateLayout();
+                showToast(`Compact Mode ${value ? 'enabled' : 'disabled'}`, 'success');
+            }
+            
         } catch (error) {
             showToast('Failed to save setting: ' + error.message, 'error');
         }

static/js/utils/VirtualScroller.js

@@ -88,26 +88,42 @@ export class VirtualScroller {
         // Calculate available content width (excluding padding)
         const availableContentWidth = containerWidth - paddingLeft - paddingRight;
         
-        // Calculate ideal card width based on breakpoints
+        // Get compact mode setting
-        let baseCardWidth = 260; // Default for 1080p
+        const compactMode = state.global.settings?.compactMode || false;
         
-        // Adjust card width based on screen width
+        // Set exact column counts and grid widths to match CSS container widths
+        let maxColumns, maxGridWidth;
+        
+        // Match exact column counts and CSS container width values
         if (window.innerWidth >= 3000) { // 4K
-            baseCardWidth = 280;
+            maxColumns = compactMode ? 10 : 8;
+            maxGridWidth = 2400; // Match exact CSS container width for 4K
         } else if (window.innerWidth >= 2000) { // 2K/1440p
-            baseCardWidth = 270;
+            maxColumns = compactMode ? 8 : 6;
+            maxGridWidth = 1800; // Match exact CSS container width for 2K
+        } else {
+            // 1080p
+            maxColumns = compactMode ? 7 : 5;
+            maxGridWidth = 1400; // Match exact CSS container width for 1080p
         }
         
-        // Calculate how many columns can fit
+        // Calculate baseCardWidth based on desired column count and available space
-        const maxGridWidth = window.innerWidth >= 3000 ? 2400 : // 4K
+        // Formula: (maxGridWidth - (columns-1)*gap) / columns
-                           window.innerWidth >= 2000 ? 1800 : // 2K
+        const baseCardWidth = (maxGridWidth - ((maxColumns - 1) * this.columnGap)) / maxColumns;
-                           1400; // 1080p
         
         // Use the smaller of available content width or max grid width
         const actualGridWidth = Math.min(availableContentWidth, maxGridWidth);
         
-        // Calculate column count based on available width and card width
+        // Set exact column count based on screen size and mode
-        this.columnsCount = Math.max(1, Math.floor((actualGridWidth + this.columnGap) / (baseCardWidth + this.columnGap)));
+        this.columnsCount = maxColumns;
+        
+        // When available width is smaller than maxGridWidth, recalculate columns
+        if (availableContentWidth < maxGridWidth) {
+            // Calculate how many columns can fit in the available space
+            this.columnsCount = Math.max(1, Math.floor(
+                (availableContentWidth + this.columnGap) / (baseCardWidth + this.columnGap)
+            ));
+        }
         
         // Calculate actual item width
         this.itemWidth = (actualGridWidth - (this.columnsCount - 1) * this.columnGap) / this.columnsCount;
@@ -129,12 +145,22 @@ export class VirtualScroller {
             leftOffset: this.leftOffset,
             paddingLeft,
             paddingRight,
-            rowGap: this.rowGap // Log row gap for debugging
+            compactMode,
+            maxColumns,
+            baseCardWidth,
+            rowGap: this.rowGap
         });
 
         // Update grid element max-width to match available width
         this.gridElement.style.maxWidth = `${actualGridWidth}px`;
         
+        // Add or remove compact-mode class for style adjustments
+        if (compactMode) {
+            this.gridElement.classList.add('compact-mode');
+        } else {
+            this.gridElement.classList.remove('compact-mode');
+        }
+        
         // Update spacer height
         this.updateSpacerHeight();
         

templates/components/modals.html

@@ -154,6 +154,29 @@
                 </div>
             </div>
             
+            <!-- Add Layout Settings Section -->
+            <div class="settings-section">
+                <h3>Layout Settings</h3>
+                
+                <div class="setting-item">
+                    <div class="setting-row">
+                        <div class="setting-info">
+                            <label for="compactMode">Compact Mode</label>
+                        </div>
+                        <div class="setting-control">
+                            <label class="toggle-switch">
+                                <input type="checkbox" id="compactMode" 
+                                       onchange="settingsManager.saveToggleSetting('compactMode', 'compact_mode')">
+                                <span class="toggle-slider"></span>
+                            </label>
+                        </div>
+                    </div>
+                    <div class="input-help">
+                        Display more cards per row (7 on 1080p, 8 on 2K, 10 on 4K). <span class="warning-text">Warning: May cause performance issues (lag and lower FPS) on systems with limited resources.</span>
+                    </div>
+                </div>
+            </div>
+            
             <!-- Add Example Images Settings Section -->
             <div class="settings-section">
                 <h3>Example Images</h3>