starred/Thingport
1
0 Fork 0
mirror of https://github.com/TautvydasDerzinskas/Thingport.git synced 2026-10-18 20:59:55 -05:00
Code Issues Packages Projects Releases 8 Wiki Activity

fix: grid column changes responsive

Browse Source
This commit is contained in:
Tautvydas Derzinskas committed 2026-09-11 14:17:37 +02:00
1 parent cefc27f23f
commit 6df320f106
2 files changed
+26 -4
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/pages/CollectionDetailPage/index.tsx
+13 -2
View File
@@ -135,7 +135,7 @@ export default function CollectionDetailPage({ theme, previewMode, onUnauthorize
}
return (
<Stack spacing={2}>
<Stack spacing={2} sx={{ maxWidth: "1920px", mx: "auto" }}>
{collection.description && (
<Typography variant="body2" color="text.secondary">{collection.description}</Typography>
)}
@@ -144,7 +144,18 @@ export default function CollectionDetailPage({ theme, previewMode, onUnauthorize
</Box>
{items.length ? (
<Stack spacing={2}>
<Box sx={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", columnGap: "20px", rowGap: "20px" }}>
<Box
sx={{
display: "grid",
gridTemplateColumns: "repeat(6, 1fr)",
columnGap: "20px",
rowGap: "20px",
"@media (max-width: 1979px)": { gridTemplateColumns: "repeat(5, 1fr)" },
"@media (max-width: 1684px)": { gridTemplateColumns: "repeat(4, 1fr)" },
"@media (max-width: 1404px)": { gridTemplateColumns: "repeat(3, 1fr)" },
"@media (max-width: 1124px)": { gridTemplateColumns: "repeat(2, 1fr)" },
}}
>
{items.map(item => (
<ModelCard
key={item.id}
frontend/src/pages/ModelsPage/index.tsx
+13 -2
View File
@@ -186,7 +186,7 @@ export default function ModelsPage({ folderId, onSelectFolder, foldersVersion, o
};
return (
<Stack spacing={2}>
<Stack spacing={2} sx={{ maxWidth: "1920px", mx: "auto" }}>
<Box sx={{ display: "flex", justifyContent: "flex-end" }}>
<SortTabs value={sortMode} onChange={setSortMode} />
</Box>
@@ -214,7 +214,18 @@ export default function ModelsPage({ folderId, onSelectFolder, foldersVersion, o
</Stack>
) : items.length ? (
<Stack spacing={2}>
<Box sx={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", columnGap: "20px", rowGap: "20px" }}>
<Box
sx={{
display: "grid",
gridTemplateColumns: "repeat(5, 1fr)",
columnGap: "20px",
rowGap: "20px",
"@media (max-width: 1979px)": { gridTemplateColumns: "repeat(4, 1fr)" },
"@media (max-width: 1684px)": { gridTemplateColumns: "repeat(3, 1fr)" },
"@media (max-width: 1404px)": { gridTemplateColumns: "repeat(2, 1fr)" },
"@media (max-width: 1124px)": { gridTemplateColumns: "repeat(1, 1fr)" },
}}
>
{items.map(item => (
<ModelCard
key={item.id}