Write on the margins of 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
··· 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
··· 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
··· 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">