ui(web): Set tag input field in preview modal to 100% width to fix overflow issues on select dropdown (#165)

ui(web): Fixed issue with rounded corners on tag input field in preview modal

ui(web): Adjusted styles for labels and fields in preview modal for visual consistency

1 files changed, 22 insertions, 2 deletions

diff --git a/apps/web/components/dashboard/bookmarks/TagsEditor.tsx b/apps/web/components/dashboard/bookmarks/TagsEditor.tsx
index ec1c3bfa..4c836b32 100644
--- a/apps/web/components/dashboard/bookmarks/TagsEditor.tsx
+++ b/apps/web/components/dashboard/bookmarks/TagsEditor.tsx
@@ -120,14 +120,32 @@ export function TagsEditor({ bookmark }: { bookmark: ZBookmark }) {
           overflowY: "auto",
           scrollbarWidth: "none",
         }),
+        container: (styles) => ({
+          ...styles,
+          width: "100%",
+        }),
         control: (styles) => ({
           ...styles,
+          overflow: "hidden",
           backgroundColor: "hsl(var(--background))",
           borderColor: "hsl(var(--border))",
           ":hover": {
             borderColor: "hsl(var(--border))",
           },
         }),
+        input: (styles) => ({
+          ...styles,
+          color: "rgb(156 163 175)",
+        }),
+        menu: (styles) => ({
+          ...styles,
+          overflow: "hidden",
+          color: "rgb(156 163 175)",
+        }),
+        placeholder: (styles) => ({
+          ...styles,
+          color: "hsl(var(--muted-foreground))",
+        }),
       }}
       components={{
         MultiValueContainer: ({ children, data }) => (
@@ -155,9 +173,11 @@ export function TagsEditor({ bookmark }: { bookmark: ZBookmark }) {
       }}
       classNames={{
         multiValueRemove: () => "my-auto",
-        valueContainer: () => "gap-2 bg-background",
-        menuList: () => "text-sm bg-background",
+        valueContainer: () => "gap-2 bg-background text-sm",
+        menu: () => "dark:text-gray-300",
+        menuList: () => "bg-background text-sm",
         option: () => "text-red-500",
+        input: () => "dark:text-gray-300",
       }}
     />
   );