Fix custom zap settings emoji picker

src/components/EmojiPicker/EmojiPicker.module.scss

@@ -2,10 +2,10 @@
   position: relative;
   display: grid;
   grid-template-columns: 50px 50px 50px 50px 50px 50px;
-  width: 322px;
+  // width: 322px;
   max-height: 200px;
   overflow-y: scroll;
-  padding: 4px;
+  // padding: 4px;
   background-color: var(--background-input);
   border: none;
   border-radius: 8px;

src/components/Modal/Modal.tsx

@@ -9,7 +9,7 @@ const Modal: Component<{
   open?: boolean,
   id?: string,
   opaqueBackdrop?: boolean,
-  onBackdropClick?: () => void,
+  onBackdropClick?: (e: MouseEvent) => void,
 }> = (props) => {
 
   return (
@@ -18,7 +18,13 @@ const Modal: Component<{
         <div
           id={props.id}
           class={`${styles.modal} ${props.opaqueBackdrop ? styles.opaque : ''}`}
-          onClick={props.onBackdropClick}
+          onClick={(e: MouseEvent) => {
+            if (!(e.target as Element).classList.contains(styles.modal)) {
+              return;
+            }
+
+            props.onBackdropClick && props.onBackdropClick(e)
+          }}
         >
           {props.children}
         </div>

src/components/SettingsZap/SettingsZap.module.scss

@@ -114,7 +114,6 @@
 
 .zapEmojiChangeModal {
   position: fixed;
-  width: 420px;
   height: 344px;
   color: var(--text-secondary);
   background-color: var(--background-input);
@@ -123,19 +122,22 @@
 
   display: flex;
   flex-direction: column;
-  padding: 22px;
+  padding-left: 22px;
+  padding-right: 16px;
+  padding-block: 22px;
 
   justify-content: flex-start;
   align-items: center;
 
   input {
-    width: 220px;
+    display: flex;
+    width: 70%;
     height: 36px;
     text-align: left;
     margin: 0;
     margin-bottom: 24px;
     padding-bottom: 0;
-    padding-top: 4px;
+    padding-top: 2px;
     padding-inline: 16px;
     font-size: 16px;
     font-weight: 600;
@@ -156,6 +158,7 @@
       font-size: 16px;
       font-weight: 400;
       line-height: 20px;
+      transform: translate(0, 2px);
     }
   }
 
@@ -177,7 +180,7 @@
 
     position: absolute;
     top: 16px;
-    right: 18px;
+    right: 22px;
 
     .iconClose {
       width: 14px;