From 01843b8f2b4f321fba6564fddc25b13380ba369c Mon Sep 17 00:00:00 2001
From: Will Miao <13051207myq@gmail.com>
Date: Wed, 27 Aug 2025 09:54:08 +0800
Subject: [PATCH] feat: Update media query breakpoints from 2000px to 2150px
 for improved responsiveness across components

---
 static/css/components/card.css       | 4 ++--
 static/css/components/duplicates.css | 4 ++--
 static/css/components/header.css     | 2 +-
 static/css/components/sidebar.css    | 2 +-
 static/css/layout.css                | 2 +-
 static/js/utils/VirtualScroller.js   | 2 +-
 6 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/static/css/components/card.css b/static/css/components/card.css
index 7cb415d8..cf63df36 100644
--- a/static/css/components/card.css
+++ b/static/css/components/card.css
@@ -41,7 +41,7 @@
 }
 
 /* Responsive adjustments for 1440p screens (2K) */
-@media (min-width: 2000px) {
+@media (min-width: 2150px) {
     .card-grid {
         max-width: 1800px; /* Increased for 2K screens */
         grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
@@ -525,7 +525,7 @@
 }
 
 /* For larger screens, allow more space for the cards */
-@media (min-width: 2000px) {
+@media (min-width: 2150px) {
     .card-grid.virtual-scroll {
         max-width: 1800px;
     }
diff --git a/static/css/components/duplicates.css b/static/css/components/duplicates.css
index d521b3c4..982155ce 100644
--- a/static/css/components/duplicates.css
+++ b/static/css/components/duplicates.css
@@ -27,7 +27,7 @@
 }
 
 /* Responsive container for larger screens - match container in layout.css */
-@media (min-width: 2000px) {
+@media (min-width: 2150px) {
     .duplicates-banner .banner-content {
         max-width: 1800px;
     }
@@ -130,7 +130,7 @@
 }
 
 /* Add responsive container adjustments for duplicate groups - match container in banner */
-@media (min-width: 2000px) {
+@media (min-width: 2150px) {
     .duplicate-group {
         max-width: 1800px;
     }
diff --git a/static/css/components/header.css b/static/css/components/header.css
index 05ca0503..d0e7bd8e 100644
--- a/static/css/components/header.css
+++ b/static/css/components/header.css
@@ -20,7 +20,7 @@
 }
 
 /* Responsive header container for larger screens */
-@media (min-width: 2000px) {
+@media (min-width: 2150px) {
   .header-container {
     max-width: 1800px;
   }
diff --git a/static/css/components/sidebar.css b/static/css/components/sidebar.css
index 077870e3..aacf57ae 100644
--- a/static/css/components/sidebar.css
+++ b/static/css/components/sidebar.css
@@ -366,7 +366,7 @@
 }
 
 /* Responsive Design */
-@media (min-width: 2000px) {
+@media (min-width: 2150px) {
     .folder-sidebar {
         width: 280px;
         left: 0px;
diff --git a/static/css/layout.css b/static/css/layout.css
index 7ee105a7..17eb2014 100644
--- a/static/css/layout.css
+++ b/static/css/layout.css
@@ -16,7 +16,7 @@
 }
 
 /* Responsive container for larger screens */
-@media (min-width: 2000px) {
+@media (min-width: 2150px) {
     .container {
         max-width: 1800px;
     }
diff --git a/static/js/utils/VirtualScroller.js b/static/js/utils/VirtualScroller.js
index 0d614211..6c0f6fa1 100644
--- a/static/js/utils/VirtualScroller.js
+++ b/static/js/utils/VirtualScroller.js
@@ -117,7 +117,7 @@ export class VirtualScroller {
                 maxColumns = 10;
             }
             maxGridWidth = 2400; // Match exact CSS container width for 4K
-        } else if (window.innerWidth >= 2000) { // 2K/1440p
+        } else if (window.innerWidth >= 2150) { // 2K/1440p
             if (displayDensity === 'default') {
                 maxColumns = 6;
             } else if (displayDensity === 'medium') {