report dropdown centered

Author: supalarry

frontend/src/components/app/users/UserProfile.vue

@@ -64,6 +64,7 @@
         v-on:save-single-choice="saveSingleChoice"
         class="max-w-xs mx-auto"
         v-bind:name="'report'"
+        v-bind:position="'center'"
         v-bind:starting-option="'harassment'"
         v-bind:options="['harassment', 'bot', 'spam', 'inappropriate content']"></DropdownDisplayChoice>
       <h1 v-on:click="makeReport()" class="onboarding-sub-container-content-button-outline mx-auto">Report</h1>

frontend/src/components/shared/DropdownDisplayChoice.vue

@@ -4,7 +4,7 @@
     <div v-bind:class="{'settings-button-choice': true, 'border-gray-matcha': !closed}" @click="toggle">
       <h1 v-bind:class="{ 'opacity-50': closed, 'noSelect': true, 'capitalize': true }">{{ currentOption }}<span class="ml-2">▼</span></h1>
     </div>
-    <div v-bind:class="{'sort-dropdown': true, 'z-10': true , 'hidden': closed, 'h-auto': options.length < 5}">
+    <div v-bind:class="{'sort-dropdown': true, 'max-w-xs': true, 'mx-auto': true, 'left-0': position === 'left' || position === 'center', 'right-0': position === 'right' || position === 'center', 'z-10': true, 'hidden': closed, 'h-auto': options.length < 5}">
       <h1 v-for="(option, index) in options" :key="option + index + option"
           v-bind:class="{'capitalize': true, 'sort-dropdown-option': true, 'border-b': index !== options.length - 1, 'font-extrabold': option === currentOption, 'text-gray-matcha': option === currentOption}"
           v-on:click="select(option)">