page load optimization and pagination changes

app/static/js/dynamic_gallery_paging.js

@@ -0,0 +1,26 @@
+document.addEventListener("DOMContentLoaded", function () {
+  const url = new URL(window.location.href);
+  const page = url.searchParams.get("page") || "1";
+  const perPage = url.searchParams.get("per_page");
+
+  if (page !== "1" || perPage) return;
+
+  const grid = document.querySelector(".gallery-grid");
+  if (!grid) return;
+
+  const sample = grid.querySelector(".gallery-item");
+  if (!sample) return;
+
+  const gridStyle = window.getComputedStyle(grid);
+  const gridGap = parseFloat(gridStyle.getPropertyValue("gap")) || 0;
+  const sampleWidth = sample.getBoundingClientRect().width + gridGap;
+  const containerWidth = grid.getBoundingClientRect().width;
+
+  const columns = Math.floor(containerWidth / sampleWidth);
+  const calculatedPerPage = columns * 5;
+
+  url.searchParams.set("per_page", calculatedPerPage);
+  url.searchParams.set("page", "1");
+
+  window.location.replace(url.toString());
+});

app/static/js/modal-pagination.js

@@ -1,3 +1,4 @@
+// /app/static/js/modal-pagination.js
 document.addEventListener('DOMContentLoaded', () => {
   const modal = document.getElementById('imageModal');
   const modalImage = document.getElementById('modalImage');