Fix/Displaying emoji picker modal (#153)

Ryczko · May 10, 2023 · e783f9d · e783f9d
1 parent b339d06
commit e783f9d
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 11 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,7 +22,7 @@
     "start:emulator": "firebase emulators:exec 'npm start'"
   },
   "dependencies": {
-    "@headlessui/react": "^1.6.2",
+    "@headlessui/react": "^1.7.14",
     "@heroicons/react": "^1.0.6",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",

diff --git a/src/features/surveys/components/EmojiPicker/EmojiPicker.tsx b/src/features/surveys/components/EmojiPicker/EmojiPicker.tsx
@@ -69,6 +69,7 @@ function EmojiPicker({
       <StyledDialog
         onClose={() => setDisplayPicker(false)}
         isOpen={displayPicker}
+        contentClassName="w-[400px] p-0"
         content={
           <Picker
             onEmojiClick={!addEmoji ? onEmojiClick : onEmojiClickAdd}
@@ -113,7 +114,7 @@ function EmojiPicker({
                 name: 'Flags',
               },
             ]}
-            width={400}
+            width={'100%'}
             height={400}
           />
         }

diff --git a/src/shared/components/StyledDialog/StyledDialog.tsx b/src/shared/components/StyledDialog/StyledDialog.tsx
@@ -1,18 +1,21 @@
 import { Fragment } from 'react';
 import { Dialog, Transition } from '@headlessui/react';
+import clsx from 'clsx';
 
 interface StyledDialogProps {
   title?: string;
   content: React.ReactNode;
   isOpen: boolean;
   onClose: () => void;
+  contentClassName?: string;
 }
 
 export default function StyledDialog({
   title = '',
   content,
   isOpen,
   onClose,
+  contentClassName = '',
 }: StyledDialogProps) {
   return (
     <Transition appear show={isOpen} as={Fragment}>
@@ -40,7 +43,12 @@ export default function StyledDialog({
               leaveFrom="opacity-100 scale-100"
               leaveTo="opacity-0 scale-95"
             >
-              <Dialog.Panel className="flex w-auto max-w-md flex-col justify-center overflow-hidden rounded-md bg-white p-6 text-left shadow-xl transition-all">
+              <Dialog.Panel
+                className={clsx(
+                  'flex w-auto max-w-md flex-col justify-center overflow-hidden rounded-md bg-white p-6 text-left shadow-xl transition-all',
+                  contentClassName
+                )}
+              >
                 <Dialog.Title
                   as="h3"
                   className="text-lg font-medium leading-6 text-zinc-900"