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) */ /* Responsive adjustments for 1440p screens (2K) */
@media (min-width: 2000px) { @media (min-width: 2150px) {
.card-grid { .card-grid {
max-width: 1800px; /* Increased for 2K screens */ max-width: 1800px; /* Increased for 2K screens */
grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
@@ -525,7 +525,7 @@
} }
/* For larger screens, allow more space for the cards */ /* For larger screens, allow more space for the cards */
@media (min-width: 2000px) { @media (min-width: 2150px) {
.card-grid.virtual-scroll { .card-grid.virtual-scroll {
max-width: 1800px; max-width: 1800px;
} }

View File

@@ -27,7 +27,7 @@
} }
/* Responsive container for larger screens - match container in layout.css */ /* Responsive container for larger screens - match container in layout.css */
@media (min-width: 2000px) { @media (min-width: 2150px) {
.duplicates-banner .banner-content { .duplicates-banner .banner-content {
max-width: 1800px; max-width: 1800px;
} }
@@ -130,7 +130,7 @@
} }
/* Add responsive container adjustments for duplicate groups - match container in banner */ /* Add responsive container adjustments for duplicate groups - match container in banner */
@media (min-width: 2000px) { @media (min-width: 2150px) {
.duplicate-group { .duplicate-group {
max-width: 1800px; max-width: 1800px;
} }

View File

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

View File

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

View File

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

View File

@@ -117,7 +117,7 @@ export class VirtualScroller {
maxColumns = 10; maxColumns = 10;
} }
maxGridWidth = 2400; // Match exact CSS container width for 4K 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') { if (displayDensity === 'default') {
maxColumns = 6; maxColumns = 6;
} else if (displayDensity === 'medium') { } else if (displayDensity === 'medium') {