github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix calendar layout distortion because of scrollbar (#3770)

Browse Source
This commit is contained in:
rahulramesha 2024-02-23 19:06:47 +05:30 committed by GitHub
parent 9f055840ef
commit 5f6c9a4166
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 40 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/components/issues/issue-layouts/calendar/calendar.tsx
View File

@ -73,8 +73,9 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
<> <>
<div className="flex h-full w-full flex-col overflow-hidden"> <div className="flex h-full w-full flex-col overflow-hidden">
<CalendarHeader issuesFilterStore={issuesFilterStore} viewId={viewId} /> <CalendarHeader issuesFilterStore={issuesFilterStore} viewId={viewId} />
<div className="flex h-full w-full vertical-scrollbar scrollbar-lg flex-col">
<CalendarWeekHeader isLoading={!issues} showWeekends={showWeekends} /> <CalendarWeekHeader isLoading={!issues} showWeekends={showWeekends} />
<div className="h-full w-full overflow-y-auto vertical-scrollbar scrollbar-lg"> <div className="h-full w-full">
{layout === "month" && ( {layout === "month" && (
<div className="grid h-full w-full grid-cols-1 divide-y-[0.5px] divide-custom-border-200"> <div className="grid h-full w-full grid-cols-1 divide-y-[0.5px] divide-custom-border-200">
{allWeeksOfActiveMonth && {allWeeksOfActiveMonth &&
@ -111,6 +112,7 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
)} )}
</div> </div>
</div> </div>
</div>
</> </>
); );
}); });

2
web/components/issues/issue-layouts/calendar/day-tile.tsx
View File

@ -91,7 +91,7 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
snapshot.isDraggingOver || date.date.getDay() === 0 || date.date.getDay() === 6 snapshot.isDraggingOver || date.date.getDay() === 0 || date.date.getDay() === 6
? "bg-custom-background-90" ? "bg-custom-background-90"
: "bg-custom-background-100" : "bg-custom-background-100"
} ${calendarLayout === "month" ? "min-h-[9rem]" : ""}`} } ${calendarLayout === "month" ? "min-h-[5rem]" : ""}`}
{...provided.droppableProps} {...provided.droppableProps}
ref={provided.innerRef} ref={provided.innerRef}
> >

2
web/components/issues/issue-layouts/calendar/week-header.tsx
View File

@ -13,7 +13,7 @@ export const CalendarWeekHeader: React.FC<Props> = observer((props) => {
return ( return (
<div <div
className={`relative grid divide-x-[0.5px] divide-custom-border-200 text-sm font-medium ${ className={`relative sticky top-0 z-[1] grid divide-x-[0.5px] divide-custom-border-200 text-sm font-medium ${
showWeekends ? "grid-cols-7" : "grid-cols-5" showWeekends ? "grid-cols-7" : "grid-cols-5"
}`} }`}
> >