diff --git a/app/components/tag/tag-add.tsx b/app/components/tag/tag-add.tsx
index 3025736..0f7ae21 100644
--- a/app/components/tag/tag-add.tsx
+++ b/app/components/tag/tag-add.tsx
@@ -53,7 +53,7 @@ export function TagAdd({
 
   return (
     <Card
-      className={cn("w-full h-fit border-none shadow-none", className)}
+      className={cn("w-[272px] h-fit border-none shadow-none", className)}
       ref={ref}
     >
       <CardContent className="p-4 space-y-4">
diff --git a/app/components/tag/tag-list-2.tsx b/app/components/tag/tag-list-2.tsx
index 98363b7..e4b6c77 100644
--- a/app/components/tag/tag-list-2.tsx
+++ b/app/components/tag/tag-list-2.tsx
@@ -65,7 +65,7 @@ const TagList2Options = ({ tag }: ITagList2OptionsProps) => {
                 <span>编辑</span>
               </DropdownMenuItem>
             </PopoverTrigger>
-            <PopoverContent className="h-fit w-fit">
+            <PopoverContent className="h-fit w-fit p-0">
               <TagAdd color={tag.color} value={tag.name} />
             </PopoverContent>
           </Popover>
@@ -167,7 +167,7 @@ export default function TagList2({ list, className }: ITagListProps) {
                   <span>新建标签</span>
                 </div>
               </PopoverTrigger>
-              <PopoverContent className="w-[200px] p-0">
+              <PopoverContent className="w-fit h-fit p-0">
                 <TagAdd />
               </PopoverContent>
             </Popover>
diff --git a/app/components/tag/tag-list.tsx b/app/components/tag/tag-list.tsx
index d5b66b4..97e7dd1 100644
--- a/app/components/tag/tag-list.tsx
+++ b/app/components/tag/tag-list.tsx
@@ -7,6 +7,7 @@ import {
   CommandList,
   CommandSeparator,
 } from "@/components/ui/command";
+import { ScrollArea } from "@/components/ui/scroll-area";
 import { cn } from "@/lib/utils";
 import { Check, Plus } from "lucide-react";
 import React, { useState } from "react";
@@ -21,22 +22,26 @@ export default function TagList({ list, className }: ITagListProps) {
     <Command className={cn("rounded-lg border shadow-md h-fit p-2", className)}>
       <CommandList>
         <CommandGroup>
-          {list.map((tag) => (
-            <CommandItem
-              value={tag.id + ""}
-              key={tag.id}
-              className="flex justify-between items-center cursor-pointer"
-              onSelect={(v) => setSelectedValue(v + "")}
-            >
-              <div className="flex justify-start items-center">
-                <div className={cn("mr-2 h-2 w-2 rounded-[2px]", tag.color)} />
-                <span>{tag.name}</span>
-              </div>
-              {selectedValue === tag.id + "" && (
-                <Check className="ml-2 h-4 w-4 text-primary" />
-              )}
-            </CommandItem>
-          ))}
+          <ScrollArea className="max-h-32">
+            {list.map((tag) => (
+              <CommandItem
+                value={tag.id + ""}
+                key={tag.id}
+                className="flex justify-between items-center cursor-pointer"
+                onSelect={(v) => setSelectedValue(v + "")}
+              >
+                <div className="flex justify-start items-center">
+                  <div
+                    className={cn("mr-2 h-2 w-2 rounded-[2px]", tag.color)}
+                  />
+                  <span>{tag.name}</span>
+                </div>
+                {selectedValue === tag.id + "" && (
+                  <Check className="ml-2 h-4 w-4 text-primary" />
+                )}
+              </CommandItem>
+            ))}
+          </ScrollArea>
         </CommandGroup>
         <CommandSeparator />
         <CommandGroup>