update dropdown widget

src/editor/widgets/comment/Comment.jsx

@@ -3,7 +3,7 @@ import { useState } from 'preact/hooks';
 import TimeAgo from 'timeago-react';
 import DropdownMenu from './DropdownMenu';
 import TextEntryField from './TextEntryField';
-import TypeDropdown from './TypeDropdown';
+import PurposeDropdown from './PurposeDropdown';
 import { ChevronDownIcon } from '../../../Icons';
 import i18n from '../../../i18n';
 
@@ -58,7 +58,7 @@ const Comment = props => {
       />
       { creatorInfo }
       { props.purpose == true &&
-        <TypeDropdown  
+        <PurposeDropdown
             editable={isEditable}
             content={props.body.purpose} 
             onChange={onUpdateDropdown} 

src/editor/widgets/comment/CommentWidget.jsx

@@ -2,7 +2,7 @@ import React from 'preact/compat';
 import Comment from './Comment';
 import TextEntryField from './TextEntryField';
 import i18n from '../../../i18n';
-import TypeDropdown from './TypeDropdown';
+import PurposeDropdown from './PurposeDropdown';
 
 const purposes = ['assessing', 'bookmarking', 'classifying', 'commenting', 'describing', 'editing', 'highlighting', 'identifying', 'linking', 'moderating', 'questioning']
 /**
@@ -108,7 +108,7 @@ const CommentWidget = props => {
             onSaveAndClose={() => props.onSaveAndClose()}
           /> 
         { props.purpose == true && draftReply.value.length > 0 &&
-          <TypeDropdown  
+          <PurposeDropdown
               editable={true}
               content={draftReply.purpose}
               onChange={onUpdatePurpose} 

src/editor/widgets/comment/PurposeDropdown.jsx

@@ -4,11 +4,11 @@ import Select from 'react-select';
 
 const purposes = [{'value': 'assessing', 'label': 'Assessing'}, {'value': 'bookmarking', 'label': 'Bookmarking'}, {'value': 'classifying', 'label': 'Classifying'}, {'value': 'commenting', 'label': 'Commenting'}, {'value': 'describing', 'label': 'Describing'},{'value': 'editing', 'label': 'Editing'}, {'value': 'highlighting', 'label': 'Highlighting'},{'value': 'identifying', 'label': 'Identifying'},{'value': 'linking', 'label': 'Linking'},{'value': 'moderating', 'label': 'Moderating'},{'value': 'questioning', 'label': 'Questioning'}]
 
-export default class TypeDropdown extends Component {
+export default class PurposeDropdown extends Component {
   render() {
     const selectedOption = this.props.content ? {'value': this.props.content, 'label': this.props.content.charAt(0).toUpperCase() + this.props.content.slice(1) } : undefined;
     return (
-      <div class="purposedropdown">
+      <div class="r6o-purposedropdown">
         <Select
           value={selectedOption}
           onChange={this.props.onChange}

themes/default/editor/_editor.scss

@@ -88,3 +88,8 @@
   }
 
 }
+
+.r6o-purposedropdown {
+  width: 150px;
+  display: inline-block;
+}