diff --git a/src/editor/widgets/comment/Comment.jsx b/src/editor/widgets/comment/Comment.jsx
index 9745091..ef48757 100644
--- a/src/editor/widgets/comment/Comment.jsx
+++ b/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} 
diff --git a/src/editor/widgets/comment/CommentWidget.jsx b/src/editor/widgets/comment/CommentWidget.jsx
index 4e81d38..4c86fc0 100644
--- a/src/editor/widgets/comment/CommentWidget.jsx
+++ b/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} 
diff --git a/src/editor/widgets/comment/TypeDropdown.jsx b/src/editor/widgets/comment/PurposeDropdown.jsx
similarity index 91%
rename from src/editor/widgets/comment/TypeDropdown.jsx
rename to src/editor/widgets/comment/PurposeDropdown.jsx
index ca4092d..a04e8a6 100644
--- a/src/editor/widgets/comment/TypeDropdown.jsx
+++ b/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}
diff --git a/themes/default/editor/_editor.scss b/themes/default/editor/_editor.scss
index a0f9e32..8bcfbcf 100644
--- a/themes/default/editor/_editor.scss
+++ b/themes/default/editor/_editor.scss
@@ -88,3 +88,8 @@
   }
 
 }
+
+.r6o-purposedropdown {
+  width: 150px;
+  display: inline-block;
+}
\ No newline at end of file