[WEB-1119] style: editor typography, borders and alignment throughout the platform (#4322)

* chore: new font sizes * chore: update space app editor border * chore: issue detials page x-padding * chore: editor width
2024-05-01 18:01:30 +05:30 · 2024-05-01 18:01:30 +05:30 · ed4a0518fc
commit ed4a0518fc
parent 2e2747c1f9
20 changed files with 115 additions and 379 deletions
--- a/packages/editor/core/src/styles/editor.css
+++ b/packages/editor/core/src/styles/editor.css
@ -1,3 +1,14 @@
+.ProseMirror {
+  --font-size-h1: 1.5rem;
+  --font-size-h2: 1.3125rem;
+  --font-size-h3: 1.125rem;
+  --font-size-h4: 0.9375rem;
+  --font-size-h5: 0.8125rem;
+  --font-size-h6: 0.75rem;
+  --font-size-regular: 0.9375rem;
+  --font-size-list: var(--font-size-regular);
+}
+
 .ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
@ -56,7 +67,7 @@

 /* to-do list */
 ul[data-type="taskList"] li {
-  font-size: 1rem;
+  font-size: var(--font-size-list);
  line-height: 1.5;
 }

@ -162,7 +173,7 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
  cursor: text;
  line-height: 1.2;
  font-family: inherit;
-  font-size: 14px;
+  font-size: var(--font-size-regular);
  color: inherit;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
@ -310,15 +321,15 @@ ul[data-type="taskList"] ul[data-type="taskList"] {
 .prose :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  margin-top: 2rem;
  margin-bottom: 4px;
-  font-size: 1.875rem;
-  font-weight: 700;
+  font-size: var(--font-size-h1);
+  font-weight: 600;
  line-height: 1.3;
 }

 .prose :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  margin-top: 1.4rem;
  margin-bottom: 1px;
-  font-size: 1.5rem;
+  font-size: var(--font-size-h2);
  font-weight: 600;
  line-height: 1.3;
 }
@ -326,21 +337,23 @@ ul[data-type="taskList"] ul[data-type="taskList"] {
 .prose :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  margin-top: 1rem;
  margin-bottom: 1px;
-  font-size: 1.25rem;
+  font-size: var(--font-size-h3);
+  font-weight: 600;
  line-height: 1.3;
 }

 .prose :where(h4):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  margin-top: 1rem;
  margin-bottom: 1px;
-  font-size: 1rem;
+  font-size: var(--font-size-h4);
+  font-weight: 600;
  line-height: 1.5;
 }

 .prose :where(h5):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  margin-top: 1rem;
  margin-bottom: 1px;
-  font-size: 0.9rem;
+  font-size: var(--font-size-h5);
  font-weight: 600;
  line-height: 1.5;
 }
@ -348,7 +361,7 @@ ul[data-type="taskList"] ul[data-type="taskList"] {
 .prose :where(h6):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  margin-top: 1rem;
  margin-bottom: 1px;
-  font-size: 0.83rem;
+  font-size: var(--font-size-h6);
  font-weight: 600;
  line-height: 1.5;
 }
@ -356,14 +369,14 @@ ul[data-type="taskList"] ul[data-type="taskList"] {
 .prose :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  margin-top: 0.25rem;
  margin-bottom: 1px;
-  padding: 3px 2px;
-  font-size: 1rem;
+  padding: 3px 0;
+  font-size: var(--font-size-regular);
  line-height: 1.5;
 }

 .prose :where(ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) li p,
 .prose :where(ul):not(:where([class~="not-prose"], [class~="not-prose"] *)) li p {
-  font-size: 1rem;
+  font-size: var(--font-size-list);
  line-height: 1.5;
 }

--- a/space/components/editor/rich-text-read-only-editor.tsx
+++ b/space/components/editor/rich-text-read-only-editor.tsx
@ -18,7 +18,7 @@ export const RichTextReadOnlyEditor = React.forwardRef<EditorReadOnlyRefApi, Ric
        mentionHandler={{ highlights: mentionHighlights }}
        {...props}
        // overriding the customClassName to add relative class passed
