chore: tweak padding styles

web/src/components/MemoContent/index.tsx

@@ -69,7 +69,7 @@ const MemoContent: React.FC<Props> = (props: Props) => {
           embeddedMemos: embeddedMemos || new Set(),
         }}
       >
-        <div className={`mt-1 w-full flex flex-col justify-start items-start text-gray-800 dark:text-gray-300 ${className || ""}`}>
+        <div className={`w-full flex flex-col justify-start items-start text-gray-800 dark:text-gray-300 ${className || ""}`}>
           <div
             ref={memoContentContainerRef}
             className={classNames(
@@ -89,19 +89,19 @@ const MemoContent: React.FC<Props> = (props: Props) => {
               return <Renderer key={`${node.type}-${index}`} index={String(index)} node={node} />;
             })}
           </div>
+          {memo && showCompactMode && (
+            <div className="w-full mt-1">
+              <div
+                className="w-auto inline-flex flex-row justify-start items-center cursor-pointer text-sm text-blue-600 dark:text-blue-400 hover:opacity-80"
+                onClick={() => setShowCompactMode(false)}
+              >
+                <span>{t("memo.show-more")}</span>
+                <Icon.ChevronRight className="w-4 h-auto" />
+              </div>
+            </div>
+          )}
         </div>
       </RendererContext.Provider>
-      {memo && showCompactMode && (
-        <div className="w-full mt-2">
-          <div
-            className="w-auto inline-flex flex-row justify-start items-center cursor-pointer text-sm text-blue-600 dark:text-blue-400 hover:opacity-80"
-            onClick={() => setShowCompactMode(false)}
-          >
-            <span>{t("memo.show-more")}</span>
-            <Icon.ChevronRight className="w-4 h-auto" />
-          </div>
-        </div>
-      )}
     </>
   );
 };

web/src/components/MemoReactionListView.tsx

@@ -34,7 +34,7 @@ const MemoReactionListView = (props: Props) => {
 
   return (
     reactions.length > 0 && (
-      <div className="w-full mt-2 flex flex-row justify-start items-start flex-wrap gap-1 select-none">
+      <div className="w-full flex flex-row justify-start items-start flex-wrap gap-1 select-none">
         {Array.from(reactionGroup).map(([reactionType, users]) => {
           return <ReactionView key={`${reactionType.toString()} ${users.length}`} memo={memo} reactionType={reactionType} users={users} />;
         })}

web/src/components/MemoRelationListView.tsx

@@ -37,7 +37,7 @@ const MemoRelationListView = (props: Props) => {
   return (
     <>
       {referencingMemoList.length > 0 && (
-        <div className="w-full mt-2 flex flex-row justify-start items-center flex-wrap gap-2">
+        <div className="w-full flex flex-row justify-start items-center flex-wrap gap-2">
           {referencingMemoList.map((memo) => {
             return (
               <div key={memo.name} className="block w-auto max-w-[50%]">
@@ -57,7 +57,7 @@ const MemoRelationListView = (props: Props) => {
         </div>
       )}
       {referencedMemoList.length > 0 && (
-        <div className="w-full mt-2 flex flex-row justify-start items-center flex-wrap gap-2">
+        <div className="w-full flex flex-row justify-start items-center flex-wrap gap-2">
           {referencedMemoList.map((memo) => {
             return (
               <div key={memo.name} className="block w-auto max-w-[50%]">

web/src/components/MemoResourceListView.tsx

@@ -62,7 +62,7 @@ const MemoResourceListView = ({ resources = [] }: { resources: Resource[] }) =>
 
     if (resources.length === 1) {
       return (
-        <div className="mt-2 mb-1 max-w-full flex justify-center items-center border dark:border-zinc-800 rounded overflow-hidden hide-scrollbar hover:shadow-md">
+        <div className="max-w-full flex justify-center items-center border dark:border-zinc-800 rounded overflow-hidden hide-scrollbar hover:shadow-md">
           <MediaCard resource={mediaResources[0]} />
         </div>
       );
@@ -78,17 +78,17 @@ const MemoResourceListView = ({ resources = [] }: { resources: Resource[] }) =>
     ));
 
     if (resources.length === 2 || resources.length === 4) {
-      return <div className="w-full mt-2 mb-1 grid gap-2 grid-cols-2">{cards}</div>;
+      return <div className="w-full grid gap-2 grid-cols-2">{cards}</div>;
     }
 
-    return <div className="w-full mt-2 mb-1 grid gap-2 grid-cols-2 sm:grid-cols-3">{cards}</div>;
+    return <div className="w-full grid gap-2 grid-cols-2 sm:grid-cols-3">{cards}</div>;
   };
 
   const OtherList = ({ resources = [] }: { resources: Resource[] }) => {
     if (resources.length === 0) return <></>;
 
     return (
-      <div className="w-full flex flex-row justify-start flex-wrap mt-2 mb-1 gap-2">
+      <div className="w-full flex flex-row justify-start flex-wrap gap-2">
         {otherResources.map((resource) => (
           <MemoResource key={resource.id} resource={resource} />
         ))}

web/src/components/MemoView.tsx

@@ -76,14 +76,14 @@ const MemoView: React.FC<Props> = (props: Props) => {
   return (
     <div
       className={classNames(
-        "group relative flex flex-col justify-start items-start w-full px-4 pt-4 pb-3  mb-2 bg-white dark:bg-zinc-800 rounded-lg border border-white dark:border-zinc-800 hover:border-gray-200 dark:hover:border-zinc-700",
+        "group relative flex flex-col justify-start items-start w-full px-4 pt-4 pb-3 mb-2 gap-2 bg-white dark:bg-zinc-800 rounded-lg border border-white dark:border-zinc-800 hover:border-gray-200 dark:hover:border-zinc-700",
         "memos-" + memo.id,
         memo.pinned && props.showPinned && "border-gray-200 border dark:border-zinc-700",
         className,
       )}
       ref={memoContainerRef}
     >
-      <div className="w-full h-7 flex flex-row justify-between items-center mb-2 gap-2">
+      <div className="w-full h-7 flex flex-row justify-between items-center gap-2">
         <div className="w-auto max-w-[calc(100%-8rem)] grow flex flex-row justify-start items-center">
           {creator && (
             <div className="w-full flex flex-row justify-start items-center">
@@ -151,7 +151,7 @@ const MemoView: React.FC<Props> = (props: Props) => {
       />
       <MemoResourceListView resources={memo.resources} />
       <div className="w-full flex flex-row justify-between items-center">
-        <div className="text-sm leading-6 text-gray-400 select-none">
+        <div className="text-sm leading-none text-gray-400 select-none">
           <relative-time datetime={memo.displayTime?.toISOString()} tense="past" onClick={handleGotoMemoDetailPage}></relative-time>
         </div>
       </div>