chore: issue patch external api

* fix: activity responsiveness

* fix: activity icon placement

* fix: build

apiserver/plane/api/views/issue.py

@@ -282,7 +282,7 @@ class IssueAPIEndpoint(WebhookMixin, BaseAPIView):
         )
         if serializer.is_valid():
             if (
-                str(request.data.get("external_id"))
+                request.data.get("external_id")
                 and (issue.external_id != str(request.data.get("external_id")))
                 and Issue.objects.filter(
                     project_id=project_id,
@@ -437,7 +437,7 @@ class LabelAPIEndpoint(BaseAPIView):
         serializer = LabelSerializer(label, data=request.data, partial=True)
         if serializer.is_valid():
             if (
-                str(request.data.get("external_id"))
+                request.data.get("external_id")
                 and (label.external_id != str(request.data.get("external_id")))
                 and Issue.objects.filter(
                     project_id=project_id,

packages/ui/src/form-fields/input.tsx

@@ -27,9 +27,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
               : mode === "true-transparent"
                 ? "rounded border-none bg-transparent ring-0"
                 : ""
-        } ${hasError ? "border-red-500" : ""} ${hasError && mode === "primary" ? "bg-red-500/20" : ""} ${
-          inputSize === "sm" ? "px-3 py-2" : inputSize === "md" ? "p-3" : ""
-        }`,
+        } ${hasError ? "border-red-500" : ""} ${inputSize === "sm" ? "px-3 py-2" : inputSize === "md" ? "p-3" : ""}`,
         className
       )}
       {...rest}

web/components/core/activity.tsx

@@ -46,10 +46,10 @@ export const IssueLink = ({ activity }: { activity: IIssueActivity }) => {
           }`}`}
           target={activity.issue === null ? "_self" : "_blank"}
           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="font-normal">{activity.issue_detail?.name}</span>
+          <span className="font-normal break-all">{activity.issue_detail?.name}</span>
         </a>
       ) : (
         <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);
 
   return (
-    <span className="font-medium text-custom-text-100">
+    <span className="font-medium text-custom-text-100 whitespace-nowrap">
       {areEstimatesEnabledForCurrentProject
         ? estimateValue
         : `${currentPoint} ${currentPoint > 1 ? "points" : "point"}`}
@@ -300,11 +300,13 @@ const activityDetails: {
     message: (activity, showIssue, workspaceSlug) => {
       if (activity.old_value === "")
         return (
-          <>
+          <span className="overflow-hidden">
             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} />
-              <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>
             {showIssue && (
               <span className="">
@@ -312,15 +314,17 @@ const activityDetails: {
                 to <IssueLink activity={activity} />
               </span>
             )}
-          </>
+          </span>
         );
       else
         return (
           <>
             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} />
-              <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>
             {showIssue && (
               <span>
@@ -404,29 +408,30 @@ const activityDetails: {
         return (
           <>
             <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>
             <a
               href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.new_identifier}`}
               target="_blank"
               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>
           </>
         );
       else if (activity.verb === "updated")
         return (
           <>
-            <span className="flex-shrink-0">set the cycle to </span>
+            <span className="flex-shrink-0 whitespace-nowrap">set the cycle to </span>
             <a
               href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.new_identifier}`}
               target="_blank"
               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>
           </>
         );
@@ -438,9 +443,9 @@ const activityDetails: {
               href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.old_identifier}`}
               target="_blank"
               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>
           </>
         );
@@ -457,9 +462,9 @@ const activityDetails: {
               href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.new_identifier}`}
               target="_blank"
               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>
           </>
         );
@@ -471,9 +476,9 @@ const activityDetails: {
               href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.new_identifier}`}
               target="_blank"
               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>
           </>
         );
@@ -485,9 +490,9 @@ const activityDetails: {
               href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.old_identifier}`}
               target="_blank"
               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>
           </>
         );
