leaflet.pub
a tool for shared writing and social publishing
side scroll the pub list
cozylittle.house
+28
-16
+26
-14
app/p/[didOrHandle]/(profile)/ProfileHeader.tsx
+26
-14
app/p/[didOrHandle]/(profile)/ProfileHeader.tsx
···
25
25
className="mx-auto -mt-8"
26
26
giant
27
27
/>
28
-
<div className="px-3 sm:px-4 flex flex-col">
29
-
<h3 className="pt-2 leading-tight">
28
+
<div className="flex flex-col">
29
+
<h3 className=" px-3 sm:px-4 pt-2 leading-tight">
30
30
{profileRecord.displayName
31
31
? profileRecord.displayName
32
32
: `@${props.profile.handle}`}
33
33
</h3>
34
34
{profileRecord.displayName && (
35
-
<div className="text-tertiary text-sm pb-1 italic">
35
+
<div className="text-tertiary text-sm pb-1 italic px-3 sm:px-4 truncate">
36
36
@{props.profile.handle}
37
37
</div>
38
38
)}
39
-
<div className="text-secondary">{profileRecord.description}</div>
40
-
<div className="flex flex-row gap-2 mx-auto my-3">
41
-
{props.publications.map((p) => (
42
-
<PublicationCard
43
-
record={p.record as PubLeafletPublication.Record}
44
-
uri={p.uri}
45
-
/>
46
-
))}
39
+
<div className="text-secondary px-3 sm:px-4 ">
40
+
{profileRecord.description}
41
+
</div>
42
+
<div className=" w-full overflow-x-scroll mt-3 mb-6 ">
43
+
<div className="grid grid-flow-col auto-cols-[164px] sm:auto-cols-[240px] gap-2 mx-auto w-fit px-3 sm:px-4 ">
44
+
{/*<div className="spacer "/>*/}
45
+
{props.publications.map((p) => (
46
+
<PublicationCard
47
+
record={p.record as PubLeafletPublication.Record}
48
+
uri={p.uri}
49
+
/>
50
+
))}
51
+
</div>
47
52
</div>
48
53
</div>
49
54
</>
···
55
60
uri: string;
56
61
}) => {
57
62
const { record, uri } = props;
58
-
const { bgLeaflet, bgPage } = usePubTheme(record.theme);
63
+
const { bgLeaflet, bgPage, primary } = usePubTheme(record.theme);
59
64
60
65
return (
61
66
<a
62
67
href={`https://${record.base_path}`}
63
-
className="border border-border p-2 rounded-lg hover:no-underline!"
68
+
className="border border-border p-2 rounded-lg hover:no-underline! text-primary basis-1/2"
64
69
style={{ backgroundColor: `rgb(${colorToString(bgLeaflet, "rgb")})` }}
65
70
>
66
71
<div
···
72
77
}}
73
78
>
74
79
<PubIcon record={record} uri={uri} />
75
-
<h4>{record.name}</h4>
80
+
<h4
81
+
className="truncate min-w-0"
82
+
style={{
83
+
color: `rgb(${colorToString(primary, "rgb")})`,
84
+
}}
85
+
>
86
+
{record.name}
87
+
</h4>
76
88
</div>
77
89
</a>
78
90
);
+1
-1
app/p/[didOrHandle]/(profile)/ProfileTabs.tsx
+1
-1
app/p/[didOrHandle]/(profile)/ProfileTabs.tsx
···
41
41
return (
42
42
<SpeedyLink
43
43
href={props.href}
44
-
className={`pubTabs px-1 py-0 flex gap-1 items-center rounded-md hover:cursor-pointer ${
44
+
className={`pubTabs px-1 py-0 flex gap-1 items-center rounded-md hover:cursor-pointer hover:no-underline! ${
45
45
props.selected
46
46
? "text-accent-2 bg-accent-1 font-bold -mb-px"
47
47
: "text-tertiary"
+1
-1
components/ActionBar/Publications.tsx
+1
-1
components/ActionBar/Publications.tsx
···
193
193
194
194
return props.record.icon ? (
195
195
<div
196
-
className={`${iconSizeClassName} ${props.className} relative overflow-hidden`}
196
+
className={`${iconSizeClassName} ${props.className} relative overflow-hidden shrink-0`}
197
197
>
198
198
<img
199
199
src={`/api/atproto_images?did=${new AtUri(props.uri).host}&cid=${(props.record.icon?.ref as unknown as { $link: string })["$link"]}`}