Improve wording & functionality in IPA components.

src/components/management/IPAField.jsx

@@ -54,15 +54,10 @@ export class IPAField extends Component {
   showTable () {
     if (this.state.doShowTable) {
       return (
-        <div className='modal is-active'>
-          <div className='modal-background'
-            onClick={() => this.setState({ doShowTable: false })} />
-
-            <IPATable
-              value={this.state.value}
-              update={newValue => this.setState({ value: newValue }, this.field.focus())} />
-
-        </div>
+        <IPATable
+          value={this.state.value}
+          close={() => this.setState({ doShowTable: false })}
+          update={newValue => this.setState({ value: newValue }, this.field.focus())} />
       );
     }
   }

src/sass/_styles.scss

@@ -28,12 +28,7 @@
   }
 }
 
-.ipa-suggest {
-  @extend .box;
-  position: absolute;
-  background-color: #FFFFFF;
-  border: 1px solid #CCCCFF;
-  font-size: 90%;
-  width: 200px;
-  z-index: 90;
+.modal-card-title {
+  word-wrap: break-word;
+  max-width: 100%;
 }

vendor/KeyboardFire/phondue/usage.html

@@ -1,5 +1,6 @@
 <p>The Pronunciation field in Lexiconga utilizes <a href='https://github.com/KeyboardFire/phondue' target='_blank'>KeyboardFire's
-Phondue</a> web script to make typing IPA pronunciations much more convenient.
+Phondue</a> web script to make typing IPA pronunciations much more convenient. While you
+can still point and click to select IPA characters using the IPA table,
 Phondue provides many two-key keyboard shortcuts called <strong>digraphs</strong>
 that allow you to type any IPA symbol with only a standard keyboard.</p>
 <p>These symbols were decided to be intuitive as possible:</p>