fixed delete button on tags

src/components/containers/TagField/index.tsx

@@ -1,14 +1,8 @@
 import React, { FC, HTMLAttributes } from 'react';
 import styles from './styles.module.scss';
 
-type IProps = HTMLAttributes<HTMLDivElement> & {}
+type IProps = HTMLAttributes<HTMLDivElement> & {};
 
-const TagField: FC<IProps> = ({
-  children,
-}) => (
-  <div className={styles.wrap}>
-    {children}
-  </div>
-);
+const TagField: FC<IProps> = ({ children }) => <div className={styles.wrap}>{children}</div>;
 
 export { TagField };

src/components/containers/TagField/styles.module.scss

@@ -1,4 +1,5 @@
 @import "src/styles/variables";
+@import "src/styles/colors";
 
 .wrap {
   display: flex;
@@ -10,3 +11,8 @@
     margin: $gap / 2;
   }
 }
+
+.edit {
+  opacity: 0.5;
+  float: right;
+}

src/components/input/Button/styles.module.scss

@@ -155,7 +155,7 @@
 }
 
 .mini {
-  height: 28px;
+  height: 26px;
   border-radius: $radius / 2;
 
   &:global(.round) {

src/components/node/NodeTagsBlock/index.tsx

@@ -1,6 +1,8 @@
 import React, { FC } from 'react';
 import { NodeTags } from '~/components/node/NodeTags';
 import { useTagContext } from '~/utils/context/TagsContextProvider';
+import { Group } from '~/components/containers/Group';
+import { Button } from '~/components/input/Button';
 
 interface IProps {}
 

src/components/tags/TagWrapper/index.tsx

@@ -29,6 +29,17 @@ const TagWrapper: FC<IProps> = ({
   title = '',
 }) => {
   const deletable = is_deletable && !is_editing && !has_input;
+  const onDeletePress = useCallback(
+    event => {
+      if (!onDelete) {
+        return;
+      }
+
+      event.stopPropagation();
+      onDelete();
+    },
+    [onDelete]
+  );
 
   return (
     <div
@@ -39,16 +50,18 @@ const TagWrapper: FC<IProps> = ({
         input: has_input,
         clickable: onClick,
       })}
+      onClick={onClick}
     >
-      <div className={styles.content} onClick={onClick}>
-        <div className={styles.hole} />
+      <div className={styles.hole} />
+
+      <div className={styles.text}>
         <div className={styles.title}>{title}</div>
         {children}
       </div>
 
       {deletable && (
-        <button type="button" className={styles.delete} onClick={onDelete}>
-          <Icon icon="close" size={20} />
+        <button type="button" className={styles.delete} onClick={onDeletePress}>
+          <Icon icon="close" size={12} />
         </button>
       )}
     </div>

src/components/tags/TagWrapper/styles.module.scss

@@ -12,10 +12,15 @@ $big: 1.2;
   border-radius: ($tag_height / 2) 3px 3px ($tag_height / 2);
   font: $font_14_semibold;
   align-self: flex-start;
-  padding: 0 8px 0 0;
   position: relative;
   z-index: 12;
 
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: stretch;
+  min-width: 0;
+
   &:hover {
     z-index: 40;
   }
@@ -98,19 +103,6 @@ $big: 1.2;
   }
 }
 
-.content {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: stretch;
-  width: 100%;
-  transition: transform 250ms;
-
-  :hover:global(.deletable) > & {
-    transform: translate(-32px, 0);
-  }
-}
-
 .hole {
   width: $tag_height;
   height: $tag_height;
@@ -137,27 +129,23 @@ $big: 1.2;
 }
 
 button.delete {
-  @include inner_shadow;
-
-  width: 32px;
-  height: 100%;
+  box-shadow: inset transparentize(white, 0.9) 1px 0, transparentize(black, 0.7) -1px 0;
+  width: 24px;
+  height: $tag_height;
+  background: transparentize($content_bg, 0.75);
   z-index: 24;
-  background: $red;
   border: none;
   padding: 0;
-  margin: 0 0 0 -5px;
-  border-radius: 0;
-  position: absolute;
-  right: -32px;
-  top: 0;
-  transition: transform 250ms;
-  transform: translate(0, 0);
+  border-radius: 0 3px 3px 0;
+  flex: 0 0 24px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
-
-  :hover > & {
-    transform: translate(-32px, 0);
-  }
 }
+
+.text {
+  padding-right: $gap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}

src/components/tags/Tags/index.tsx

@@ -5,6 +5,7 @@ import { uniq } from 'ramda';
 import { Tag } from '~/components/tags/Tag';
 import { TagInput } from '~/components/tags/TagInput';
 import { separateTags } from '~/utils/tag';
+import { Button } from '~/components/input/Button';
 
 type IProps = HTMLAttributes<HTMLDivElement> & {
   tags: Partial<ITag>[];