chore: fix text truncate

web/src/components/MemoView.tsx

@@ -92,13 +92,11 @@ const MemoView: React.FC<Props> = (props: Props) => {
               </Link>
               <div className="w-full flex flex-col justify-center items-start">
                 <Link
-                  className="w-auto leading-tight hover:opacity-80"
+                  className="w-full block leading-tight hover:opacity-80 truncate text-gray-600 dark:text-gray-400"
                   to={`/u/${encodeURIComponent(creator.username)}`}
                   unstable_viewTransition
                 >
-                  <span className="text-gray-600 leading-tight max-w-[80%] truncate dark:text-gray-400">
                   {creator.nickname || creator.username}
-                  </span>
                 </Link>
                 <div
                   className="w-auto -mt-0.5 text-xs leading-tight text-gray-400 dark:text-gray-500 select-none"

web/src/components/Settings/AccessTokenSection.tsx

@@ -55,8 +55,7 @@ const AccessTokenSection = () => {
   };
 
   return (
-    <>
-      <div className="mt-4 w-full flex flex-col justify-start items-start space-y-4">
+    <div className="mt-6 w-full flex flex-col justify-start items-start space-y-4">
       <div className="w-full">
         <div className="sm:flex sm:items-center sm:justify-between">
           <div className="sm:flex-auto space-y-1">
@@ -78,7 +77,7 @@ const AccessTokenSection = () => {
             </Button>
           </div>
         </div>
-          <div className="mt-2 flow-root">
+        <div className="flow-root">
           <div className="overflow-x-auto">
             <div className="inline-block min-w-full py-2 align-middle">
               <table className="min-w-full divide-y divide-gray-300 dark:divide-zinc-600">
@@ -106,12 +105,7 @@ const AccessTokenSection = () => {
                     <tr key={userAccessToken.accessToken}>
                       <td className="whitespace-nowrap px-3 py-2 text-sm text-gray-900 dark:text-gray-400 flex flex-row justify-start items-center gap-x-1">
                         <span className="font-mono">{getFormatedAccessToken(userAccessToken.accessToken)}</span>
-                          <IconButton
-                            color="neutral"
-                            variant="plain"
-                            size="sm"
-                            onClick={() => copyAccessToken(userAccessToken.accessToken)}
-                          >
+                        <IconButton color="neutral" variant="plain" size="sm" onClick={() => copyAccessToken(userAccessToken.accessToken)}>
                           <Icon.Clipboard className="w-4 h-auto text-gray-400" />
                         </IconButton>
                       </td>
@@ -145,7 +139,6 @@ const AccessTokenSection = () => {
         </div>
       </div>
     </div>
-    </>
   );
 };
 

web/src/components/Settings/MyAccountSection.tsx

@@ -45,14 +45,8 @@ const MyAccountSection = () => {
             </Button>
           </MenuButton>
           <Menu className="text-sm" size="sm" placement="bottom">
-            <MenuItem onClick={showChangePasswordDialog}>
-              <Icon.ArchiveRestore className="w-4 h-auto" />
-              {t("setting.account-section.change-password")}
-            </MenuItem>
-            <MenuItem onClick={() => downloadExportedMemos(user)}>
-              <Icon.Trash className="w-4 h-auto" />
-              {t("setting.account-section.export-memos")}
-            </MenuItem>
+            <MenuItem onClick={showChangePasswordDialog}>{t("setting.account-section.change-password")}</MenuItem>
+            <MenuItem onClick={() => downloadExportedMemos(user)}>{t("setting.account-section.export-memos")}</MenuItem>
           </Menu>
         </Dropdown>
       </div>