refactor to tag edit modal scss call

apps/app/src/components/PageTags/TagEditModal.tsx

@@ -14,8 +14,6 @@ import { useTagEditModal, type TagEditModalStatus } from '~/stores/modal';
 
 import { TagsInput } from './TagsInput';
 
-import styles from './TagEditModal.module.scss';
-
 type TagEditModalSubstanceProps = {
   tagEditModalData: TagEditModalStatus,
   closeTagEditModal: () => void,
@@ -53,7 +51,7 @@ const TagEditModalSubstance: React.FC<TagEditModalSubstanceProps> = (props: TagE
   }, [closeTagEditModal, tags, pageId, revisionId, updateStateAfterSave]);
 
   return (
-    <Modal isOpen={isOpen} toggle={closeTagEditModal} id="edit-tag-modal" autoFocus={false} className={`${styles['tag-edit-modal']}`}>
+    <Modal isOpen={isOpen} toggle={closeTagEditModal} id="edit-tag-modal" autoFocus={false}>
       <ModalHeader tag="h4" toggle={closeTagEditModal}>
         {t('tag_edit_modal.edit_tags')}
       </ModalHeader>

apps/app/src/components/PageTags/TagEditModal.module.scss → apps/app/src/components/PageTags/TagsInput.module.scss

@@ -1,4 +1,4 @@
-.tag-edit-modal :global {
+.tags-input :global {
   .rbt-token {
     .rbt-token-label {
       // override to text-truncate
@@ -11,7 +11,7 @@
 }
 
 // == Colors
-.tag-edit-modal :global {
+.tags-input :global {
   .rbt-token {
     // override to .badge color
     color: var(--bs-badge-color);

apps/app/src/components/PageTags/TagsInput.tsx

@@ -7,6 +7,8 @@ import { AsyncTypeahead, Token } from 'react-bootstrap-typeahead';
 
 import { useSWRxTagsSearch } from '~/stores/tag';
 
+import styles from './TagsInput.module.scss';
+
 type Props = {
   tags: string[],
   autoFocus: boolean,
@@ -50,7 +52,7 @@ export const TagsInput: FC<Props> = (props: Props) => {
   }, []);
 
   return (
-    <div className="tag-typeahead">
+    <div className={`${styles['tags-input']}`}>
       <AsyncTypeahead
         id="tag-typeahead-asynctypeahead"
         ref={tagsInputRef}