pleb/flockstr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixing card overflow

Browse Source
This commit is contained in:
zmeyer44 2023-11-01 20:46:07 -04:00
parent 5e3bad1855
commit 67ef662e3e
2 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/Cards/CalendarEvent/LargeFeedCard.tsx
View File

@ -46,13 +46,13 @@ export default function LargeFeedCard({ event }: LargeFeedCardProps) {
: null;
return (
<Card className="relative flex justify-between gap-x-4 rounded-[1rem] bg-muted p-[0.5rem]">
<Card className="relative flex justify-between gap-x-4 overflow-hidden rounded-[1rem] bg-muted p-[0.5rem]">
<CardHeader className="w-3/5 justify-between p-0 pr-5">
<div className="">
<div className="flex">
<SmallProfileLine pubkey={pubkey} />
</div>
<div className="pl-3">
<div className="overflow-hidden pl-3">
<CardTitle className="mt-3 line-clamp-2 text-xl leading-6">
{getTagValues("name", tags)}
</CardTitle>
@ -61,7 +61,7 @@ export default function LargeFeedCard({ event }: LargeFeedCardProps) {
</CardDescription>
</div>
</div>
<div className="flex items-center gap-x-4 pl-2">
<div className="flex flex-wrap items-center gap-x-4 overflow-hidden pl-2">
{!!users.length && (
<div className="flex shrink-0 items-center gap-x-1.5">
<HiOutlineUserCircle className="h-4 w-4 text-primary" />

4
containers/EventsTimeline/CalendarSection.tsx
View File

@ -28,7 +28,7 @@ export default function CalendarSection({ events }: CalendarSectionProps) {
const startDate = fromUnix(parseInt(startDateUnix));
return (
<div className="relative flex w-full items-start gap-x-3 @container">
<div className="relative flex w-full max-w-full items-start gap-x-3 @container">
{/* Date Indicator */}
<div className="sticky top-[calc(var(--header-height)_+_28px)] hidden w-[230px] shrink-0 md:block">
<CalendarIcon date={startDate} />
@ -41,7 +41,7 @@ export default function CalendarSection({ events }: CalendarSectionProps) {
</div>
{/* Events */}
<div className="flex-1 space-y-4 max-md:pt-[60px]">
<div className="max-w-full flex-1 space-y-4 overflow-x-hidden max-md:pt-[60px]">
{events.map((e) => (
<LargeFeedCard key={e.id} event={e} />
))}