chore: tweak timeline styles

web/src/components/ActivityCalendar.tsx

@@ -49,7 +49,7 @@ const ActivityCalendar = (props: Props) => {
         const date = `${year}-${month}-${day}`;
         const count = data[date] || 0;
         return day ? (
-          <Tooltip className="shrink-0" key={`${date}-${index}`} title={`${count} memos in ${date}`} placement="top">
+          <Tooltip className="shrink-0" key={`${date}-${index}`} title={`${count} memos in ${date}`} placement="top" arrow>
             <div className={classNames("w-3 h-3 rounded flex justify-center items-center", getBgColor(count, maxCount))}></div>
           </Tooltip>
         ) : (

web/src/components/ChangeMemoCreatedTsDialog.tsx

 import { Button, IconButton, Input } from "@mui/joy";
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
-import { getNormalizedTimeString, getUnixTime } from "@/helpers/datetime";
+import { getNormalizedTimeString } from "@/helpers/datetime";
 import { useMemoStore } from "@/store/v1";
 import { useTranslate } from "@/utils/i18n";
 import { generateDialog } from "./Dialog";
@@ -40,12 +40,6 @@ const ChangeMemoCreatedTsDialog: React.FC<Props> = (props: Props) => {
   };
 
   const handleSaveBtnClick = async () => {
-    const nowTs = getUnixTime();
-    if (getUnixTime(createdAt) > nowTs) {
-      toast.error(t("message.invalid-created-datetime"));
-      return;
-    }
-
     try {
       await memoStore.updateMemo(
         {

web/src/pages/Timeline.tsx

@@ -108,7 +108,7 @@ const Timeline = () => {
                 key={group.month}
                 className={classNames("flex justify-start items-start w-full mt-2 mb-4", md ? "flex-row" : "flex-col")}
               >
-                <div className={classNames("flex shrink-0", md ? "flex-col w-32 pr-4 pl-1 pb-8" : "flex-row w-full pl-1 mt-2 mb-2")}>
+                <div className={classNames("flex shrink-0", md ? "flex-col w-32 pr-4 pl-2 pb-8" : "flex-row w-full pl-1 mt-2 mb-2")}>
                   <div className="w-full flex flex-col mt-2 mb-2">
                     <span className="font-medium text-4xl leading-none mb-1">
                       {new Date(group.month).toLocaleString(i18n.language, { month: "short" })}
@@ -122,11 +122,11 @@ const Timeline = () => {
                   {group.memos.map((memo, index) => (
                     <div
                       key={`${memo.id}-${memo.createTime}`}
-                      className="relative w-full flex flex-col justify-start items-start pl-4 sm:pl-8 pt-0"
+                      className={classNames("relative w-full flex flex-col justify-start items-start pl-4 sm:pl-10 pt-0")}
                     >
                       <MemoView className="!border !border-gray-100 dark:!border-zinc-700" memo={memo} />
                       {group.memos.length > 1 && (
-                        <div className="absolute -left-1 sm:left-2 top-4 h-full">
+                        <div className="absolute -left-2 sm:left-2 top-4 h-full">
                           {index !== group.memos.length - 1 && (
                             <div className="absolute top-2 left-[7px] h-full w-0.5 bg-gray-200 dark:bg-gray-700 block"></div>
                           )}