grain.social is a photo sharing platform built on atproto.
grain.social
atproto
photography
appview
update styles
+20
-10
+12
-7
main.tsx
+12
-7
main.tsx
···
1465
1465
return (
1466
1466
<div class="px-4">
1467
1467
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between my-4">
1468
-
<div class="flex flex-col space-y-1">
1468
+
<div class="flex flex-col space-y-1 mb-4">
1469
1469
<h1 class="font-bold text-2xl">
1470
1470
{(gallery.record as Gallery).title}
1471
1471
</h1>
···
1867
1867
}>) {
1868
1868
return (
1869
1869
<Dialog id="photo-select-dialog" class="z-30">
1870
-
<Dialog.Content class="w-full max-w-5xl dark:bg-zinc-950 min-h-screen flex flex-col">
1870
+
<Dialog.Content class="w-full max-w-5xl dark:bg-zinc-950 sm:min-h-screen flex flex-col">
1871
1871
<Dialog.Title>Add photos</Dialog.Title>
1872
-
<p class="my-2 text-center">
1873
-
Choose photos to add/remove from your gallery. Click close when done.
1874
-
</p>
1875
-
{photos?.length
1872
+
{photos.length
1873
+
? (
1874
+
<p class="my-2 text-center">
1875
+
Choose photos to add/remove from your gallery. Click close when
1876
+
done.
1877
+
</p>
1878
+
)
1879
+
: null}
1880
+
{photos.length
1876
1881
? (
1877
1882
<div class="grid grid-cols-2 sm:grid-cols-3 gap-4 my-4 flex-1">
1878
1883
{photos.map((photo) => (
···
1886
1891
</div>
1887
1892
)
1888
1893
: (
1889
-
<div class="flex-1 flex justify-center items-center">
1894
+
<div class="flex-1 flex justify-center items-center my-30">
1890
1895
<p>
1891
1896
No photos yet.{" "}
1892
1897
<a
+8
-3
static/styles.css
+8
-3
static/styles.css
···
275
275
.my-4 {
276
276
margin-block: calc(var(--spacing) * 4);
277
277
}
278
+
.my-30 {
279
+
margin-block: calc(var(--spacing) * 30);
280
+
}
278
281
.mt-2 {
279
282
margin-top: calc(var(--spacing) * 2);
280
283
}
···
336
339
}
337
340
.h-full {
338
341
height: 100%;
339
-
}
340
-
.min-h-screen {
341
-
min-height: 100vh;
342
342
}
343
343
.w-1\/3 {
344
344
width: calc(1/3 * 100%);
···
610
610
.sm\:h-screen {
611
611
@media (width >= 40rem) {
612
612
height: 100vh;
613
+
}
614
+
}
615
+
.sm\:min-h-screen {
616
+
@media (width >= 40rem) {
617
+
min-height: 100vh;
613
618
}
614
619
}
615
620
.sm\:w-fit {