Merge pull request #429 from weaveworks/428-difficult-to-see-that-dro…

…pdown-can feat(dropdown): adjusts max-height to show it can be scrolled
weaveworks · Nov 27, 2018 · e019f6c · e019f6c
2 parents 23da9d3 + 3f636eb
commit e019f6c
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/src/components/Dropdown/Dropdown.js b/src/components/Dropdown/Dropdown.js
@@ -31,8 +31,10 @@ const Popover = styled.div`
   box-shadow: ${props => props.theme.boxShadow.light};
   margin-top: 4px;
   width: ${props => props.width}px;
-  /* +10 to account for list top padding */
-  max-height: ${HEIGHT_NUMBER * 10 + 10}px;
+  /* +10 to account for list top padding.
+   * Multiply by an 0.5 to visually slice the last item in half to more clearly show that the
+   * dropdown can be scrolled. */
+  max-height: ${HEIGHT_NUMBER * 10.5 + 10}px;
   overflow: auto;
   box-sizing: border-box;
   padding: 6px 0;

diff --git a/src/components/Dropdown/example.js b/src/components/Dropdown/example.js
@@ -144,7 +144,7 @@ export default class DropdownExample extends React.Component {
             </Example>
           </Column>
         </Row>
-        <div style={{ height: '50px' }} />
+        <div style={{ height: '70px' }} />
       </Grid>
     );
   }