ui(web): Set tag input field in preview modal to 100% width to fix ov…

…erflow 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
hoarder-app · May 19, 2024 · cb62db7 · cb62db7
1 parent fdc27d3
commit cb62db7
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 4 deletions.
diff --git 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",
       }}
     />
   );

diff --git a/apps/web/components/dashboard/preview/BookmarkPreview.tsx b/apps/web/components/dashboard/preview/BookmarkPreview.tsx
@@ -133,12 +133,12 @@ export default function BookmarkPreview({
         </div>
 
         <CreationTime createdAt={bookmark.createdAt} />
-        <div className="flex gap-4">
+        <div className="flex items-center gap-4">
           <p className="text-sm text-gray-400">Tags</p>
           <TagsEditor bookmark={bookmark} />
         </div>
         <div className="flex gap-4">
-          <p className="text-sm text-gray-400">Note</p>
+          <p className="pt-2 text-sm text-gray-400">Note</p>
           <NoteEditor bookmark={bookmark} />
         </div>
         <ActionBar bookmark={bookmark} />