(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
Increase overall app layout width and add more columns to masonry feeds on larger screens.
+5
-5
+2
-2
web/src/components/feed/MasonryFeed.tsx
+2
-2
web/src/components/feed/MasonryFeed.tsx
···
107
107
}
108
108
109
109
return (
110
-
<div className="columns-1 sm:columns-2 gap-4 animate-fade-in">
110
+
<div className="columns-1 sm:columns-2 xl:columns-3 2xl:columns-4 gap-4 animate-fade-in">
111
111
{items.map((item) => (
112
112
<div key={item.uri || item.cid} className="break-inside-avoid mb-4">
113
113
<Card item={item} onDelete={handleDelete} />
···
141
141
: [{ id: "global", label: "Global" }];
142
142
143
143
return (
144
-
<div className="max-w-2xl mx-auto">
144
+
<div className="mx-auto max-w-2xl xl:max-w-none">
145
145
{title && (
146
146
<h1 className="text-3xl font-display font-bold text-surface-900 dark:text-white mb-6 text-center lg:text-left">
147
147
{title}
+1
-1
web/src/layouts/AppLayout.tsx
+1
-1
web/src/layouts/AppLayout.tsx
···
17
17
<Sidebar />
18
18
19
19
<div className="flex-1 min-w-0 transition-all duration-200">
20
-
<div className="flex w-full max-w-[1200px] mx-auto">
20
+
<div className="flex w-full max-w-[1800px] mx-auto">
21
21
<main className="flex-1 w-full min-w-0 py-6 px-3 md:px-5 lg:px-8 pb-20 md:pb-6">
22
22
{children}
23
23
</main>
+2
-2
web/src/views/core/Feed.tsx
+2
-2
web/src/views/core/Feed.tsx
···
132
132
if (layout === "mosaic") {
133
133
return (
134
134
<>
135
-
<div className="columns-1 sm:columns-2 gap-4 animate-fade-in">
135
+
<div className="columns-1 sm:columns-2 xl:columns-3 2xl:columns-4 gap-4 animate-fade-in">
136
136
{items.map((item) => (
137
137
<div key={item.uri || item.cid} className="break-inside-avoid mb-4">
138
138
<Card item={item} onDelete={handleDelete} />
···
202
202
];
203
203
204
204
return (
205
-
<div className="max-w-2xl mx-auto">
205
+
<div className="mx-auto max-w-2xl xl:max-w-none">
206
206
{!user && (
207
207
<div className="text-center py-10 px-6 mb-4 animate-fade-in">
208
208
<h1 className="text-2xl font-display font-bold mb-2 tracking-tight text-surface-900 dark:text-white">