I figured this UI issue while adding my first Contribution at Utopian.io. I believe that the drop-down box of Reward selection does not come aligned with the control and comes at the top stuck to the main header of the Utopian.io website where the user is not expecting it. So, it seems there is a UI alignment bug here.

## What Happened As User Experience
-- 1. When you search for Github project in autosuggest textbox the suggestions box is aligned with the textbox and comes below so that user can choose among one of the options he/she is searching. This is what user expects.

![image.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1514813002/rsamqj02owydezjeumo2.png)

-- 2. However, when you select the project, fill your contribution title, provide all the details and add all the required tags then you as a user has an option to choose your Reward option. When you click on it, you will see instead of options coming below the control as user expects in any dropdown or autosuggestion box, the options comes hanging at the top with main black header of the site. Does not give a good UI experience to the user.

![image.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1514813626/xnzno974auqyecop78w8.png)

## Expected Output
The options to choose Reward as "100% Steem Power" or  "50% SBD and 50% SP" should come below the Reward textbox, not aligned to the black header at the top. 

Secondly, I believe that the language should be consistent in the options. One options says "Steem Power" but the other options says "SP". So, either use SP at both places as most user understand it or use Steem Power as the dropdown is wide enough already to have all this text.

## Steps to Reproduce the Bug
-- 1. Open Google Chrome on any Macbook using macOS.
-- 2. Login to your Utopian.io account
-- 3. Click on (+ Contribution) button, that is , Add Contribution
-- 4. Select Bug Hunting option, read the instructions and click on "I Understand and Proceed" Button at the bottom of the page.
-- 5. You will see an form to post the bug details. Fill in Github project, Contribution title, details of the bug in markdown editor and enter all the required tags.
-- 6. Now click on the textbox of Reward to select/change or view other available options that default selected in it. 
-- 7. Notice the options are not coming below the textbox while at the top hanging below the black main header of the website.

To further help, I created a screen recording as well which can be found at the link: [Screen Recording Link](https://drive.google.com/file/d/19RI79vlqpx5XTAkxN1rCLRUmAOwVNZas/view)

### Environment Details
Browser: Google Chrome Version 63.0.3239.84 (Official Build) (64-bit) , Normal Mode (No Incongnito Mode)
Operating System: macOS High Sierra 10.13





<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@devilonwheels/reward-options-appear-misaligned-from-its-control-in-ui">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>