thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

[WEB-1046] fix: user activity overflow & repsonsiveness (#4262)

Browse Source 
* fix: activity responsiveness

* fix: activity icon placement

* fix: build
This commit is contained in:
Lakhan Baheti 2024-04-24 15:20:32 +05:30 committed by GitHub
parent deaa63488b
commit b711fedb65
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 84 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
web/components/core/activity.tsx
View File

@ -46,10 +46,10 @@ export const IssueLink = ({ activity }: { activity: IIssueActivity }) => {
}`}`} }`}`}
target={activity.issue === null ? "_self" : "_blank"} target={activity.issue === null ? "_self" : "_blank"}
rel={activity.issue === null ? "" : "noopener noreferrer"} rel={activity.issue === null ? "" : "noopener noreferrer"}
className="font-medium text-custom-text-100 hover:underline" className="inline items-center gap-1 font-medium text-custom-text-100 hover:underline"
> >
<span className="whitespace-nowrap">{`${activity.project_detail.identifier}-${activity.issue_detail.sequence_id}`}</span>{" "} <span className="whitespace-nowrap">{`${activity.project_detail.identifier}-${activity.issue_detail.sequence_id}`}</span>{" "}
<span className="font-normal">{activity.issue_detail?.name}</span> <span className="font-normal break-all">{activity.issue_detail?.name}</span>
</a> </a>
) : ( ) : (
<span className="inline-flex items-center gap-1 font-medium text-custom-text-100 whitespace-nowrap"> <span className="inline-flex items-center gap-1 font-medium text-custom-text-100 whitespace-nowrap">
@ -105,7 +105,7 @@ const EstimatePoint = observer((props: { point: string }) => {
const estimateValue = getEstimatePointValue(Number(point), null); const estimateValue = getEstimatePointValue(Number(point), null);
return ( return (
<span className="font-medium text-custom-text-100"> <span className="font-medium text-custom-text-100 whitespace-nowrap">
{areEstimatesEnabledForCurrentProject {areEstimatesEnabledForCurrentProject
? estimateValue ? estimateValue
: `${currentPoint} ${currentPoint > 1 ? "points" : "point"}`} : `${currentPoint} ${currentPoint > 1 ? "points" : "point"}`}
@ -300,11 +300,13 @@ const activityDetails: {
message: (activity, showIssue, workspaceSlug) => { message: (activity, showIssue, workspaceSlug) => {
if (activity.old_value === "") if (activity.old_value === "")
return ( return (
<> <span className="overflow-hidden">
added a new label{" "} added a new label{" "}
<span className="inline-flex w-min items-center gap-2 truncate whitespace-nowrap rounded-full border border-custom-border-300 px-2 py-0.5 text-xs"> <span className="inline-flex items-center gap-2 rounded-full border border-custom-border-300 px-2 py-0.5 text-xs">
<LabelPill labelId={activity.new_identifier ?? ""} workspaceSlug={workspaceSlug} /> <LabelPill labelId={activity.new_identifier ?? ""} workspaceSlug={workspaceSlug} />
<span className="flex-shrink truncate font-medium text-custom-text-100">{activity.new_value}</span> <span className="flex-shrink font-medium text-custom-text-100 break-all line-clamp-1">
{activity.new_value}
</span>
</span> </span>
{showIssue && ( {showIssue && (
<span className=""> <span className="">
@ -312,15 +314,17 @@ const activityDetails: {
to <IssueLink activity={activity} /> to <IssueLink activity={activity} />
</span> </span>
)} )}
</> </span>
); );
else else
return ( return (
<> <>
removed the label{" "} removed the label{" "}
<span className="inline-flex w-min items-center gap-2 truncate whitespace-nowrap rounded-full border border-custom-border-300 px-2 py-0.5 text-xs"> <span className="inline-flex items-center gap-2 rounded-full border border-custom-border-300 px-2 py-0.5 text-xs">
<LabelPill labelId={activity.old_identifier ?? ""} workspaceSlug={workspaceSlug} /> <LabelPill labelId={activity.old_identifier ?? ""} workspaceSlug={workspaceSlug} />
<span className="flex-shrink truncate font-medium text-custom-text-100">{activity.old_value}</span> <span className="flex-shrink font-medium text-custom-text-100 break-all line-clamp-1">
{activity.old_value}
</span>
</span> </span>
{showIssue && ( {showIssue && (
<span> <span>
@ -404,29 +408,30 @@ const activityDetails: {
return ( return (
<> <>
<span className="flex-shrink-0"> <span className="flex-shrink-0">
added {showIssue ? <IssueLink activity={activity} /> : "this issue"} to the cycle{" "} added {showIssue ? <IssueLink activity={activity} /> : "this issue"}{" "}
<span className="whitespace-nowrap">to the cycle</span>{" "}
</span> </span>
<a <a
href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.new_identifier}`} href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.new_identifier}`}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="inline-flex items-center gap-1 truncate font-medium text-custom-text-100 hover:underline" className="inline items-center gap-1 font-medium text-custom-text-100 hover:underline"
> >
<span className="truncate">{activity.new_value}</span> <span className="break-all">{activity.new_value}</span>
</a> </a>
</> </>
); );
else if (activity.verb === "updated") else if (activity.verb === "updated")
return ( return (
<> <>
<span className="flex-shrink-0">set the cycle to </span> <span className="flex-shrink-0 whitespace-nowrap">set the cycle to </span>
<a <a
href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.new_identifier}`} href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.new_identifier}`}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="inline-flex items-center gap-1 truncate font-medium text-custom-text-100 hover:underline" className="inline items-center gap-1 font-medium text-custom-text-100 hover:underline"
> >
<span className="truncate">{activity.new_value}</span> <span className="break-all">{activity.new_value}</span>
</a> </a>
</> </>
); );
@ -438,9 +443,9 @@ const activityDetails: {
href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.old_identifier}`} href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.old_identifier}`}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="inline-flex items-center gap-1 truncate font-medium text-custom-text-100 hover:underline" className="inline items-center gap-1 font-medium text-custom-text-100 hover:underline"
> >
<span className="truncate">{activity.old_value}</span> <span className="break-all">{activity.old_value}</span>
</a> </a>
</> </>
); );
@ -457,9 +462,9 @@ const activityDetails: {
href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.new_identifier}`} href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.new_identifier}`}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="inline-flex items-center gap-1 truncate font-medium text-custom-text-100 hover:underline" className="inline items-center gap-1 font-medium text-custom-text-100 hover:underline"
> >
<span className="truncate">{activity.new_value}</span> <span className="break-all">{activity.new_value}</span>
</a> </a>
</> </>
); );
@ -471,9 +476,9 @@ const activityDetails: {
href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.new_identifier}`} href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.new_identifier}`}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="inline-flex items-center gap-1 truncate font-medium text-custom-text-100 hover:underline" className="inline items-center gap-1 font-medium text-custom-text-100 hover:underline"
> >
<span className="truncate">{activity.new_value}</span> <span className="break-all">{activity.new_value}</span>
</a> </a>
</> </>
); );
@ -485,9 +490,9 @@ const activityDetails: {
href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.old_identifier}`} href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.old_identifier}`}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="inline-flex items-center gap-1 truncate font-medium text-custom-text-100 hover:underline" className="inline items-center gap-1 font-medium text-custom-text-100 hover:underline"
> >
<span className="truncate">{activity.old_value}</span> <span className="break-all">{activity.old_value}</span>
</a> </a>
</> </>
); );
@ -497,7 +502,7 @@ const activityDetails: {
name: { name: {
message: (activity, showIssue) => ( message: (activity, showIssue) => (
<> <>
<span className="truncate">set the name to {activity.new_value}</span> set the name to <span className="break-all">{activity.new_value}</span>
{showIssue && ( {showIssue && (
<> <>
{" "} {" "}
@ -513,7 +518,8 @@ const activityDetails: {
if (!activity.new_value) if (!activity.new_value)
return ( return (
<> <>
removed the parent <span className="font-medium text-custom-text-100">{activity.old_value}</span> removed the parent{" "}
<span className="font-medium text-custom-text-100 whitespace-nowrap">{activity.old_value}</span>
{showIssue && ( {showIssue && (
<> <>
{" "} {" "}
@ -525,7 +531,8 @@ const activityDetails: {
else else
return ( return (
<> <>
set the parent to <span className="font-medium text-custom-text-100">{activity.new_value}</span> set the parent to{" "}
<span className="font-medium text-custom-text-100 whitespace-nowrap">{activity.new_value}</span>
{showIssue && ( {showIssue && (
<> <>
{" "} {" "}
@ -560,13 +567,14 @@ const activityDetails: {
return ( return (
<> <>
marked that {showIssue ? <IssueLink activity={activity} /> : "this issue"} relates to{" "} marked that {showIssue ? <IssueLink activity={activity} /> : "this issue"} relates to{" "}
<span className="font-medium text-custom-text-100">{activity.new_value}</span>. <span className="font-medium text-custom-text-100 whitespace-nowrap">{activity.new_value}</span>.
</> </>
); );
else else
return ( return (
<> <>
removed the relation from <span className="font-medium text-custom-text-100">{activity.old_value}</span>. removed the relation from{" "}
<span className="font-medium text-custom-text-100 whitespace-nowrap">{activity.old_value}</span>.
</> </>
); );
}, },
@ -578,13 +586,14 @@ const activityDetails: {
return ( return (
<> <>
marked {showIssue ? <IssueLink activity={activity} /> : "this issue"} is blocking issue{" "} marked {showIssue ? <IssueLink activity={activity} /> : "this issue"} is blocking issue{" "}
<span className="font-medium text-custom-text-100">{activity.new_value}</span>. <span className="font-medium text-custom-text-100 whitespace-nowrap">{activity.new_value}</span>.
</> </>
); );
else else
return ( return (
<> <>
removed the blocking issue <span className="font-medium text-custom-text-100">{activity.old_value}</span>. removed the blocking issue{" "}
<span className="font-medium text-custom-text-100 whitespace-nowrap">{activity.old_value}</span>.
</> </>
); );
}, },
@ -596,14 +605,14 @@ const activityDetails: {
return ( return (
<> <>
marked {showIssue ? <IssueLink activity={activity} /> : "this issue"} is being blocked by{" "} marked {showIssue ? <IssueLink activity={activity} /> : "this issue"} is being blocked by{" "}
<span className="font-medium text-custom-text-100">{activity.new_value}</span>. <span className="font-medium text-custom-text-100 whitespace-nowrap">{activity.new_value}</span>.
</> </>
); );
else else
return ( return (
<> <>
removed {showIssue ? <IssueLink activity={activity} /> : "this issue"} being blocked by issue{" "} removed {showIssue ? <IssueLink activity={activity} /> : "this issue"} being blocked by issue{" "}
<span className="font-medium text-custom-text-100">{activity.old_value}</span>. <span className="font-medium text-custom-text-100 whitespace-nowrap">{activity.old_value}</span>.
</> </>
); );
}, },
@ -615,14 +624,14 @@ const activityDetails: {
return ( return (
<> <>
marked {showIssue ? <IssueLink activity={activity} /> : "this issue"} as duplicate of{" "} marked {showIssue ? <IssueLink activity={activity} /> : "this issue"} as duplicate of{" "}
<span className="font-medium text-custom-text-100">{activity.new_value}</span>. <span className="font-medium text-custom-text-100 whitespace-nowrap">{activity.new_value}</span>.
</> </>
); );
else else
return ( return (
<> <>
removed {showIssue ? <IssueLink activity={activity} /> : "this issue"} as a duplicate of{" "} removed {showIssue ? <IssueLink activity={activity} /> : "this issue"} as a duplicate of{" "}
<span className="font-medium text-custom-text-100">{activity.old_value}</span>. <span className="font-medium text-custom-text-100 whitespace-nowrap">{activity.old_value}</span>.
</> </>
); );
}, },
@ -631,7 +640,7 @@ const activityDetails: {
state: { state: {
message: (activity, showIssue) => ( message: (activity, showIssue) => (
<> <>
set the state to <span className="font-medium text-custom-text-100">{activity.new_value}</span> set the state to <span className="font-medium text-custom-text-100 break-all">{activity.new_value}</span>
{showIssue && ( {showIssue && (
<> <>
{" "} {" "}
@ -660,7 +669,9 @@ const activityDetails: {
return ( return (
<> <>
set the start date to{" "} set the start date to{" "}
<span className="font-medium text-custom-text-100">{renderFormattedDate(activity.new_value)}</span> <span className="font-medium text-custom-text-100 whitespace-nowrap">
{renderFormattedDate(activity.new_value)}
</span>
{showIssue && ( {showIssue && (
<> <>
{" "} {" "}
@ -690,7 +701,9 @@ const activityDetails: {
return ( return (
<> <>
set the due date to{" "} set the due date to{" "}
<span className="font-medium text-custom-text-100">{renderFormattedDate(activity.new_value)}</span> <span className="font-medium text-custom-text-100 whitespace-nowrap">
{renderFormattedDate(activity.new_value)}
</span>
{showIssue && ( {showIssue && (
<> <>
<IssueLink activity={activity} /> <IssueLink activity={activity} />

2
web/components/dashboard/home-dashboard-widgets.tsx
View File

@ -42,7 +42,7 @@ export const DashboardWidgets = observer(() => {
if (!workspaceSlug || !homeDashboardId) return null; if (!workspaceSlug || !homeDashboardId) return null;
return ( return (
<div className="grid lg:grid-cols-2 gap-7"> <div className="relative flex flex-col lg:grid lg:grid-cols-2 gap-7">
{Object.entries(WIDGETS_LIST).map(([key, widget]) => { {Object.entries(WIDGETS_LIST).map(([key, widget]) => {
const WidgetComponent = widget.component; const WidgetComponent = widget.component;
// if the widget doesn't exist, return null // if the widget doesn't exist, return null

8
web/components/dashboard/widgets/recent-activity.tsx
View File

@ -68,8 +68,8 @@ export const RecentActivityWidget: React.FC<WidgetProps> = observer((props) => {
</div> </div>
)} )}
</div> </div>
<div className="-mt-1 break-words"> <div className="-mt-2 break-words">
<p className="text-sm text-custom-text-200"> <p className="inline text-sm text-custom-text-200">
<span className="font-medium text-custom-text-100"> <span className="font-medium text-custom-text-100">
{currentUser?.id === activity.actor_detail.id ? "You" : activity.actor_detail?.display_name}{" "} {currentUser?.id === activity.actor_detail.id ? "You" : activity.actor_detail?.display_name}{" "}
</span> </span>
@ -81,7 +81,9 @@ export const RecentActivityWidget: React.FC<WidgetProps> = observer((props) => {
</span> </span>
)} )}
</p> </p>
<p className="text-xs text-custom-text-200">{calculateTimeAgo(activity.created_at)}</p> <p className="text-xs text-custom-text-200 whitespace-nowrap">
{calculateTimeAgo(activity.created_at)}
</p>
</div> </div>
</div> </div>
))} ))}

16
web/components/page-views/workspace-dashboard.tsx
View File

@ -1,6 +1,5 @@
import { useEffect } from "react"; import { useEffect } from "react";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
// hooks
// components // components
import { Spinner } from "@plane/ui"; import { Spinner } from "@plane/ui";
import { DashboardWidgets } from "@/components/dashboard"; import { DashboardWidgets } from "@/components/dashboard";
@ -12,7 +11,11 @@ import { UserGreetingsView } from "@/components/user";
// constants // constants
import { EmptyStateType } from "@/constants/empty-state"; import { EmptyStateType } from "@/constants/empty-state";
import { PRODUCT_TOUR_COMPLETED } from "@/constants/event-tracker"; import { PRODUCT_TOUR_COMPLETED } from "@/constants/event-tracker";
// helpers
import { cn } from "@/helpers/common.helper";
// hooks
import { useApplication, useEventTracker, useDashboard, useProject, useUser } from "@/hooks/store"; import { useApplication, useEventTracker, useDashboard, useProject, useUser } from "@/hooks/store";
import useSize from "@/hooks/use-window-size";
export const WorkspaceDashboardView = observer(() => { export const WorkspaceDashboardView = observer(() => {
// store hooks // store hooks
@ -25,6 +28,8 @@ export const WorkspaceDashboardView = observer(() => {
const { homeDashboardId, fetchHomeDashboardWidgets } = useDashboard(); const { homeDashboardId, fetchHomeDashboardWidgets } = useDashboard();
const { joinedProjectIds } = useProject(); const { joinedProjectIds } = useProject();
const [windowWidth] = useSize();
const handleTourCompleted = () => { const handleTourCompleted = () => {
updateTourCompleted() updateTourCompleted()
.then(() => { .then(() => {
@ -57,7 +62,14 @@ export const WorkspaceDashboardView = observer(() => {
{joinedProjectIds.length > 0 ? ( {joinedProjectIds.length > 0 ? (
<> <>
<IssuePeekOverview /> <IssuePeekOverview />
<div className="space-y-7 p-7 bg-custom-background-90 h-full w-full flex flex-col overflow-y-auto vertical-scrollbar scrollbar-lg"> <div
className={cn(
"space-y-7 md:p-7 p-3 bg-custom-background-90 h-full w-full flex flex-col overflow-y-auto",
{
"vertical-scrollbar scrollbar-lg": windowWidth >= 768,
}
)}
>
{currentUser && <UserGreetingsView user={currentUser} />} {currentUser && <UserGreetingsView user={currentUser} />}
<DashboardWidgets /> <DashboardWidgets />

9
web/components/profile/activity/activity-list.tsx
View File

@ -97,10 +97,10 @@ export const ActivityList: React.FC<Props> = observer((props) => {
return ( return (
<li key={activityItem.id}> <li key={activityItem.id}>
<div className="relative pb-1"> <div className="relative pb-1">
<div className="relative flex items-center space-x-2"> <div className="relative flex items-start space-x-2">
<> <>
<div> <div>
<div className="relative px-1.5"> <div className="relative px-1.5 mt-4">
<div className="mt-1.5"> <div className="mt-1.5">
<div className="flex h-6 w-6 items-center justify-center"> <div className="flex h-6 w-6 items-center justify-center">
{activityItem.field ? ( {activityItem.field ? (
@ -127,7 +127,7 @@ export const ActivityList: React.FC<Props> = observer((props) => {
</div> </div>
</div> </div>
<div className="min-w-0 flex-1 border-b border-custom-border-100 py-4"> <div className="min-w-0 flex-1 border-b border-custom-border-100 py-4">
<div className="flex gap-1 break-words text-sm text-custom-text-200"> <div className="break-words text-sm text-custom-text-200">
{activityItem.field === "archived_at" && activityItem.new_value !== "restore" ? ( {activityItem.field === "archived_at" && activityItem.new_value !== "restore" ? (
<span className="text-gray font-medium">Plane</span> <span className="text-gray font-medium">Plane</span>
) : activityItem.actor_detail.is_bot ? ( ) : activityItem.actor_detail.is_bot ? (
@ -135,6 +135,7 @@ export const ActivityList: React.FC<Props> = observer((props) => {
) : ( ) : (
<Link <Link
href={`/${activityItem.workspace_detail?.slug}/profile/${activityItem.actor_detail.id}`} href={`/${activityItem.workspace_detail?.slug}/profile/${activityItem.actor_detail.id}`}
className="inline"
> >
<span className="text-gray font-medium"> <span className="text-gray font-medium">
{currentUser?.id === activityItem.actor_detail.id {currentUser?.id === activityItem.actor_detail.id
@ -143,7 +144,7 @@ export const ActivityList: React.FC<Props> = observer((props) => {
</span> </span>
</Link> </Link>
)}{" "} )}{" "}
<div className="flex gap-1 truncate"> <div className="inline gap-1">
{message}{" "} {message}{" "}
<span className="flex-shrink-0 whitespace-nowrap"> <span className="flex-shrink-0 whitespace-nowrap">
{calculateTimeAgo(activityItem.created_at)} {calculateTimeAgo(activityItem.created_at)}

9
web/components/profile/activity/profile-activity-list.tsx
View File

@ -120,10 +120,10 @@ export const ProfileActivityListPage: React.FC<Props> = observer((props) => {
return ( return (
<li key={activityItem.id}> <li key={activityItem.id}>
<div className="relative pb-1"> <div className="relative pb-1">
<div className="relative flex items-center space-x-2"> <div className="relative flex items-start space-x-2">
<> <>
<div> <div>
<div className="relative px-1.5"> <div className="relative px-1.5 mt-4">
<div className="mt-1.5"> <div className="mt-1.5">
<div className="flex h-6 w-6 items-center justify-center"> <div className="flex h-6 w-6 items-center justify-center">
{activityItem.field ? ( {activityItem.field ? (
@ -150,7 +150,7 @@ export const ProfileActivityListPage: React.FC<Props> = observer((props) => {
</div> </div>
</div> </div>
<div className="min-w-0 flex-1 border-b border-custom-border-100 py-4"> <div className="min-w-0 flex-1 border-b border-custom-border-100 py-4">
<div className="flex gap-1 break-words text-sm text-custom-text-200"> <div className="break-words text-sm text-custom-text-200">
{activityItem.field === "archived_at" && activityItem.new_value !== "restore" ? ( {activityItem.field === "archived_at" && activityItem.new_value !== "restore" ? (
<span className="text-gray font-medium">Plane</span> <span className="text-gray font-medium">Plane</span>
) : activityItem.actor_detail.is_bot ? ( ) : activityItem.actor_detail.is_bot ? (
@ -158,6 +158,7 @@ export const ProfileActivityListPage: React.FC<Props> = observer((props) => {
) : ( ) : (
<Link <Link
href={`/${activityItem.workspace_detail.slug}/profile/${activityItem.actor_detail.id}`} href={`/${activityItem.workspace_detail.slug}/profile/${activityItem.actor_detail.id}`}
className="inline"
> >
<span className="text-gray font-medium"> <span className="text-gray font-medium">
{currentUser?.id === activityItem.actor_detail.id {currentUser?.id === activityItem.actor_detail.id
@ -166,7 +167,7 @@ export const ProfileActivityListPage: React.FC<Props> = observer((props) => {
</span> </span>
</Link> </Link>
)}{" "} )}{" "}
<div className="flex gap-1 truncate"> <div className="inline gap-1">
{message}{" "} {message}{" "}
<span className="flex-shrink-0 whitespace-nowrap"> <span className="flex-shrink-0 whitespace-nowrap">
{calculateTimeAgo(activityItem.created_at)} {calculateTimeAgo(activityItem.created_at)}

4
web/components/profile/overview/activity.tsx
View File

@ -61,7 +61,7 @@ export const ProfileActivity = observer(() => {
)} )}
</div> </div>
<div className="-mt-1 w-4/5 break-words"> <div className="-mt-1 w-4/5 break-words">
<p className="text-sm text-custom-text-200"> <p className="inline text-sm text-custom-text-200">
<span className="font-medium text-custom-text-100"> <span className="font-medium text-custom-text-100">
{currentUser?.id === activity.actor_detail?.id ? "You" : activity.actor_detail?.display_name}{" "} {currentUser?.id === activity.actor_detail?.id ? "You" : activity.actor_detail?.display_name}{" "}
</span> </span>
@ -73,7 +73,7 @@ export const ProfileActivity = observer(() => {
</span> </span>
)} )}
</p> </p>
<p className="text-xs text-custom-text-200">{calculateTimeAgo(activity.created_at)}</p> <p className="text-xs text-custom-text-200 whitespace-nowrap ">{calculateTimeAgo(activity.created_at)}</p>
</div> </div>
</div> </div>
))} ))}

4
web/pages/profile/activity.tsx
View File

@ -46,8 +46,8 @@ const ProfileActivityPage: NextPageWithLayout = observer(() => {
return ( return (
<> <>
<PageHead title="Profile - Activity" /> <PageHead title="Profile - Activity" />
<section className="mx-auto h-full w-full flex flex-col overflow-hidden px-8 pb-8 lg:w-3/5"> <section className="mx-auto mt-5 md:mt-16 h-full w-full flex flex-col overflow-hidden px-5 md:px-8 pb-8 lg:w-3/5">
<div className="flex items-center border-b border-custom-border-100 gap-4 pb-3.5 mt-5 md:mt-16"> <div className="flex items-center border-b border-custom-border-100 gap-4 pb-3.5">
<SidebarHamburgerToggle onClick={() => themeStore.toggleSidebar()} /> <SidebarHamburgerToggle onClick={() => themeStore.toggleSidebar()} />
<h3 className="text-xl font-medium">Activity</h3> <h3 className="text-xl font-medium">Activity</h3>
</div> </div>