adjustable card/font size

frontend/js/ui.js

@@ -28,6 +28,29 @@ App.ui = App.ui || {};
         if (select) select.value = density;
     };
 
+    // Card Size: re-packs the virtual grid (column count derives from the scaled
+    // minimum card width in videos.js).
+    App.ui.applyCardScale = function() {
+        const scale = App.storage.getCardScale();
+        const range = document.getElementById('card-size-range');
+        if (range) range.value = scale;
+        if (App.virtualGrid && typeof App.virtualGrid.relayout === 'function') {
+            App.virtualGrid.relayout();
+        }
+    };
+
+    // Text Size: drives the --card-font-scale CSS variable; a re-pack follows so
+    // card heights account for the new text size.
+    App.ui.applyFontScale = function() {
+        const scale = App.storage.getFontScale();
+        document.documentElement.style.setProperty('--card-font-scale', scale);
+        const range = document.getElementById('text-size-range');
+        if (range) range.value = scale;
+        if (App.virtualGrid && typeof App.virtualGrid.relayout === 'function') {
+            App.virtualGrid.relayout();
+        }
+    };
+
     // Toast helper for playback + network errors.
     App.ui.showError = function(message) {
         const toast = document.getElementById('error-toast');
@@ -305,6 +328,24 @@ App.ui = App.ui || {};
             };
         }
 
+        const cardSizeRange = document.getElementById('card-size-range');
+        if (cardSizeRange) {
+            cardSizeRange.value = App.storage.getCardScale();
+            cardSizeRange.oninput = () => {
+                App.storage.setCardScale(cardSizeRange.value);
+                App.ui.applyCardScale();
+            };
+        }
+
+        const textSizeRange = document.getElementById('text-size-range');
+        if (textSizeRange) {
+            textSizeRange.value = App.storage.getFontScale();
+            textSizeRange.oninput = () => {
+                App.storage.setFontScale(textSizeRange.value);
+                App.ui.applyFontScale();
+            };
+        }
+
         const feedEndSelect = document.getElementById('feed-end-select');
         if (feedEndSelect) {
             feedEndSelect.value = App.storage.getFeedEndBehavior();