@@ -497,7 +502,7 @@ const activityDetails: {
   name: {
     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 && (
           <>
             {" "}
@@ -513,7 +518,8 @@ const activityDetails: {
       if (!activity.new_value)
         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 && (
               <>
                 {" "}
@@ -525,7 +531,8 @@ const activityDetails: {
       else
         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 && (
               <>
                 {" "}
@@ -560,13 +567,14 @@ const activityDetails: {
         return (
           <>
             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
         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 (
           <>
             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
         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 (
           <>
             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
         return (
           <>
             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 (
           <>
             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
         return (
           <>
             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: {
     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 && (
           <>
             {" "}
@@ -660,7 +669,9 @@ const activityDetails: {
         return (
           <>
             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 && (
               <>
                 {" "}
@@ -690,7 +701,9 @@ const activityDetails: {
         return (
           <>
             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 && (
               <>
                 <IssueLink activity={activity} />

web/components/core/sidebar/single-progress-stats.tsx

@@ -1,7 +1,5 @@
 import React from "react";
 
-import { CircularProgressIndicator } from "@plane/ui";
-
 type TSingleProgressStatsProps = {
   title: any;
   completed: number;
@@ -26,9 +24,6 @@ export const SingleProgressStats: React.FC<TSingleProgressStatsProps> = ({
     <div className="w-1/2">{title}</div>
     <div className="flex w-1/2 items-center justify-end gap-1 px-2">
       <div className="flex h-5 items-center justify-center gap-1">
-        <span className="h-4 w-4">
-          <CircularProgressIndicator percentage={(completed / total) * 100} size={14} strokeWidth={2} />
-        </span>
         <span className="w-8 text-right">
           {isNaN(Math.round((completed / total) * 100)) ? "0" : Math.round((completed / total) * 100)}%
         </span>

web/components/cycles/form.tsx

@@ -77,7 +77,7 @@ export const CycleForm: React.FC<Props> = (props) => {
         </div>
         <div className="space-y-3">
           <div className="mt-2 space-y-3">
-            <div>
+            <div className="flex flex-col gap-1">
               <Controller
                 name="name"
                 control={control}
@@ -85,7 +85,7 @@ export const CycleForm: React.FC<Props> = (props) => {
                   required: "Name is required",
                   maxLength: {
                     value: 255,
-                    message: "Name should be less than 255 characters",
+                    message: "Title should be less than 255 characters",
                   },
                 }}
                 render={({ field: { value, onChange } }) => (
@@ -103,6 +103,7 @@ export const CycleForm: React.FC<Props> = (props) => {
                   />
                 )}
               />
+              <span className="text-xs text-red-500">{errors?.name?.message}</span>
             </div>
             <div>
               <Controller

web/components/dashboard/home-dashboard-widgets.tsx

@@ -42,7 +42,7 @@ export const DashboardWidgets = observer(() => {
   if (!workspaceSlug || !homeDashboardId) return null;
 
   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]) => {
         const WidgetComponent = widget.component;
         // if the widget doesn't exist, return null

web/components/dashboard/widgets/recent-activity.tsx

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

web/components/headers/projects.tsx

@@ -51,16 +51,19 @@ export const ProjectsHeader = observer(() => {
   const handleFilters = useCallback(
     (key: keyof TProjectFilters, value: string | string[]) => {
       if (!workspaceSlug) return;
-      const newValues = filters?.[key] ?? [];
-
-      if (Array.isArray(value))
+      let newValues = filters?.[key] ?? [];
+      if (Array.isArray(value)) {
+        if (key === "created_at" && newValues.find((v) => v.includes("custom"))) newValues = [];
         value.forEach((val) => {
           if (!newValues.includes(val)) newValues.push(val);
           else newValues.splice(newValues.indexOf(val), 1);
         });
-      else {
+      } else {
         if (filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
-        else newValues.push(value);
+        else {
+          if (key === "created_at") newValues = [value];
+          else newValues.push(value);
+        }
       }
 
       updateFilters(workspaceSlug, { [key]: newValues });

web/components/inbox/inbox-filter/filters/members.tsx

@@ -6,7 +6,7 @@ import { Avatar, Loader } from "@plane/ui";
 // components
 import { FilterHeader, FilterOption } from "@/components/issues";
 // hooks
-import { useMember, useProjectInbox } from "@/hooks/store";
+import { useMember, useProjectInbox, useUser } from "@/hooks/store";
 
 type Props = {
   filterKey: TInboxIssueFilterMemberKeys;
@@ -20,6 +20,7 @@ export const FilterMember: FC<Props> = observer((props: Props) => {
   // hooks
   const { inboxFilters, handleInboxIssueFilters } = useProjectInbox();
   const { getUserDetails } = useMember();
+  const { currentUser } = useUser();
   // states
   const [itemsToRender, setItemsToRender] = useState(5);
   const [previewEnabled, setPreviewEnabled] = useState(true);
@@ -34,6 +35,7 @@ export const FilterMember: FC<Props> = observer((props: Props) => {
 
     return sortBy(filteredOptions, [
       (memberId) => !filterValue.includes(memberId),
+      (memberId) => memberId !== currentUser?.id,
       (memberId) => getUserDetails(memberId)?.display_name.toLowerCase(),
     ]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -71,7 +73,7 @@ export const FilterMember: FC<Props> = observer((props: Props) => {
                       isChecked={filterValue?.includes(member.id) ? true : false}
                       onClick={() => handleInboxIssueFilters(filterKey, handleFilterValue(member.id))}
                       icon={<Avatar name={member.display_name} src={member.avatar} showTooltip={false} size="md" />}
-                      title={member.display_name}
+                      title={currentUser?.id === member.id ? "You" : member?.display_name}
                     />
                   );
                 })}

web/components/inbox/modals/create-edit-modal/create-root.tsx

@@ -116,10 +116,16 @@ export const InboxIssueCreateRoot: FC<TInboxIssueCreateRoot> = observer((props)
     setFormSubmitting(false);
   };
 
+  const isTitleLengthMoreThan255Character = formData?.name ? formData.name.length > 255 : false;
+
   if (!workspaceSlug || !projectId || !workspaceId) return <></>;
   return (
     <form className="relative space-y-4" onSubmit={handleFormSubmit}>
-      <InboxIssueTitle data={formData} handleData={handleFormData} />
+      <InboxIssueTitle
+        data={formData}
+        handleData={handleFormData}
+        isTitleLengthMoreThan255Character={isTitleLengthMoreThan255Character}
+      />
       <InboxIssueDescription
         workspaceSlug={workspaceSlug}
         projectId={projectId}
@@ -138,7 +144,13 @@ export const InboxIssueCreateRoot: FC<TInboxIssueCreateRoot> = observer((props)
           <Button variant="neutral-primary" size="sm" type="button" onClick={handleModalClose}>
             Discard
           </Button>
-          <Button variant="primary" size="sm" type="submit" loading={formSubmitting}>
+          <Button
+            variant="primary"
+            size="sm"
+            type="submit"
+            loading={formSubmitting}
+            disabled={isTitleLengthMoreThan255Character}
+          >
             {formSubmitting ? "Adding Issue..." : "Add Issue"}
           </Button>
         </div>

web/components/inbox/modals/create-edit-modal/edit-root.tsx

@@ -121,10 +121,16 @@ export const InboxIssueEditRoot: FC<TInboxIssueEditRoot> = observer((props) => {
     setFormSubmitting(false);
   };
 
+  const isTitleLengthMoreThan255Character = formData?.name ? formData.name.length > 255 : false;
+
   if (!workspaceSlug || !projectId || !workspaceId || !formData) return <></>;
   return (
     <div className="relative space-y-4">
-      <InboxIssueTitle data={formData} handleData={handleFormData} />
+      <InboxIssueTitle
+        data={formData}
+        handleData={handleFormData}
+        isTitleLengthMoreThan255Character={isTitleLengthMoreThan255Character}
+      />
       <InboxIssueDescription
         workspaceSlug={workspaceSlug}
         projectId={projectId}
@@ -138,7 +144,14 @@ export const InboxIssueEditRoot: FC<TInboxIssueEditRoot> = observer((props) => {
         <Button variant="neutral-primary" size="sm" type="button" onClick={handleModalClose}>
           Cancel
         </Button>
-        <Button variant="primary" size="sm" type="button" loading={formSubmitting} onClick={handleFormSubmit}>
+        <Button
+          variant="primary"
+          size="sm"
+          type="button"
+          loading={formSubmitting}
+          disabled={isTitleLengthMoreThan255Character}
+          onClick={handleFormSubmit}
+        >
           {formSubmitting ? "Adding..." : "Add to project"}
         </Button>
       </div>

web/components/inbox/modals/create-edit-modal/issue-title.tsx

@@ -6,10 +6,11 @@ import { Input } from "@plane/ui";
 type TInboxIssueTitle = {
   data: Partial<TIssue>;
   handleData: (issueKey: keyof Partial<TIssue>, issueValue: Partial<TIssue>[keyof Partial<TIssue>]) => void;
+  isTitleLengthMoreThan255Character?: boolean;
 };
 
 export const InboxIssueTitle: FC<TInboxIssueTitle> = observer((props) => {
-  const { data, handleData } = props;
+  const { data, handleData, isTitleLengthMoreThan255Character } = props;
 
   return (
     <div className="relative flex flex-wrap gap-2 items-center">
@@ -21,9 +22,11 @@ export const InboxIssueTitle: FC<TInboxIssueTitle> = observer((props) => {
         onChange={(e) => handleData("name", e.target.value)}
         placeholder="Title"
         className="w-full resize-none text-xl"
-        maxLength={255}
         required
       />
+      {isTitleLengthMoreThan255Character && (
+        <span className="text-xs text-red-500">Title should be less than 255 characters</span>
+      )}
     </div>
   );
 });

web/components/issues/issue-detail/sidebar.tsx

@@ -13,6 +13,7 @@ import {
   CopyPlus,
   CalendarClock,
   CalendarCheck2,
+  UserCircle2,
 } from "lucide-react";
 // hooks
 // components
@@ -36,6 +37,7 @@ import {
 } from "@/components/dropdowns";
 // ui
 // helpers
+import { ButtonAvatars } from "@/components/dropdowns/member/avatar";
 import {
   DeleteIssueModal,
   IssueLinkRoot,
@@ -54,7 +56,7 @@ import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper"
 import { shouldHighlightIssueDueDate } from "@/helpers/issue.helper";
 import { copyTextToClipboard } from "@/helpers/string.helper";
 // types
-import { useEstimate, useIssueDetail, useProject, useProjectState, useUser } from "@/hooks/store";
+import { useEstimate, useIssueDetail, useMember, useProject, useProjectState, useUser } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // components
 import type { TIssueOperations } from "./root";
@@ -88,9 +90,12 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
   } = useIssueDetail();
   const { getStateById } = useProjectState();
   const { isMobile } = usePlatformOS();
+  const { getUserDetails } = useMember();
   const issue = getIssueById(issueId);
   if (!issue) return <></>;
 
+  const createdByDetails = getUserDetails(issue.created_by);
+
   const handleCopyText = () => {
     const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
     copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`).then(() => {
@@ -257,6 +262,21 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
               />
             </div>
 
+            {createdByDetails && (
+              <div className="flex h-8 items-center gap-2">
+                <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
+                  <UserCircle2 className="h-4 w-4 flex-shrink-0" />
+                  <span>Created by</span>
+                </div>
+                <Tooltip tooltipContent={createdByDetails?.display_name} isMobile={isMobile}>
+                  <div className="h-full flex items-center gap-1.5 rounded px-2 py-0.5 text-sm justify-between cursor-default">
+                    <ButtonAvatars showTooltip={false} userIds={createdByDetails.id} />
+                    <span className="flex-grow truncate text-xs leading-5">{createdByDetails?.display_name}</span>
+                  </div>
+                </Tooltip>
+              </div>
+            )}
+
             <div className="flex h-8 items-center gap-2">
               <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
                 <CalendarClock className="h-4 w-4 flex-shrink-0" />
@@ -460,12 +480,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
             </div>
           </div>
 
-          <IssueLinkRoot
-            workspaceSlug={workspaceSlug}
-            projectId={projectId}
-            issueId={issueId}
-            disabled={!isEditable}
-          />
+          <IssueLinkRoot workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} disabled={!isEditable} />
         </div>
       </div>
     </>

web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx

@@ -50,7 +50,7 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
   const isEditingAllowed = alwaysAllowEditing || (currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER);
 
   return (
-    <div className="flex flex-wrap items-stretch gap-2 bg-custom-background-100">
+    <div className="flex flex-wrap items-stretch gap-2 bg-custom-background-100 truncate">
       {Object.entries(appliedFilters).map(([key, value]) => {
         const filterKey = key as keyof IIssueFilterOptions;
 
@@ -60,9 +60,9 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
         return (
           <div
             key={filterKey}
-            className="flex flex-wrap items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 capitalize w-full"
+            className="flex flex-wrap items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 capitalize truncate"
           >
-            <div className="flex flex-wrap items-center gap-1.5 w-full">
+            <div className="flex flex-wrap items-center gap-1.5 truncate">
               <span className="text-xs text-custom-text-300">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
               {membersFilters.includes(filterKey) && (
                 <AppliedMembersFilters
@@ -141,7 +141,7 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
         <button
           type="button"
           onClick={handleClearAllFilters}
-          className="flex items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 text-xs text-custom-text-300 hover:text-custom-text-200"
+          className="flex items-center gap-2 flex-shrink-0 rounded-md border border-custom-border-200 px-2 py-1 text-xs text-custom-text-300 hover:text-custom-text-200"
         >
           Clear all
           <X size={12} strokeWidth={2} />

web/components/issues/issue-layouts/filters/header/filters/assignee.tsx

@@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite";
 // hooks
 import { Avatar, Loader } from "@plane/ui";
 import { FilterHeader, FilterOption } from "@/components/issues";
-import { useMember } from "@/hooks/store";
+import { useMember, useUser } from "@/hooks/store";
 // components
 // ui
 
@@ -22,16 +22,18 @@ export const FilterAssignees: React.FC<Props> = observer((props: Props) => {
   const [previewEnabled, setPreviewEnabled] = useState(true);
   // store hooks
   const { getUserDetails } = useMember();
+  const { currentUser } = useUser();
 
   const appliedFiltersCount = appliedFilters?.length ?? 0;
 
   const sortedOptions = useMemo(() => {
-    const filteredOptions = (memberIds || []).filter(
-      (memberId) => getUserDetails(memberId)?.display_name.toLowerCase().includes(searchQuery.toLowerCase())
+    const filteredOptions = (memberIds || []).filter((memberId) =>
+      getUserDetails(memberId)?.display_name.toLowerCase().includes(searchQuery.toLowerCase())
     );
 
     return sortBy(filteredOptions, [
       (memberId) => !(appliedFilters ?? []).includes(memberId),
+      (memberId) => memberId !== currentUser?.id,
       (memberId) => getUserDetails(memberId)?.display_name.toLowerCase(),
     ]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -66,7 +68,7 @@ export const FilterAssignees: React.FC<Props> = observer((props: Props) => {
                       isChecked={appliedFilters?.includes(member.id) ? true : false}
                       onClick={() => handleUpdate(member.id)}
                       icon={<Avatar name={member.display_name} src={member.avatar} showTooltip={false} size="md" />}
-                      title={member.display_name}
+                      title={currentUser?.id === member.id ? "You" : member?.display_name}
                     />
                   );
                 })}

web/components/issues/issue-layouts/filters/header/filters/created-by.tsx

@@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite";
 // hooks
 import { Avatar, Loader } from "@plane/ui";
 import { FilterHeader, FilterOption } from "@/components/issues";
-import { useMember } from "@/hooks/store";
+import { useMember, useUser } from "@/hooks/store";
 // components
 // ui
 
@@ -22,14 +22,16 @@ export const FilterCreatedBy: React.FC<Props> = observer((props: Props) => {
   const [previewEnabled, setPreviewEnabled] = useState(true);
   // store hooks
   const { getUserDetails } = useMember();
+  const { currentUser } = useUser();
 
   const sortedOptions = useMemo(() => {
-    const filteredOptions = (memberIds || []).filter(
-      (memberId) => getUserDetails(memberId)?.display_name.toLowerCase().includes(searchQuery.toLowerCase())
+    const filteredOptions = (memberIds || []).filter((memberId) =>
+      getUserDetails(memberId)?.display_name.toLowerCase().includes(searchQuery.toLowerCase())
     );
 
     return sortBy(filteredOptions, [
       (memberId) => !(appliedFilters ?? []).includes(memberId),
+      (memberId) => memberId !== currentUser?.id,
       (memberId) => getUserDetails(memberId)?.display_name.toLowerCase(),
     ]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -66,7 +68,7 @@ export const FilterCreatedBy: React.FC<Props> = observer((props: Props) => {
                       isChecked={appliedFilters?.includes(member.id) ? true : false}
                       onClick={() => handleUpdate(member.id)}
                       icon={<Avatar name={member.display_name} src={member.avatar} size="md" />}
-                      title={member.display_name}
+                      title={currentUser?.id === member.id ? "You" : member?.display_name}
                     />
                   );
                 })}

web/components/issues/issue-layouts/filters/header/filters/mentions.tsx

@@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite";
 // hooks
 import { Loader, Avatar } from "@plane/ui";
 import { FilterHeader, FilterOption } from "@/components/issues";
-import { useMember } from "@/hooks/store";
+import { useMember, useUser } from "@/hooks/store";
 // components
 // ui
 
@@ -22,16 +22,18 @@ export const FilterMentions: React.FC<Props> = observer((props: Props) => {
   const [previewEnabled, setPreviewEnabled] = useState(true);
   // store hooks
   const { getUserDetails } = useMember();
+  const { currentUser } = useUser();
 
   const appliedFiltersCount = appliedFilters?.length ?? 0;
 
   const sortedOptions = useMemo(() => {
-    const filteredOptions = (memberIds || []).filter(
-      (memberId) => getUserDetails(memberId)?.display_name.toLowerCase().includes(searchQuery.toLowerCase())
+    const filteredOptions = (memberIds || []).filter((memberId) =>
+      getUserDetails(memberId)?.display_name.toLowerCase().includes(searchQuery.toLowerCase())
     );
 
     return sortBy(filteredOptions, [
       (memberId) => !(appliedFilters ?? []).includes(memberId),
+      (memberId) => memberId !== currentUser?.id,
       (memberId) => getUserDetails(memberId)?.display_name.toLowerCase(),
     ]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -66,7 +68,7 @@ export const FilterMentions: React.FC<Props> = observer((props: Props) => {
                       isChecked={appliedFilters?.includes(member.id) ? true : false}
                       onClick={() => handleUpdate(member.id)}
                       icon={<Avatar name={member?.display_name} src={member?.avatar} showTooltip={false} size={"md"} />}
-                      title={member.display_name}
+                      title={currentUser?.id === member.id ? "You" : member?.display_name}
                     />
                   );
                 })}

web/components/issues/issue-modal/form.tsx

@@ -391,6 +391,8 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                   />
                 )}
               />
+              <span className="text-xs text-red-500">{errors?.name?.message}</span>
+
               <div className="relative">
                 {data?.description_html === undefined ? (
                   <Loader className="min-h-[7rem] space-y-2 overflow-hidden rounded-md border border-custom-border-200 p-2 py-2">

web/components/issues/peek-overview/properties.tsx

@@ -10,10 +10,11 @@ import {
   XCircle,
   CalendarClock,
   CalendarCheck2,
+  UserCircle2,
 } from "lucide-react";
 // hooks
 // ui icons
-import { DiceIcon, DoubleCircleIcon, UserGroupIcon, ContrastIcon, RelatedIcon } from "@plane/ui";
+import { DiceIcon, DoubleCircleIcon, UserGroupIcon, ContrastIcon, RelatedIcon, Tooltip } from "@plane/ui";
 // components
 import {
   DateDropdown,
@@ -22,6 +23,7 @@ import {
   MemberDropdown,
   StateDropdown,
 } from "@/components/dropdowns";
+import { ButtonAvatars } from "@/components/dropdowns/member/avatar";
 import {
   IssueLinkRoot,
   IssueCycleSelect,
@@ -35,7 +37,8 @@ import {
 import { cn } from "@/helpers/common.helper";
 import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper";
 import { shouldHighlightIssueDueDate } from "@/helpers/issue.helper";
-import { useIssueDetail, useProject, useProjectState } from "@/hooks/store";
+import { useIssueDetail, useMember, useProject, useProjectState } from "@/hooks/store";
+import { usePlatformOS } from "@/hooks/use-platform-os";
 
 interface IPeekOverviewProperties {
   workspaceSlug: string;
@@ -53,9 +56,12 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
     issue: { getIssueById },
   } = useIssueDetail();
   const { getStateById } = useProjectState();
+  const { getUserDetails } = useMember();
+  const { isMobile } = usePlatformOS();
   // derived values
   const issue = getIssueById(issueId);
   if (!issue) return <></>;
+  const createdByDetails = getUserDetails(issue?.created_by);
   const projectDetails = getProjectById(issue.project_id);
   const isEstimateEnabled = projectDetails?.estimate;
   const stateDetails = getStateById(issue.state_id);
@@ -131,6 +137,22 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
           />
         </div>
 
+        {/* created by */}
+        {createdByDetails && (
+          <div className="flex w-full items-center gap-3 h-8">
+            <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
+              <UserCircle2 className="h-4 w-4 flex-shrink-0" />
+              <span>Created by</span>
+            </div>
+            <Tooltip tooltipContent={createdByDetails?.display_name} isMobile={isMobile}>
+              <div className="h-full flex items-center gap-1.5 rounded px-2 py-0.5 text-sm justify-between cursor-default">
+                <ButtonAvatars showTooltip={false} userIds={createdByDetails?.id} />
+                <span className="flex-grow truncate text-xs leading-5">{createdByDetails?.display_name}</span>
+              </div>
+            </Tooltip>
+          </div>
+        )}
+
         {/* start date */}
         <div className="flex w-full items-center gap-3 h-8">
           <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">

web/components/modules/form.tsx

@@ -90,7 +90,7 @@ export const ModuleForm: React.FC<Props> = (props) => {
         </div>
 
         <div className="space-y-3">
-          <div>
+          <div className="flex flex-col gap-1">
             <Controller
               control={control}
               name="name"
@@ -109,13 +109,14 @@ export const ModuleForm: React.FC<Props> = (props) => {
                   value={value}
                   onChange={onChange}
                   ref={ref}
-                  hasError={Boolean(errors.name)}
+                  hasError={Boolean(errors?.name)}
                   placeholder="Module Title"
                   className="w-full resize-none placeholder:text-sm placeholder:font-medium focus:border-blue-400"
                   tabIndex={1}
                 />
               )}
             />
+            <span className="text-xs text-red-500">{errors?.name?.message}</span>
           </div>
           <div>
             <Controller

web/components/modules/module-list-item.tsx

@@ -135,103 +135,101 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
   const completedModuleCheck = moduleDetails.status === "completed";
 
   return (
-    <Link
-      href={`/${workspaceSlug}/projects/${moduleDetails.project_id}/modules/${moduleDetails.id}`}
-      onClick={(e) => {
-        if (isArchived) {
-          openModuleOverview(e);
-        }
-      }}
-    >
-      <div className="group flex w-full flex-col items-center justify-between gap-5 border-b border-custom-border-100 bg-custom-background-100 px-5 py-6 text-sm hover:bg-custom-background-90 sm:flex-row">
-        <div className="relative flex w-full items-center justify-between gap-3 overflow-hidden">
-          <div className="relative flex w-full items-center gap-3 overflow-hidden">
-            <div className="flex items-center gap-4 truncate">
-              <span className="flex-shrink-0">
-                <CircularProgressIndicator size={38} percentage={progress}>
-                  {completedModuleCheck ? (
-                    progress === 100 ? (
-                      <Check className="h-3 w-3 stroke-[2] text-custom-primary-100" />
-                    ) : (
-                      <span className="text-sm text-custom-primary-100">{`!`}</span>
-                    )
-                  ) : progress === 100 ? (
+    <div className="group flex w-full flex-col items-center justify-between gap-5 border-b border-custom-border-100 bg-custom-background-100 px-5 py-6 text-sm hover:bg-custom-background-90 sm:flex-row">
+      <Link
+        href={`/${workspaceSlug}/projects/${moduleDetails.project_id}/modules/${moduleDetails.id}`}
+        onClick={(e) => {
+          if (isArchived) {
+            openModuleOverview(e);
+          }
+        }}
+        className="relative flex w-full items-center justify-between gap-3 overflow-hidden"
+      >
+        <div className="relative flex w-full items-center gap-3 overflow-hidden">
+          <div className="flex items-center gap-4 truncate">
+            <span className="flex-shrink-0">
+              <CircularProgressIndicator size={38} percentage={progress}>
+                {completedModuleCheck ? (
+                  progress === 100 ? (
                     <Check className="h-3 w-3 stroke-[2] text-custom-primary-100" />
                   ) : (
-                    <span className="text-xs text-custom-text-300">{`${progress}%`}</span>
-                  )}
-                </CircularProgressIndicator>
-              </span>
-              <Tooltip tooltipContent={moduleDetails.name} position="top" isMobile={isMobile}>
-                <span className="truncate text-base font-medium">{moduleDetails.name}</span>
-              </Tooltip>
-            </div>
-            <button onClick={openModuleOverview} className="z-[5] hidden flex-shrink-0 group-hover:flex">
-              <Info className="h-4 w-4 text-custom-text-400" />
-            </button>
-          </div>
-          <div className="flex flex-shrink-0 items-center justify-center">
-            {moduleStatus && (
-              <span
-                className="flex h-6 w-20 flex-shrink-0 items-center justify-center rounded-sm text-center text-xs"
-                style={{
-                  color: moduleStatus.color,
-                  backgroundColor: `${moduleStatus.color}20`,
-                }}
-              >
-                {moduleStatus.label}
-              </span>
-            )}
+                    <span className="text-sm text-custom-primary-100">{`!`}</span>
+                  )
+                ) : progress === 100 ? (
+                  <Check className="h-3 w-3 stroke-[2] text-custom-primary-100" />
+                ) : (
+                  <span className="text-xs text-custom-text-300">{`${progress}%`}</span>
+                )}
+              </CircularProgressIndicator>
+            </span>
+            <Tooltip tooltipContent={moduleDetails.name} position="top" isMobile={isMobile}>
+              <span className="truncate text-base font-medium">{moduleDetails.name}</span>
+            </Tooltip>
           </div>
+          <button onClick={openModuleOverview} className="z-[5] hidden flex-shrink-0 group-hover:flex">
+            <Info className="h-4 w-4 text-custom-text-400" />
+          </button>
+        </div>
+        <div className="flex flex-shrink-0 items-center justify-center">
+          {moduleStatus && (
+            <span
+              className="flex h-6 w-20 flex-shrink-0 items-center justify-center rounded-sm text-center text-xs"
+              style={{
+                color: moduleStatus.color,
+                backgroundColor: `${moduleStatus.color}20`,
+              }}
+            >
+              {moduleStatus.label}
+            </span>
+          )}
+        </div>
+      </Link>
+      <div className="relative flex w-full items-center justify-between gap-2.5 sm:w-auto sm:flex-shrink-0 sm:justify-end ">
+        <div className="text-xs text-custom-text-300">
+          {renderDate && (
+            <span className=" text-xs text-custom-text-300">
+              {renderFormattedDate(startDate) ?? "_ _"} - {renderFormattedDate(endDate) ?? "_ _"}
+            </span>
+          )}
         </div>
 
-        <div className="relative flex w-full items-center justify-between gap-2.5 sm:w-auto sm:flex-shrink-0 sm:justify-end ">
-          <div className="text-xs text-custom-text-300">
-            {renderDate && (
-              <span className=" text-xs text-custom-text-300">
-                {renderFormattedDate(startDate) ?? "_ _"} - {renderFormattedDate(endDate) ?? "_ _"}
-              </span>
-            )}
-          </div>
+        <div className="relative flex flex-shrink-0 items-center gap-3">
+          <Tooltip tooltipContent={`${moduleDetails?.member_ids?.length || 0} Members`} isMobile={isMobile}>
+            <div className="flex w-10 cursor-default items-center justify-center gap-1">
+              {moduleDetails.member_ids.length > 0 ? (
+                <AvatarGroup showTooltip={false}>
+                  {moduleDetails.member_ids.map((member_id) => {
+                    const member = getUserDetails(member_id);
+                    return <Avatar key={member?.id} name={member?.display_name} src={member?.avatar} />;
+                  })}
+                </AvatarGroup>
+              ) : (
+                <span className="flex h-5 w-5 items-end justify-center rounded-full border border-dashed border-custom-text-400 bg-custom-background-80">
+                  <User2 className="h-4 w-4 text-custom-text-400" />
+                </span>
+              )}
+            </div>
+          </Tooltip>
 
-          <div className="relative flex flex-shrink-0 items-center gap-3">
-            <Tooltip tooltipContent={`${moduleDetails?.member_ids?.length || 0} Members`} isMobile={isMobile}>
-              <div className="flex w-10 cursor-default items-center justify-center gap-1">
-                {moduleDetails.member_ids.length > 0 ? (
-                  <AvatarGroup showTooltip={false}>
-                    {moduleDetails.member_ids.map((member_id) => {
-                      const member = getUserDetails(member_id);
-                      return <Avatar key={member?.id} name={member?.display_name} src={member?.avatar} />;
-                    })}
-                  </AvatarGroup>
-                ) : (
-                  <span className="flex h-5 w-5 items-end justify-center rounded-full border border-dashed border-custom-text-400 bg-custom-background-80">
-                    <User2 className="h-4 w-4 text-custom-text-400" />
-                  </span>
-                )}
-              </div>
-            </Tooltip>
-
-            {isEditingAllowed && !isArchived && (
-              <FavoriteStar
-                onClick={(e) => {
-                  if (moduleDetails.is_favorite) handleRemoveFromFavorites(e);
-                  else handleAddToFavorites(e);
-                }}
-                selected={moduleDetails.is_favorite}
-              />
-            )}
-            {workspaceSlug && projectId && (
-              <ModuleQuickActions
-                moduleId={moduleId}
-                projectId={projectId.toString()}
-                workspaceSlug={workspaceSlug.toString()}
-                isArchived={isArchived}
-              />
-            )}
-          </div>
+          {isEditingAllowed && !isArchived && (
+            <FavoriteStar
+              onClick={(e) => {
+                if (moduleDetails.is_favorite) handleRemoveFromFavorites(e);
+                else handleAddToFavorites(e);
+              }}
+              selected={moduleDetails.is_favorite}
+            />
+          )}
+          {workspaceSlug && projectId && (
+            <ModuleQuickActions
+              moduleId={moduleId}
+              projectId={projectId.toString()}
+              workspaceSlug={workspaceSlug.toString()}
+              isArchived={isArchived}
+            />
+          )}
         </div>
       </div>
-    </Link>
+    </div>
   );
 });

web/components/page-views/workspace-dashboard.tsx

@@ -1,6 +1,5 @@
 import { useEffect } from "react";
 import { observer } from "mobx-react-lite";
-// hooks
 // components
 import { Spinner } from "@plane/ui";
 import { DashboardWidgets } from "@/components/dashboard";
@@ -12,7 +11,11 @@ import { UserGreetingsView } from "@/components/user";
 // constants
 import { EmptyStateType } from "@/constants/empty-state";
 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 useSize from "@/hooks/use-window-size";
 
 export const WorkspaceDashboardView = observer(() => {
   // store hooks
@@ -25,6 +28,8 @@ export const WorkspaceDashboardView = observer(() => {
   const { homeDashboardId, fetchHomeDashboardWidgets } = useDashboard();
   const { joinedProjectIds } = useProject();
 
+  const [windowWidth] = useSize();
+
   const handleTourCompleted = () => {
     updateTourCompleted()
       .then(() => {
@@ -57,7 +62,14 @@ export const WorkspaceDashboardView = observer(() => {
           {joinedProjectIds.length > 0 ? (
             <>
               <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} />}
 
                 <DashboardWidgets />

web/components/profile/activity/activity-list.tsx

@@ -97,10 +97,10 @@ export const ActivityList: React.FC<Props> = observer((props) => {
               return (
                 <li key={activityItem.id}>
                   <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 className="relative px-1.5">
+                          <div className="relative px-1.5 mt-4">
                             <div className="mt-1.5">
                               <div className="flex h-6 w-6 items-center justify-center">
                                 {activityItem.field ? (
@@ -127,7 +127,7 @@ export const ActivityList: React.FC<Props> = observer((props) => {
                           </div>
                         </div>
                         <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" ? (
                               <span className="text-gray font-medium">Plane</span>
                             ) : activityItem.actor_detail.is_bot ? (
@@ -135,6 +135,7 @@ export const ActivityList: React.FC<Props> = observer((props) => {
                             ) : (
                               <Link
                                 href={`/${activityItem.workspace_detail?.slug}/profile/${activityItem.actor_detail.id}`}
+                                className="inline"
                               >
                                 <span className="text-gray font-medium">
                                   {currentUser?.id === activityItem.actor_detail.id
@@ -143,7 +144,7 @@ export const ActivityList: React.FC<Props> = observer((props) => {
                                 </span>
                               </Link>
                             )}{" "}
-                            <div className="flex gap-1 truncate">
+                            <div className="inline gap-1">
                               {message}{" "}
                               <span className="flex-shrink-0 whitespace-nowrap">
                                 {calculateTimeAgo(activityItem.created_at)}

web/components/profile/activity/profile-activity-list.tsx

@@ -120,10 +120,10 @@ export const ProfileActivityListPage: React.FC<Props> = observer((props) => {
               return (
                 <li key={activityItem.id}>
                   <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 className="relative px-1.5">
+                          <div className="relative px-1.5 mt-4">
                             <div className="mt-1.5">
                               <div className="flex h-6 w-6 items-center justify-center">
                                 {activityItem.field ? (
@@ -150,7 +150,7 @@ export const ProfileActivityListPage: React.FC<Props> = observer((props) => {
                           </div>
                         </div>
                         <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" ? (
                               <span className="text-gray font-medium">Plane</span>
                             ) : activityItem.actor_detail.is_bot ? (
@@ -158,6 +158,7 @@ export const ProfileActivityListPage: React.FC<Props> = observer((props) => {
                             ) : (
                               <Link
                                 href={`/${activityItem.workspace_detail.slug}/profile/${activityItem.actor_detail.id}`}
+                                className="inline"
                               >
                                 <span className="text-gray font-medium">
                                   {currentUser?.id === activityItem.actor_detail.id
@@ -166,7 +167,7 @@ export const ProfileActivityListPage: React.FC<Props> = observer((props) => {
                                 </span>
                               </Link>
                             )}{" "}
-                            <div className="flex gap-1 truncate">
+                            <div className="inline gap-1">
                               {message}{" "}
                               <span className="flex-shrink-0 whitespace-nowrap">
                                 {calculateTimeAgo(activityItem.created_at)}

web/components/profile/overview/activity.tsx

@@ -61,7 +61,7 @@ export const ProfileActivity = observer(() => {
                     )}
                   </div>
                   <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">
                         {currentUser?.id === activity.actor_detail?.id ? "You" : activity.actor_detail?.display_name}{" "}
                       </span>
@@ -73,7 +73,7 @@ export const ProfileActivity = observer(() => {
                         </span>
                       )}
                     </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>
               ))}

web/components/project/applied-filters/date.tsx

@@ -1,7 +1,7 @@
 import { observer } from "mobx-react-lite";
 import { X } from "lucide-react";
 // helpers
-import { DATE_BEFORE_FILTER_OPTIONS } from "@/constants/filters";
+import { PROJECT_CREATED_AT_FILTER_OPTIONS } from "@/constants/filters";
 import { renderFormattedDate } from "@/helpers/date-time.helper";
 import { capitalizeFirstLetter } from "@/helpers/string.helper";
 // constants
@@ -18,7 +18,7 @@ export const AppliedDateFilters: React.FC<Props> = observer((props) => {
   const getDateLabel = (value: string): string => {
     let dateLabel = "";
 
-    const dateDetails = DATE_BEFORE_FILTER_OPTIONS.find((d) => d.value === value);
+    const dateDetails = PROJECT_CREATED_AT_FILTER_OPTIONS.find((d) => d.value === value);
 
     if (dateDetails) dateLabel = dateDetails.name;
     else {

web/components/project/dropdowns/filters/created-at.tsx

@@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite";
 import { DateFilterModal } from "@/components/core";
 import { FilterHeader, FilterOption } from "@/components/issues";
 // constants
-import { DATE_BEFORE_FILTER_OPTIONS } from "@/constants/filters";
+import { PROJECT_CREATED_AT_FILTER_OPTIONS } from "@/constants/filters";
 // helpers
 import { isInDateFormat } from "@/helpers/date-time.helper";
 
@@ -16,13 +16,12 @@ type Props = {
 
 export const FilterCreatedDate: React.FC<Props> = observer((props) => {
   const { appliedFilters, handleUpdate, searchQuery } = props;
-
+  // state
   const [previewEnabled, setPreviewEnabled] = useState(true);
   const [isDateFilterModalOpen, setIsDateFilterModalOpen] = useState(false);
-
+  // derived values
   const appliedFiltersCount = appliedFilters?.length ?? 0;
-
-  const filteredOptions = DATE_BEFORE_FILTER_OPTIONS.filter((d) =>
+  const filteredOptions = PROJECT_CREATED_AT_FILTER_OPTIONS.filter((d) =>
     d.name.toLowerCase().includes(searchQuery.toLowerCase())
   );
 
@@ -62,10 +61,15 @@ export const FilterCreatedDate: React.FC<Props> = observer((props) => {
                   isChecked={appliedFilters?.includes(option.value) ? true : false}
                   onClick={() => handleUpdate(option.value)}
                   title={option.name}
-                  multiple
+                  multiple={false}
                 />
               ))}
-              <FilterOption isChecked={isCustomDateSelected()} onClick={handleCustomDate} title="Custom" multiple />
+              <FilterOption
+                isChecked={isCustomDateSelected()}
+                onClick={handleCustomDate}
+                title="Custom"
+                multiple={false}
+              />
             </>
           ) : (
             <p className="text-xs italic text-custom-text-400">No matches found</p>

web/components/project/form.tsx

@@ -216,6 +216,10 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
             name="name"
             rules={{
               required: "Name is required",
+              maxLength: {
+                value: 255,
+                message: "Project name should be less than 255 characters",
+              },
             }}
             render={({ field: { value, onChange, ref } }) => (
               <Input
@@ -232,9 +236,7 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
               />
             )}
           />
-          <span className="text-xs text-red-500">
-            <>{errors?.name?.message}</>
-          </span>
+          <span className="text-xs text-red-500">{errors?.name?.message}</span>
         </div>
         <div className="flex flex-col gap-1">
           <h4 className="text-sm">Description</h4>

web/components/views/form.tsx

@@ -112,7 +112,7 @@ export const ProjectViewForm: React.FC<Props> = observer((props) => {
       <div className="space-y-5">
         <h3 className="text-lg font-medium leading-6 text-custom-text-100">{data ? "Update" : "Create"} View</h3>
         <div className="space-y-3">
-          <div>
+          <div className="flex flex-col gap-1">
             <Controller
               control={control}
               name="name"
@@ -137,6 +137,7 @@ export const ProjectViewForm: React.FC<Props> = observer((props) => {
                 />
               )}
             />
+            <span className="text-xs text-red-500">{errors?.name?.message}</span>
           </div>
           <div>
             <Controller
@@ -215,8 +216,8 @@ export const ProjectViewForm: React.FC<Props> = observer((props) => {
               ? "Updating View..."
               : "Update View"
             : isSubmitting
-            ? "Creating View..."
-            : "Create View"}
+              ? "Creating View..."
+              : "Create View"}
         </Button>
       </div>
     </form>

web/components/workspace/create-workspace-form.tsx

@@ -125,35 +125,38 @@ export const CreateWorkspaceForm: FC<Props> = observer((props) => {
             Workspace Name
             <span className="ml-0.5 text-red-500">*</span>
           </label>
-          <Controller
-            control={control}
-            name="name"
-            rules={{
-              required: "Workspace name is required",
-              validate: (value) =>
-                /^[\w\s-]*$/.test(value) || `Name can only contain (" "), ( - ), ( _ ) & alphanumeric characters.`,
-              maxLength: {
-                value: 80,
-                message: "Workspace name should not exceed 80 characters",
-              },
-            }}
-            render={({ field: { value, ref, onChange } }) => (
-              <Input
-                id="workspaceName"
-                type="text"
-                value={value}
-                onChange={(e) => {
-                  onChange(e.target.value);
-                  setValue("name", e.target.value);
-                  setValue("slug", e.target.value.toLocaleLowerCase().trim().replace(/ /g, "-"));
-                }}
-                ref={ref}
-                hasError={Boolean(errors.name)}
-                placeholder="Enter workspace name..."
-                className="w-full"
-              />
-            )}
-          />
+          <div className="flex flex-col gap-1">
+            <Controller
+              control={control}
+              name="name"
+              rules={{
+                required: "Workspace name is required",
+                validate: (value) =>
+                  /^[\w\s-]*$/.test(value) || `Name can only contain (" "), ( - ), ( _ ) & alphanumeric characters.`,
+                maxLength: {
+                  value: 80,
+                  message: "Workspace name should not exceed 80 characters",
+                },
+              }}
+              render={({ field: { value, ref, onChange } }) => (
+                <Input
+                  id="workspaceName"
+                  type="text"
+                  value={value}
+                  onChange={(e) => {
+                    onChange(e.target.value);
+                    setValue("name", e.target.value);
+                    setValue("slug", e.target.value.toLocaleLowerCase().trim().replace(/ /g, "-"));
+                  }}
+                  ref={ref}
+                  hasError={Boolean(errors.name)}
+                  placeholder="Enter workspace name..."
+                  className="w-full"
+                />
+              )}
+            />
+            <span className="text-xs text-red-500">{errors?.name?.message}</span>
+          </div>
         </div>
         <div className="space-y-1 text-sm">
           <label htmlFor="workspaceUrl">

web/constants/filters.ts

@@ -31,3 +31,22 @@ export const DATE_BEFORE_FILTER_OPTIONS = [
     value: "1_months;before;fromnow",
   },
 ];
+
+export const PROJECT_CREATED_AT_FILTER_OPTIONS = [
+  {
+    name: "Today",
+    value: "today;custom;custom",
+  },
+  {
+    name: "Yesterday",
+    value: "yesterday;custom;custom",
+  },
+  {
+    name: "Last 7 days",
+    value: "last_7_days;custom;custom",
+  },
+  {
+    name: "Last 30 days",
+    value: "last_30_days;custom;custom",
+  },
+];

web/helpers/filter.helper.ts

@@ -36,6 +36,14 @@ export const satisfiesDateFilter = (date: Date, filter: string): boolean => {
   const [value, operator, from] = filter.split(";");
 
   const dateValue = getDate(value);
+
+  if (operator === "custom" && from === "custom") {
+    if (value === "today") return differenceInCalendarDays(date, new Date()) === 0;
+    if (value === "yesterday") return differenceInCalendarDays(date, new Date()) === -1;
+    if (value === "last_7_days") return differenceInCalendarDays(date, new Date()) >= -7;
+    if (value === "last_30_days") return differenceInCalendarDays(date, new Date()) >= -30;
+  }
+
   if (!from && dateValue) {
     if (operator === "after") return date >= dateValue;
     if (operator === "before") return date <= dateValue;

web/pages/profile/activity.tsx

@@ -46,8 +46,8 @@ const ProfileActivityPage: NextPageWithLayout = observer(() => {
   return (
     <>
       <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">
-        <div className="flex items-center border-b border-custom-border-100 gap-4 pb-3.5 mt-5 md:mt-16">
+      <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">
           <SidebarHamburgerToggle onClick={() => themeStore.toggleSidebar()} />
           <h3 className="text-xl font-medium">Activity</h3>
         </div>