Minor chnages
This commit is contained in:
@@ -155,12 +155,12 @@ export default function Home() {
|
||||
|
||||
// Dynamische Berechnung der Anzahl der Items pro Seite basierend auf der Fensterbreite
|
||||
const calculateItemsPerPage = () => {
|
||||
const cardHeight = 250; // Höhe einer Karte (inkl. Margin/Padding)
|
||||
const paginationHeight = 50; // Höhe der Pagination
|
||||
const availableHeight = window.innerHeight - paginationHeight - 60; // Verfügbare Höhe (inkl. Padding)
|
||||
const itemsPerRow = Math.floor(window.innerWidth / 220); // Karten pro Zeile (220px Breite inkl. Margin)
|
||||
const rows = Math.floor(availableHeight / cardHeight); // Maximale Anzahl an vollständigen Reihen
|
||||
return itemsPerRow * rows;
|
||||
const cardHeight = 220; // Höhe einer Karte (inkl. Margin/Padding)
|
||||
const paginationHeight = 60; // Höhe der Pagination
|
||||
const availableHeight = window.innerHeight - paginationHeight - 60; // Verfügbare Höhe (inkl. Padding)
|
||||
const itemsPerRow = Math.floor(window.innerWidth / 220); // Karten pro Zeile (220px Breite inkl. Margin)
|
||||
const rows = Math.floor(availableHeight / cardHeight); // Maximale Anzahl an vollständigen Reihen
|
||||
return itemsPerRow * rows;
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
@@ -49,7 +49,7 @@
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Dynamische Spalten */
|
||||
padding: 16px;
|
||||
margin: 0 auto;
|
||||
max-height: calc(100vh - 300px); /* Dynamische Höhe, abhängig von der Pagination */
|
||||
max-height: calc(100vh - 100px); /* Dynamische Höhe, abhängig von der Pagination */
|
||||
box-sizing: border-box; /* Stellt sicher, dass Padding in die Breite einbezogen wird */
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user