feat: Update media query breakpoints from 2000px to 2150px for improved responsiveness across components

This commit is contained in:
Will Miao
2025-08-27 09:54:08 +08:00
parent 94ed81de5e
commit 01843b8f2b
6 changed files with 8 additions and 8 deletions

View File

@@ -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;
}

View File

@@ -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;
}

View File

@@ -20,7 +20,7 @@
}
/* Responsive header container for larger screens */
@media (min-width: 2000px) {
@media (min-width: 2150px) {
.header-container {
max-width: 1800px;
}

View File

@@ -366,7 +366,7 @@
}
/* Responsive Design */
@media (min-width: 2000px) {
@media (min-width: 2150px) {
.folder-sidebar {
width: 280px;
left: 0px;

View File

@@ -16,7 +16,7 @@
}
/* Responsive container for larger screens */
@media (min-width: 2000px) {
@media (min-width: 2150px) {
.container {
max-width: 1800px;
}

View File

@@ -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') {