From b8a2295ce6b8ded25b6f073d3617cee59ff494b1 Mon Sep 17 00:00:00 2001
From: NyaaaDoge <NyaaaDoge@gmail.com>
Date: Thu, 31 Oct 2024 20:15:14 +0800
Subject: [PATCH] fix: show scrollbar when list table overflows in settings
 menu

---
 .../src/modules/settings/tabs/lists/index.tsx | 244 +++++++++---------
 1 file changed, 123 insertions(+), 121 deletions(-)

diff --git a/apps/renderer/src/modules/settings/tabs/lists/index.tsx b/apps/renderer/src/modules/settings/tabs/lists/index.tsx
index 0f12bce869..289f0cd57e 100644
--- a/apps/renderer/src/modules/settings/tabs/lists/index.tsx
+++ b/apps/renderer/src/modules/settings/tabs/lists/index.tsx
@@ -101,128 +101,130 @@ export const SettingLists = () => {
       <div className="flex flex-1 flex-col">
         <ScrollArea.ScrollArea viewportClassName="max-h-[380px]">
           {listList.data?.length ? (
-            <Table className="mt-4">
-              <TableHeader className="border-b">
-                <TableRow className="[&_*]:!font-semibold">
-                  <TableHead size="sm">{t.settings("lists.title")}</TableHead>
-                  <TableHead size="sm">{t.settings("lists.view")}</TableHead>
-                  <TableHead size="sm">{t.settings("lists.fee.label")}</TableHead>
-                  <TableHead size="sm">{t.settings("lists.subscriptions")}</TableHead>
-                  <TableHead size="sm">{t.settings("lists.earnings")}</TableHead>
-                  <TableHead size="sm" className="center">
-                    {t.common("words.actions")}
-                  </TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody className="border-t-[12px] border-transparent [&_td]:!px-3">
-                {listList.data?.map((row) => (
-                  <TableRow key={row.title} className="h-8">
-                    <TableCell size="sm">
-                      <a
-                        target="_blank"
-                        href={UrlBuilder.shareList(row.id)}
-                        className="inline-flex items-center gap-2 font-semibold"
-                      >
-                        {row.image && (
-                          <Avatar className="size-6">
-                            <AvatarImage src={row.image} />
-                          </Avatar>
-                        )}
-                        <span className="inline-block max-w-[200px] truncate">{row.title}</span>
-                      </a>
-                    </TableCell>
-                    <TableCell size="sm">
-                      <Tooltip>
-                        <TooltipTrigger asChild>
-                          <span
-                            className={cn("inline-flex items-center", views[row.view].className)}
-                          >
-                            {views[row.view].icon}
-                          </span>
-                        </TooltipTrigger>
-                        <TooltipPortal>
-                          <TooltipContent>{t(views[row.view].name)}</TooltipContent>
-                        </TooltipPortal>
-                      </Tooltip>
-                    </TableCell>
-                    <TableCell size="sm">
-                      <div className="flex items-center gap-1">
-                        {row.fee}
-                        <i className="i-mgc-power shrink-0 text-lg text-accent" />
-                      </div>
-                    </TableCell>
-                    <TableCell size="sm">{row.subscriptionCount}</TableCell>
-                    <TableCell size="sm">
-                      <Balance>{BigInt(row.purchaseAmount || 0n)}</Balance>
-                    </TableCell>
-                    <TableCell size="sm" className="center">
-                      <Tooltip>
-                        <TooltipTrigger asChild>
-                          <Button
-                            variant="ghost"
-                            onClick={() => {
-                              present({
-                                title: t.settings("lists.feeds.manage"),
-                                content: () => <ListFeedsModalContent id={row.id} />,
-                              })
-                            }}
-                          >
-                            <i className="i-mgc-inbox-cute-re" />
-                          </Button>
-                        </TooltipTrigger>
-                        <TooltipPortal>
-                          <TooltipContent>{t.common("words.manage")}</TooltipContent>
-                        </TooltipPortal>
-                      </Tooltip>
-                      <Tooltip>
-                        <TooltipTrigger asChild>
-                          <Button
-                            variant="ghost"
-                            onClick={() => {
-                              present({
-                                title: t.settings("lists.edit.label"),
-                                content: () => <ListCreationModalContent id={row.id} />,
-                              })
-                            }}
-                          >
-                            <i className="i-mgc-edit-cute-re" />
-                          </Button>
-                        </TooltipTrigger>
-                        <TooltipPortal>
-                          <TooltipContent>{t.common("words.edit")}</TooltipContent>
-                        </TooltipPortal>
-                      </Tooltip>
-                      <Tooltip>
-                        <TooltipTrigger asChild>
-                          <ActionButton
-                            size="sm"
-                            onClick={() =>
-                              present({
-                                title: t.settings("lists.delete.confirm"),
-                                content: ({ dismiss }) => (
-                                  <ConfirmDestroyModalContent
-                                    listId={row.id}
-                                    onSuccess={() => {
-                                      listList.refetch()
-                                      dismiss()
-                                    }}
-                                  />
-                                ),
-                              })
-                            }
-                          >
-                            <i className="i-mgc-delete-2-cute-re" />
-                          </ActionButton>
-                        </TooltipTrigger>
-                        <TooltipPortal>
-                          <TooltipContent>{t.common("words.delete")}</TooltipContent>
-                        </TooltipPortal>
-                      </Tooltip>
-                    </TableCell>
+            <div className="overflow-auto">
+              <Table className="mt-4">
+                <TableHeader className="border-b">
+                  <TableRow className="[&_*]:!font-semibold">
+                    <TableHead size="sm">{t.settings("lists.title")}</TableHead>
+                    <TableHead size="sm">{t.settings("lists.view")}</TableHead>
+                    <TableHead size="sm">{t.settings("lists.fee.label")}</TableHead>
+                    <TableHead size="sm">{t.settings("lists.subscriptions")}</TableHead>
+                    <TableHead size="sm">{t.settings("lists.earnings")}</TableHead>
+                    <TableHead size="sm" className="center">
+                      {t.common("words.actions")}
+                    </TableHead>
                   </TableRow>
-                ))}
-              </TableBody>
-            </Table>
+                </TableHeader>
+                <TableBody className="border-t-[12px] border-transparent [&_td]:!px-3">
+                  {listList.data?.map((row) => (
+                    <TableRow key={row.title} className="h-8">
+                      <TableCell size="sm">
+                        <a
+                          target="_blank"
+                          href={UrlBuilder.shareList(row.id)}
+                          className="inline-flex items-center gap-2 font-semibold"
+                        >
+                          {row.image && (
+                            <Avatar className="size-6">
+                              <AvatarImage src={row.image} />
+                            </Avatar>
+                          )}
+                          <span className="inline-block max-w-[200px] truncate">{row.title}</span>
+                        </a>
+                      </TableCell>
+                      <TableCell size="sm">
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <span
+                              className={cn("inline-flex items-center", views[row.view].className)}
+                            >
+                              {views[row.view].icon}
+                            </span>
+                          </TooltipTrigger>
+                          <TooltipPortal>
+                            <TooltipContent>{t(views[row.view].name)}</TooltipContent>
+                          </TooltipPortal>
+                        </Tooltip>
+                      </TableCell>
+                      <TableCell size="sm">
+                        <div className="flex items-center gap-1">
+                          {row.fee}
+                          <i className="i-mgc-power shrink-0 text-lg text-accent" />
+                        </div>
+                      </TableCell>
+                      <TableCell size="sm">{row.subscriptionCount}</TableCell>
+                      <TableCell size="sm">
+                        <Balance>{BigInt(row.purchaseAmount || 0n)}</Balance>
+                      </TableCell>
+                      <TableCell size="sm" className="center">
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <Button
+                              variant="ghost"
+                              onClick={() => {
+                                present({
+                                  title: t.settings("lists.feeds.manage"),
+                                  content: () => <ListFeedsModalContent id={row.id} />,
+                                })
+                              }}
+                            >
+                              <i className="i-mgc-inbox-cute-re" />
+                            </Button>
+                          </TooltipTrigger>
+                          <TooltipPortal>
+                            <TooltipContent>{t.common("words.manage")}</TooltipContent>
+                          </TooltipPortal>
+                        </Tooltip>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <Button
+                              variant="ghost"
+                              onClick={() => {
+                                present({
+                                  title: t.settings("lists.edit.label"),
+                                  content: () => <ListCreationModalContent id={row.id} />,
+                                })
+                              }}
+                            >
+                              <i className="i-mgc-edit-cute-re" />
+                            </Button>
+                          </TooltipTrigger>
+                          <TooltipPortal>
+                            <TooltipContent>{t.common("words.edit")}</TooltipContent>
+                          </TooltipPortal>
+                        </Tooltip>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <ActionButton
+                              size="sm"
+                              onClick={() =>
+                                present({
+                                  title: t.settings("lists.delete.confirm"),
+                                  content: ({ dismiss }) => (
+                                    <ConfirmDestroyModalContent
+                                      listId={row.id}
+                                      onSuccess={() => {
+                                        listList.refetch()
+                                        dismiss()
+                                      }}
+                                    />
+                                  ),
+                                })
+                              }
+                            >
+                              <i className="i-mgc-delete-2-cute-re" />
+                            </ActionButton>
+                          </TooltipTrigger>
+                          <TooltipPortal>
+                            <TooltipContent>{t.common("words.delete")}</TooltipContent>
+                          </TooltipPortal>
+                        </Tooltip>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
           ) : listList.isLoading ? (
             <LoadingCircle size="large" className="center absolute inset-0" />
           ) : (