-        containerClassName={cn(props.containerClassName, "relative border border-custom-border-200 p-3")}
+        containerClassName={cn("relative p-0 border-none", props.containerClassName)}
      />
    );
  }
--- a/web/components/editor/rich-text-editor/rich-text-editor.tsx
+++ b/web/components/editor/rich-text-editor/rich-text-editor.tsx
@ -51,7 +51,7 @@ export const RichTextEditor = forwardRef<EditorRefApi, RichTextEditorWrapperProp
        suggestions: mentionSuggestions,
      }}
      {...rest}
-      containerClassName={cn(containerClassName, "relative min-h-[150px] border border-custom-border-200 p-3")}
+      containerClassName={cn("relative min-h-[150px] pl-3", containerClassName)}
    />
  );
 });
--- a/web/components/inbox/content/issue-properties.tsx
+++ b/web/components/inbox/content/issue-properties.tsx
@ -33,7 +33,7 @@ export const InboxIssueContentProperties: React.FC<Props> = observer((props) =>
  if (!issue || !issue?.id) return <></>;
  return (
    <div className="flex h-min w-full flex-col divide-y-2 divide-custom-border-200 overflow-hidden">
-      <div className="h-min w-full overflow-y-auto px-5">
+      <div className="h-min w-full overflow-y-auto px-3">
        <h5 className="text-sm font-medium my-4">Properties</h5>
        <div className={`divide-y-2 divide-custom-border-200 ${!isEditable ? "opacity-60" : ""}`}>
          <div className="flex flex-col gap-3">
--- a/web/components/inbox/content/issue-root.tsx
+++ b/web/components/inbox/content/issue-root.tsx
@ -114,7 +114,7 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {

  return (
    <>
-      <div className="rounded-lg space-y-4">
+      <div className="rounded-lg space-y-4 pl-3">
        <IssueTitleInput
          workspaceSlug={workspaceSlug}
          projectId={issue.project_id}
@ -124,6 +124,7 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
          issueOperations={issueOperations}
          disabled={!isEditable}
          value={issue.name}
+          containerClassName="-ml-3"
        />

        {loader === "issue-loading" ? (
@ -140,6 +141,7 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
            disabled={!isEditable}
            issueOperations={issueOperations}
            setIsSubmitting={(value) => setIsSubmitting(value)}
+            containerClassName="-ml-3 border-none"
          />
        )}

@ -152,12 +154,15 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
          />
        )}
      </div>
-      <IssueAttachmentRoot
-        workspaceSlug={workspaceSlug}
-        projectId={projectId}
-        issueId={issue.id}
-        disabled={!isEditable}
-      />
+
+      <div className="pl-3">
+        <IssueAttachmentRoot
+          workspaceSlug={workspaceSlug}
+          projectId={projectId}
+          issueId={issue.id}
+          disabled={!isEditable}
+        />
+      </div>

      <InboxIssueContentProperties
        workspaceSlug={workspaceSlug}
@ -168,7 +173,7 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
        duplicateIssueDetails={inboxIssue?.duplicate_issue_detail}
      />

-      <div className="pb-12">
+      <div className="pb-12 pl-3">
        <IssueActivity workspaceSlug={workspaceSlug} projectId={projectId} issueId={issue.id} />
      </div>
    </>
--- a/web/components/inbox/content/root.tsx
+++ b/web/components/inbox/content/root.tsx
@ -52,7 +52,7 @@ export const InboxContentRoot: FC<TInboxContentRoot> = observer((props) => {
            isSubmitting={isSubmitting}
          />
        </div>
-        <div className="h-full w-full space-y-5 divide-y-2 divide-custom-border-300 overflow-y-auto p-5 vertical-scrollbar scrollbar-md">
+        <div className="h-full w-full space-y-5 divide-y-2 divide-custom-border-200 overflow-y-auto px-6 py-5 vertical-scrollbar scrollbar-md">
          <InboxIssueMainContent
            workspaceSlug={workspaceSlug}
            projectId={projectId}
--- a/web/components/inbox/modals/create-edit-modal/create-root.tsx
+++ b/web/components/inbox/modals/create-edit-modal/create-root.tsx
@ -133,6 +133,7 @@ export const InboxIssueCreateRoot: FC<TInboxIssueCreateRoot> = observer((props)
        data={formData}
        handleData={handleFormData}
        editorRef={descriptionEditorRef}
+        containerClassName="border-[0.5px] border-custom-border-200 py-3"
      />
      <InboxIssueProperties projectId={projectId} data={formData} handleData={handleFormData} />
      <div className="relative flex justify-between items-center gap-3">
--- a/web/components/inbox/modals/create-edit-modal/edit-root.tsx
+++ b/web/components/inbox/modals/create-edit-modal/edit-root.tsx
@ -138,6 +138,7 @@ export const InboxIssueEditRoot: FC<TInboxIssueEditRoot> = observer((props) => {
        data={formData}
        handleData={handleFormData}
        editorRef={descriptionEditorRef}
+        containerClassName="border-[0.5px] border-custom-border-200 py-3"
      />
      <InboxIssueProperties projectId={projectId} data={formData} handleData={handleFormData} isVisible />
      <div className="relative flex justify-end items-center gap-3">
--- a/web/components/inbox/modals/create-edit-modal/issue-description.tsx
+++ b/web/components/inbox/modals/create-edit-modal/issue-description.tsx
@ -11,6 +11,7 @@ import { getDescriptionPlaceholder } from "@/helpers/issue.helper";
 import { useProjectInbox } from "@/hooks/store";

 type TInboxIssueDescription = {
+  containerClassName?: string;
  workspaceSlug: string;
  projectId: string;
  workspaceId: string;
@ -21,7 +22,7 @@ type TInboxIssueDescription = {

 // TODO: have to implement GPT Assistance
 export const InboxIssueDescription: FC<TInboxIssueDescription> = observer((props) => {
-  const { workspaceSlug, projectId, workspaceId, data, handleData, editorRef } = props;
+  const {containerClassName, workspaceSlug, projectId, workspaceId, data, handleData, editorRef } = props;
  // hooks
  const { loader } = useProjectInbox();

@ -42,6 +43,7 @@ export const InboxIssueDescription: FC<TInboxIssueDescription> = observer((props
        dragDropEnabled={false}
        onChange={(_description: object, description_html: string) => handleData("description_html", description_html)}
        placeholder={getDescriptionPlaceholder}
+        containerClassName={containerClassName}
      />
    </div>
  );
--- a/web/components/inbox/modals/create-issue-modal.tsx
+++ b/web/components/inbox/modals/create-issue-modal.tsx
@ -1,326 +0,0 @@
-import { Fragment, useRef, useState } from "react";
-import { observer } from "mobx-react";
-import { useRouter } from "next/router";
-import { Controller, useForm } from "react-hook-form";
-import { Sparkle } from "lucide-react";
-import { Transition, Dialog } from "@headlessui/react";
-import { EditorRefApi } from "@plane/rich-text-editor";
-// types
-import { TIssue } from "@plane/types";
-// ui
-import { Button, Input, ToggleSwitch, TOAST_TYPE, setToast } from "@plane/ui";
-// components
-import { GptAssistantPopover } from "@/components/core";
-import { PriorityDropdown } from "@/components/dropdowns";
-import { RichTextEditor } from "@/components/editor/rich-text-editor/rich-text-editor";
-import { ISSUE_CREATED } from "@/constants/event-tracker";
-import { useApplication, useEventTracker, useWorkspace, useProjectInbox } from "@/hooks/store";
-// services
-import { AIService } from "@/services/ai.service";
-// components
-// ui
-// types
-// constants
-
-type Props = {
-  isOpen: boolean;
-  onClose: () => void;
-};
-
-const defaultValues: Partial<TIssue> = {
-  name: "",
-  description_html: "<p></p>",
-  priority: "none",
-};
-
-// services
-const aiService = new AIService();
-
-export const CreateInboxIssueModal: React.FC<Props> = observer((props) => {
-  const { isOpen, onClose } = props;
-  // router
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-  if (!workspaceSlug || !projectId) return null;
-  // states
-  const [createMore, setCreateMore] = useState(false);
-  const [gptAssistantModal, setGptAssistantModal] = useState(false);
-  const [iAmFeelingLucky, setIAmFeelingLucky] = useState(false);
-  // refs
-  const editorRef = useRef<EditorRefApi>(null);
-  // hooks
-  const workspaceStore = useWorkspace();
-  const workspaceId = workspaceStore.getWorkspaceBySlug(workspaceSlug.toString() as string)?.id.toString() as string;
-
-  // store hooks
-  const { createInboxIssue } = useProjectInbox();
-  const {
-    config: { envConfig },
-  } = useApplication();
-  const { captureIssueEvent } = useEventTracker();
-  // form info
-  const {
-    control,
-    formState: { errors, isSubmitting },
-    handleSubmit,
-    reset,
-    watch,
-    getValues,
-  } = useForm<Partial<TIssue>>({ defaultValues });
-  const issueName = watch("name");
-
-  const handleClose = () => {
-    onClose();
-    reset(defaultValues);
-    editorRef?.current?.clearEditor();
-  };
-
-  const handleFormSubmit = async (formData: Partial<TIssue>) => {
-    if (!workspaceSlug || !projectId) return;
-    await createInboxIssue(workspaceSlug.toString(), projectId.toString(), formData)
-      .then((res) => {
-        if (!createMore) {
-          router.push(`/${workspaceSlug}/projects/${projectId}/inbox/?currentTab=open&inboxIssueId=${res?.issue?.id}`);
-          handleClose();
-        } else {
-          reset(defaultValues);
-          editorRef?.current?.clearEditor();
-        }
-        captureIssueEvent({
-          eventName: ISSUE_CREATED,
-          payload: {
-            ...formData,
-            state: "SUCCESS",
-            element: "Inbox page",
-          },
-          path: router.pathname,
-        });
-      })
-      .catch((error) => {
-        console.error(error);
-        captureIssueEvent({
-          eventName: ISSUE_CREATED,
-          payload: {
-            ...formData,
-            state: "FAILED",
-            element: "Inbox page",
-          },
-          path: router.pathname,
-        });
-      });
-  };
-
-  const handleAiAssistance = async (response: string) => {
-    if (!workspaceSlug || !projectId) return;
-    editorRef.current?.setEditorValueAtCursorPosition(response);
-  };
-
-  const handleAutoGenerateDescription = async () => {
-    const issueName = getValues("name");
-    if (!workspaceSlug || !projectId || !issueName) return;
-
-    setIAmFeelingLucky(true);
-
-    aiService
-      .createGptTask(workspaceSlug as string, projectId as string, {
-        prompt: issueName,
-        task: "Generate a proper description for this issue.",
-      })
-      .then((res) => {
-        if (res.response === "")
-          setToast({
-            type: TOAST_TYPE.ERROR,
-            title: "Error!",
-            message:
-              "Issue title isn't informative enough to generate the description. Please try with a different title.",
-          });
-        else handleAiAssistance(res.response_html);
-      })
-      .catch((err) => {
-        const error = err?.data?.error;
-
-        if (err.status === 429)
-          setToast({
-            type: TOAST_TYPE.ERROR,
-            title: "Error!",
-            message: error || "You have reached the maximum number of requests of 50 requests per month per user.",
-          });
-        else
-          setToast({
-            type: TOAST_TYPE.ERROR,
-            title: "Error!",
-            message: error || "Some error occurred. Please try again.",
-          });
-      })
-      .finally(() => setIAmFeelingLucky(false));
-  };
-
-  return (
-    <Transition.Root show={isOpen} as={Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={onClose}>
-        <Transition.Child
-          as={Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-10 overflow-y-auto">
-          <div className="my-10 flex items-center justify-center p-4 text-center sm:p-0 md:my-20">
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative transform rounded-lg bg-custom-background-100 p-5 text-left shadow-custom-shadow-md transition-all sm:w-full sm:max-w-2xl">
-                <form onSubmit={handleSubmit(handleFormSubmit)}>
-                  <div className="space-y-5">
-                    <h3 className="text-xl font-semibold leading-6 text-custom-text-100">Create Inbox Issue</h3>
-                    <div className="space-y-3">
-                      <div className="mt-2 space-y-3">
-                        <div>
-                          <Controller
-                            control={control}
-                            name="name"
-                            rules={{
-                              required: "Title is required",
-                              maxLength: {
-                                value: 255,
-                                message: "Title should be less than 255 characters",
-                              },
-                            }}
-                            render={({ field: { value, onChange, ref } }) => (
-                              <Input
-                                id="name"
-                                name="name"
-                                type="text"
-                                value={value}
-                                onChange={onChange}
-                                ref={ref}
-                                hasError={Boolean(errors.name)}
-                                placeholder="Title"
-                                className="w-full resize-none text-xl"
-                              />
-                            )}
-                          />
-                        </div>
-                        <div className="relative">
-                          <div className="border-0.5 absolute bottom-3.5 right-3.5 z-10 flex rounded bg-custom-background-80">
-                            {watch("name") && issueName !== "" && (
-                              <button
-                                type="button"
-                                className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90 ${
-                                  iAmFeelingLucky ? "cursor-wait" : ""
-                                }`}
-                                onClick={handleAutoGenerateDescription}
-                                disabled={iAmFeelingLucky}
-                              >
-                                {iAmFeelingLucky ? (
-                                  "Generating response..."
-                                ) : (
-                                  <>
-                                    <Sparkle className="h-4 w-4" />I{"'"}m feeling lucky
-                                  </>
-                                )}
-                              </button>
-                            )}
-
-                            {envConfig?.has_openai_configured && (
-                              <GptAssistantPopover
-                                isOpen={gptAssistantModal}
-                                projectId={projectId.toString()}
-                                handleClose={() => {
-                                  setGptAssistantModal((prevData) => !prevData);
-                                  // this is done so that the title do not reset after gpt popover closed
-                                  reset(getValues());
-                                }}
-                                onResponse={(response) => {
-                                  handleAiAssistance(response);
-                                }}
-                                button={
-                                  <button
-                                    type="button"
-                                    className="flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90"
-                                    onClick={() => setGptAssistantModal((prevData) => !prevData)}
-                                  >
-                                    <Sparkle className="h-4 w-4" />
-                                    AI
-                                  </button>
-                                }
-                                className="!min-w-[38rem]"
-                                placement="top-end"
-                              />
-                            )}
-                          </div>
-                          <Controller
-                            name="description_html"
-                            control={control}
-                            render={({ field: { value, onChange } }) => (
-                              <RichTextEditor
-                                initialValue={!value || value === "" ? "<p></p>" : value}
-                                ref={editorRef}
-                                workspaceSlug={workspaceSlug.toString()}
-                                workspaceId={workspaceId}
-                                projectId={projectId.toString()}
-                                dragDropEnabled={false}
-                                onChange={(_description: object, description_html: string) => {
-                                  onChange(description_html);
-                                }}
-                              />
-                            )}
-                          />
-                        </div>
-
-                        <div className="flex flex-wrap items-center gap-2">
-                          <Controller
-                            control={control}
-                            name="priority"
-                            render={({ field: { value, onChange } }) => (
-                              <div className="h-5">
-                                <PriorityDropdown
-                                  value={value ?? "none"}
-                                  onChange={onChange}
-                                  buttonVariant="background-with-text"
-                                />
-                              </div>
-                            )}
-                          />
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div className="-mx-5 mt-5 flex items-center justify-between gap-2 border-t border-custom-border-200 px-5 pt-5">
-                    <div
-                      className="flex cursor-pointer items-center gap-1"
-                      onClick={() => setCreateMore((prevData) => !prevData)}
-                    >
-                      <span className="text-xs">Create more</span>
-                      <ToggleSwitch value={createMore} onChange={() => {}} size="md" />
-                    </div>
-                    <div className="flex items-center gap-2">
-                      <Button variant="neutral-primary" size="sm" onClick={() => handleClose()}>
-                        Discard
-                      </Button>
-                      <Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
-                        {isSubmitting ? "Adding Issue..." : "Add Issue"}
-                      </Button>
-                    </div>
-                  </div>
-                </form>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
-});
--- a/web/components/issues/description-input.tsx
+++ b/web/components/issues/description-input.tsx
@ -15,6 +15,7 @@ import { getDescriptionPlaceholder } from "@/helpers/issue.helper";
 import { useWorkspace } from "@/hooks/store";

 export type IssueDescriptionInputProps = {
+  containerClassName?: string;
  workspaceSlug: string;
  projectId: string;
  issueId: string;
@ -28,6 +29,7 @@ export type IssueDescriptionInputProps = {

 export const IssueDescriptionInput: FC<IssueDescriptionInputProps> = observer((props) => {
  const {
+    containerClassName,
    workspaceSlug,
    projectId,
    issueId,
@ -110,11 +112,12 @@ export const IssueDescriptionInput: FC<IssueDescriptionInputProps> = observer((p
                placeholder={
                  placeholder ? placeholder : (isFocused, value) => getDescriptionPlaceholder(isFocused, value)
                }
+                containerClassName={containerClassName}
              />
            ) : (
              <RichTextReadOnlyEditor
                initialValue={localIssueDescription.description_html ?? ""}
-                containerClassName="!p-0 !pt-2 text-custom-text-200 min-h-[150px]"
+                containerClassName={containerClassName}
              />
            )
          }
--- a/web/components/issues/issue-detail/main-content.tsx
+++ b/web/components/issues/issue-detail/main-content.tsx
@ -54,7 +54,7 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {

  return (
    <>
-      <div className="rounded-lg space-y-4">
+      <div className="rounded-lg space-y-4 pl-3">
        {issue.parent_id && (
          <IssueParentDetail
            workspaceSlug={workspaceSlug}
@ -85,6 +85,7 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
          issueOperations={issueOperations}
          disabled={!isEditable}
          value={issue.name}
+          containerClassName="-ml-3"
        />

        {/* {issue?.description_html === issueDescription && ( */}
@ -97,6 +98,7 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
          disabled={!isEditable}
          issueOperations={issueOperations}
          setIsSubmitting={(value) => setIsSubmitting(value)}
+          containerClassName="-ml-3 border-none"
        />
        {/* )} */}

@ -121,14 +123,18 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
        )}
      </div>

-      <IssueAttachmentRoot
-        workspaceSlug={workspaceSlug}
-        projectId={projectId}
-        issueId={issueId}
-        disabled={!isEditable}
-      />
+      <div className="pl-3">
+        <IssueAttachmentRoot
+          workspaceSlug={workspaceSlug}
+          projectId={projectId}
+          issueId={issueId}
+          disabled={!isEditable}
+        />
+      </div>

-      <IssueActivity workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} disabled={isArchived} />
+      <div className="pl-3">
+        <IssueActivity workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} disabled={isArchived} />
+      </div>
    </>
  );
 });
--- a/web/components/issues/issue-detail/root.tsx
+++ b/web/components/issues/issue-detail/root.tsx
@ -357,7 +357,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
        />
      ) : (
        <div className="flex h-full w-full overflow-hidden">
-          <div className="max-w-2/3 h-full w-full space-y-5 divide-y-2 divide-custom-border-200 overflow-y-auto p-5">
+          <div className="max-w-2/3 h-full w-full space-y-5 divide-y-2 divide-custom-border-200 overflow-y-auto px-6 py-5">
            <IssueMainContent
              workspaceSlug={workspaceSlug}
              swrIssueDetails={swrIssueDetails}
--- a/web/components/issues/issue-modal/form.tsx
+++ b/web/components/issues/issue-modal/form.tsx
@ -480,6 +480,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                          ref={editorRef}
                          tabIndex={getTabIndex("description_html")}
                          placeholder={getDescriptionPlaceholder}
+                          containerClassName="border-[0.5px] border-custom-border-200 py-3"
                        />
                      )}
                    />
--- a/web/components/issues/peek-overview/issue-detail.tsx
+++ b/web/components/issues/peek-overview/issue-detail.tsx
@ -69,6 +69,7 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = observer(
        issueOperations={issueOperations}
        disabled={disabled}
        value={issue.name}
+        containerClassName="-ml-3"
      />

      <IssueDescriptionInput
@ -81,6 +82,7 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = observer(
        disabled={disabled}
        issueOperations={issueOperations}
        setIsSubmitting={(value) => setIsSubmitting(value)}
+        containerClassName="-ml-3 border-none"
      />

      {currentUser && (
--- a/web/components/issues/title-input.tsx
+++ b/web/components/issues/title-input.tsx
@ -3,6 +3,7 @@ import { observer } from "mobx-react";
 // components
 import { TextArea } from "@plane/ui";
 // types
+import { cn } from "@/helpers/common.helper";
 import useDebounce from "@/hooks/use-debounce";
 import { TIssueOperations } from "./issue-detail";
 // hooks
@ -16,12 +17,26 @@ export type IssueTitleInputProps = {
  issueOperations: TIssueOperations;
  projectId: string;
  issueId: string;
+  className?: string;
+  containerClassName?: string;
 };

 export const IssueTitleInput: FC<IssueTitleInputProps> = observer((props) => {
-  const { disabled, value, workspaceSlug, isSubmitting, setIsSubmitting, issueId, issueOperations, projectId } = props;
+  const {
+    disabled,
+    value,
+    workspaceSlug,
+    isSubmitting,
+    setIsSubmitting,
+    issueId,
+    issueOperations,
+    projectId,
+    className,
+    containerClassName,
+  } = props;
  // states
  const [title, setTitle] = useState("");
+  const [isLengthVisible, setIsLengthVisible] = useState(false);
  // hooks
  const debouncedValue = useDebounce(title, 1500);

@ -76,19 +91,32 @@ export const IssueTitleInput: FC<IssueTitleInputProps> = observer((props) => {
  if (disabled) return <div className="text-2xl font-medium">{title}</div>;

  return (
-    <div className="relative">
+    <div className={cn("relative", containerClassName)}>
      <TextArea
        id="title-input"
-        className={`min-h-min block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-2 text-2xl font-medium outline-none ring-0 focus:ring-1 focus:ring-custom-primary ${
-          title?.length === 0 ? "!ring-red-400" : ""
-        }`}
+        className={cn(
+          "block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-0 text-2xl font-medium outline-none ring-0",
+          {
+            "ring-red-400": title.length === 0,
+          },
+          className
+        )}
        disabled={disabled}
        value={title}
        onChange={handleTitleChange}
        maxLength={255}
        placeholder="Issue title"
+        onFocus={() => setIsLengthVisible(true)}
+        onBlur={() => setIsLengthVisible(false)}
      />
-      <div className="pointer-events-none absolute bottom-1 right-1 z-[2] rounded bg-custom-background-100 p-0.5 text-xs text-custom-text-200">
+      <div
+        className={cn(
+          "pointer-events-none absolute bottom-1 right-1 z-[2] rounded bg-custom-background-100 p-0.5 text-xs text-custom-text-200 opacity-0 transition-opacity",
+          {
+            "opacity-100": isLengthVisible,
+          }
+        )}
+      >
        <span className={`${title.length === 0 || title.length > 255 ? "text-red-500" : ""}`}>{title.length}</span>
        /255
      </div>
--- a/web/components/pages/editor/editor-body.tsx
+++ b/web/components/pages/editor/editor-body.tsx
@ -91,8 +91,8 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
      <div
        className={cn("sticky top-0 hidden h-full flex-shrink-0 -translate-x-full p-5 duration-200 md:block", {
          "translate-x-0": sidePeekVisible,
-          "w-56 lg:w-72": !isFullWidth,
-          "w-[10%]": isFullWidth,
+          "w-40 lg:w-56": !isFullWidth,
+          "w-[5%]": isFullWidth,
        })}
      >
        {!isFullWidth && (
@ -104,8 +104,8 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
      </div>
      <div
        className={cn("h-full w-full pt-5", {
-          "md:w-[calc(100%-14rem)] xl:w-[calc(100%-18rem-18rem)]": !isFullWidth,
-          "md:w-[80%]": isFullWidth,
+          "md:w-[calc(100%-10rem)] xl:w-[calc(100%-14rem-14rem)]": !isFullWidth,
+          "md:w-[90%]": isFullWidth,
        })}
      >
        <div className="h-full w-full flex flex-col gap-y-7 overflow-y-auto overflow-x-hidden">
@ -164,8 +164,8 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
      </div>
      <div
        className={cn("hidden xl:block flex-shrink-0", {
-          "w-56 lg:w-72": !isFullWidth,
-          "w-[10%]": isFullWidth,
+          "w-40 lg:w-56": !isFullWidth,
+          "w-[5%]": isFullWidth,
        })}
      />
    </div>
--- a/web/components/pages/editor/header/root.tsx
+++ b/web/components/pages/editor/header/root.tsx
@ -46,8 +46,8 @@ export const PageEditorHeaderRoot: React.FC<Props> = observer((props) => {
      <div className="hidden md:flex items-center border-b border-custom-border-200 px-3 py-2 md:px-5">
        <div
          className={cn("flex-shrink-0", {
-            "w-56 lg:w-72": !isFullWidth,
-            "w-[10%]": isFullWidth,
+            "w-40 lg:w-56": !isFullWidth,
+            "w-[5%]": isFullWidth,
          })}
        >
          <PageSummaryPopover
--- a/web/components/pages/editor/title.tsx
+++ b/web/components/pages/editor/title.tsx
@ -23,7 +23,7 @@ export const PageEditorTitle: React.FC<Props> = observer((props) => {
    <>
      {readOnly ? (
        <h6
-          className="break-words bg-transparent text-4xl font-bold"
+          className="break-words bg-transparent text-[1.75rem] font-semibold"
          style={{
            lineHeight: "1.2",
          }}
@ -34,7 +34,7 @@ export const PageEditorTitle: React.FC<Props> = observer((props) => {
        <>
          <TextArea
            onChange={(e) => updateTitle(e.target.value)}
-            className="w-full bg-custom-background text-4xl font-bold outline-none p-0 border-none resize-none rounded-none"
+            className="w-full bg-custom-background text-[1.75rem] font-semibold outline-none p-0 border-none resize-none rounded-none"
            style={{
              lineHeight: "1.2",
            }}
--- a/web/pages/[workspaceSlug]/projects/[projectId]/archives/issues/[archivedIssueId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/archives/issues/[archivedIssueId].tsx
@ -103,9 +103,9 @@ const ArchivedIssueDetailsPage: NextPageWithLayout = observer(() => {
        </Loader>
      ) : (
        <div className="flex h-full overflow-hidden">
-          <div className="h-full w-full space-y-3 divide-y-2 divide-custom-border-200 overflow-y-auto p-5">
+          <div className="h-full w-full space-y-3 divide-y-2 divide-custom-border-200 overflow-y-auto">
            {issue?.archived_at && canRestoreIssue && (
-              <div className="flex items-center justify-between gap-2 rounded-md border border-custom-border-200 bg-custom-background-90 px-2.5 py-2 text-sm text-custom-text-200">
+              <div className="flex items-center justify-between gap-2 rounded-md border border-custom-border-200 bg-custom-background-90 px-2.5 py-2 text-sm text-custom-text-200 my-5 mx-3">
                <div className="flex items-center gap-2">
                  <ArchiveIcon className="h-4 w-4" />
                  <p>This issue has been archived.</p>