grommet/grommet-theme-hpe

NameValueList loses responsiveness on resizing

sumad200 opened this issue · 3 comments

sumad200 commented

On resizing a NameValueList, it changes to a single column NameValueList when viewport width is 768px. However, on further resizing (at 576px to be precise), the NameValueList changes back to a 2 column NameValueList, which is not the case when using the default grommet theme.

HPE Theme at 400px
image

Grommet default theme at 400px
image

jcfilben commented

Thanks for raising this issue. I think what is happening is that the hpe theme has an 'xsmall' viewport breakpoint and the grommet theme only goes down to the 'small' size. I suspect that in the nameValueList code we are checking for a size 'small' breakpoint and adjusting that breakpoint to display as a single column, but we don't do this for 'xsmall' so once we hit the 'xsmall' breakpoint in the hpe theme it reverts back to showing the list as 2 columns. We should fix this so that the 'xsmall' breakpoint displays the list as 1 column.