feat(ui): limit width of layer cards to a third of the grid (#502)

LucasMrqes · web-flow · commit bc773de912f3 · 2025-01-16T12:12:23.000+01:00
diff --git a/ui/src/pages/Layers.tsx b/ui/src/pages/Layers.tsx
@@ -390,7 +390,7 @@ const Layers: React.FC = () => {
         `}
       >
         {view === 'grid' ? (
-          <div className="grid grid-cols-[repeat(auto-fit,_minmax(400px,_1fr))] p-6 gap-6">
+          <div className="grid grid-cols-[repeat(auto-fit,_minmax(400px,calc(100%/3)))] p-6 gap-6">
             {layersQuery.isLoading ? (
               Array.from({ length: 100 }).map((_, index) => (
                 <CardLoader key={index} variant={theme} />

Original file line number	Diff line number	Diff line change
`@@ -390,7 +390,7 @@ const Layers: React.FC = () => {`
`390`	`390`	`}
`391`	`391`	`>`
`392`	`392`	`{view === 'grid' ? (`
`393`		`- <div className="grid grid-cols-[repeat(auto-fit,_minmax(400px,_1fr))] p-6 gap-6">`
	`393`	`+ <div className="grid grid-cols-[repeat(auto-fit,_minmax(400px,calc(100%/3)))] p-6 gap-6">`
`394`	`394`	`{layersQuery.isLoading ? (`
`395`	`395`	`Array.from({ length: 100 }).map((_, index) => (`
`396`	`396`	`<CardLoader key={index} variant={theme} />`