From 436a6cb0849d959b6aa964719323d91d9cb171cc Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Mon, 8 Apr 2024 19:20:16 +0800
Subject: [PATCH] chore: fix text truncate

---
 web/src/components/MemoView.tsx               |   6 +-
 .../Settings/AccessTokenSection.tsx           | 163 +++++++++---------
 .../components/Settings/MyAccountSection.tsx  |  10 +-
 3 files changed, 82 insertions(+), 97 deletions(-)

diff --git a/web/src/components/MemoView.tsx b/web/src/components/MemoView.tsx
index 6954022e..cb6f57ba 100644
--- a/web/src/components/MemoView.tsx
+++ b/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>
+                  {creator.nickname || creator.username}
                 </Link>
                 <div
                   className="w-auto -mt-0.5 text-xs leading-tight text-gray-400 dark:text-gray-500 select-none"
diff --git a/web/src/components/Settings/AccessTokenSection.tsx b/web/src/components/Settings/AccessTokenSection.tsx
index 1d877f97..c61b0eb3 100644
--- a/web/src/components/Settings/AccessTokenSection.tsx
+++ b/web/src/components/Settings/AccessTokenSection.tsx
@@ -55,97 +55,90 @@ const AccessTokenSection = () => {
   };
 
   return (
-    <>
-      <div className="mt-4 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">
-              <p className="flex flex-row justify-start items-center font-medium text-gray-700 dark:text-gray-400">
-                Access Tokens
-                <LearnMore className="ml-2" url="https://usememos.com/docs/security/access-tokens" />
-              </p>
-              <p className="text-sm text-gray-700 dark:text-gray-500">A list of all access tokens for your account.</p>
-            </div>
-            <div className="mt-4 sm:mt-0">
-              <Button
-                variant="outlined"
-                color="neutral"
-                onClick={() => {
-                  showCreateAccessTokenDialog(handleCreateAccessTokenDialogConfirm);
-                }}
-              >
-                {t("common.create")}
-              </Button>
-            </div>
+    <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">
+            <p className="flex flex-row justify-start items-center font-medium text-gray-700 dark:text-gray-400">
+              Access Tokens
+              <LearnMore className="ml-2" url="https://usememos.com/docs/security/access-tokens" />
+            </p>
+            <p className="text-sm text-gray-700 dark:text-gray-500">A list of all access tokens for your account.</p>
           </div>
-          <div className="mt-2 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">
-                  <thead>
-                    <tr>
-                      <th scope="col" className="px-3 py-2 text-left text-sm font-semibold text-gray-900 dark:text-gray-400">
-                        Token
-                      </th>
-                      <th scope="col" className="py-2 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 dark:text-gray-400">
-                        Description
-                      </th>
-                      <th scope="col" className="px-3 py-2 text-left text-sm font-semibold text-gray-900 dark:text-gray-400">
-                        Created At
-                      </th>
-                      <th scope="col" className="px-3 py-2 text-left text-sm font-semibold text-gray-900 dark:text-gray-400">
-                        Expires At
-                      </th>
-                      <th scope="col" className="relative py-3.5 pl-3 pr-4">
-                        <span className="sr-only">{t("common.delete")}</span>
-                      </th>
+          <div className="mt-4 sm:mt-0">
+            <Button
+              variant="outlined"
+              color="neutral"
+              onClick={() => {
+                showCreateAccessTokenDialog(handleCreateAccessTokenDialogConfirm);
+              }}
+            >
+              {t("common.create")}
+            </Button>
+          </div>
+        </div>
+        <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">
+                <thead>
+                  <tr>
+                    <th scope="col" className="px-3 py-2 text-left text-sm font-semibold text-gray-900 dark:text-gray-400">
+                      Token
+                    </th>
+                    <th scope="col" className="py-2 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 dark:text-gray-400">
+                      Description
+                    </th>
+                    <th scope="col" className="px-3 py-2 text-left text-sm font-semibold text-gray-900 dark:text-gray-400">
+                      Created At
+                    </th>
+                    <th scope="col" className="px-3 py-2 text-left text-sm font-semibold text-gray-900 dark:text-gray-400">
+                      Expires At
+                    </th>
+                    <th scope="col" className="relative py-3.5 pl-3 pr-4">
+                      <span className="sr-only">{t("common.delete")}</span>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-gray-200 dark:divide-zinc-700">
+                  {userAccessTokens.map((userAccessToken) => (
+                    <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)}>
+                          <Icon.Clipboard className="w-4 h-auto text-gray-400" />
+                        </IconButton>
+                      </td>
+                      <td className="whitespace-nowrap py-2 pl-4 pr-3 text-sm text-gray-900 dark:text-gray-400">
+                        {userAccessToken.description}
+                      </td>
+                      <td className="whitespace-nowrap px-3 py-2 text-sm text-gray-500 dark:text-gray-400">
+                        {userAccessToken.issuedAt?.toLocaleString()}
+                      </td>
+                      <td className="whitespace-nowrap px-3 py-2 text-sm text-gray-500 dark:text-gray-400">
+                        {userAccessToken.expiresAt?.toLocaleString() ?? "Never"}
+                      </td>
+                      <td className="relative whitespace-nowrap py-2 pl-3 pr-4 text-right text-sm">
+                        <IconButton
+                          color="danger"
+                          variant="plain"
+                          size="sm"
+                          onClick={() => {
+                            handleDeleteAccessToken(userAccessToken.accessToken);
+                          }}
+                        >
+                          <Icon.Trash className="w-4 h-auto" />
+                        </IconButton>
+                      </td>
                     </tr>
-                  </thead>
-                  <tbody className="divide-y divide-gray-200 dark:divide-zinc-700">
-                    {userAccessTokens.map((userAccessToken) => (
-                      <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)}
-                          >
-                            <Icon.Clipboard className="w-4 h-auto text-gray-400" />
-                          </IconButton>
-                        </td>
-                        <td className="whitespace-nowrap py-2 pl-4 pr-3 text-sm text-gray-900 dark:text-gray-400">
-                          {userAccessToken.description}
-                        </td>
-                        <td className="whitespace-nowrap px-3 py-2 text-sm text-gray-500 dark:text-gray-400">
-                          {userAccessToken.issuedAt?.toLocaleString()}
-                        </td>
-                        <td className="whitespace-nowrap px-3 py-2 text-sm text-gray-500 dark:text-gray-400">
-                          {userAccessToken.expiresAt?.toLocaleString() ?? "Never"}
-                        </td>
-                        <td className="relative whitespace-nowrap py-2 pl-3 pr-4 text-right text-sm">
-                          <IconButton
-                            color="danger"
-                            variant="plain"
-                            size="sm"
-                            onClick={() => {
-                              handleDeleteAccessToken(userAccessToken.accessToken);
-                            }}
-                          >
-                            <Icon.Trash className="w-4 h-auto" />
-                          </IconButton>
-                        </td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
+                  ))}
+                </tbody>
+              </table>
             </div>
           </div>
         </div>
       </div>
-    </>
+    </div>
   );
 };
 
diff --git a/web/src/components/Settings/MyAccountSection.tsx b/web/src/components/Settings/MyAccountSection.tsx
index 24b6c92d..21532c5f 100644
--- a/web/src/components/Settings/MyAccountSection.tsx
+++ b/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>