HOP UX

Responsive Design Bugs

Width 390px

• From / To network dropdown select is cutoff by the token input

  

  • Solution: move network dropdown to the same row as “From”. When connected the wallets balance can be in it’s own row above token input. This will give ample room for all connected states

• All Pools section needs some mobile design consideration

  

  • pool row could be stacked on mobile to make it easier to read the Pool name

  • Solution: Could convert Tokens/Networks selects into dropdowns for mobile, also can stack these components on mobile. Example:

    

• Rewards header could use some responsive design. Tooltip shouldn’t wrap to new line on it’s own and the change address button should look like a button with a tooltip explaining what this does

  

• Tooltip overflows outside of the viewport

  

600px to 700px

• Between 600px and 700px width the header wraps into an awkward layout

  

  • Solution: Add custom breakpoint for header to apply flex row at 700px instead of 600 px. This ill enable the mobile view of the header without any awkward flex wrapping

• After entering into a pool and before the user has staked the layout is broken from the not staked notification

  

  • Solution: Stack the notification under the Total APR content

• More tooltip bugs under pool info

  

  • Solution: Change breakpoint for mobile to 700px or add tablet designs for 600px - 1000px views. Also fix styling of tooltips in general to always be top aligned if word wrapping

• My Pools section table layout breaks around 700px

  

  • Solution: Stack the table for tablet views