From 5f83db0164fc6066e686fa14e73fd0c897f25c87 Mon Sep 17 00:00:00 2001
From: Rodrigo Perez <rodrigopi1989@gmail.com>
Date: Thu, 2 Apr 2020 13:38:06 -0300
Subject: [PATCH 1/3] slider circle fix

---
 src/components/Slider/Slider.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/Slider/Slider.js b/src/components/Slider/Slider.js
index 9e9b21708..05b150785 100644
--- a/src/components/Slider/Slider.js
+++ b/src/components/Slider/Slider.js
@@ -165,6 +165,8 @@ class Slider extends React.Component {
                 >
                   <animated.div
                     style={this.getHandleStyles(pressProgress)}
+                    onMouseDown={this.dragStart}
+                    onTouchStart={this.dragStart}
                     css={`
                       position: absolute;
                       top: 50%;
@@ -173,6 +175,7 @@ class Slider extends React.Component {
                       height: ${HANDLE_SIZE}px;
                       border: 1px solid ${theme.border};
                       border-radius: 50%;
+                      cursor: pointer;
                     `}
                   />
                 </HandlePosition>
@@ -205,7 +208,6 @@ const Bar = styled(animated.div)`
 `
 
 const HandleClip = styled.div`
-  pointer-events: none;
   overflow: hidden;
   width: calc(100% + ${HANDLE_SIZE + HANDLE_SHADOW_MARGIN * 2}px);
   height: calc(100% + ${HANDLE_SHADOW_MARGIN * 2}px);

From aa7f8a08c7b3fbe0b63225f5fdae5480f3d6c654 Mon Sep 17 00:00:00 2001
From: Rodrigo Perez <rodrigopi1989@gmail.com>
Date: Fri, 3 Apr 2020 16:26:49 -0300
Subject: [PATCH 2/3] pr comments

---
 src/components/Slider/Slider.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Slider/Slider.js b/src/components/Slider/Slider.js
index 05b150785..3a5eacc95 100644
--- a/src/components/Slider/Slider.js
+++ b/src/components/Slider/Slider.js
@@ -165,8 +165,6 @@ class Slider extends React.Component {
                 >
                   <animated.div
                     style={this.getHandleStyles(pressProgress)}
-                    onMouseDown={this.dragStart}
-                    onTouchStart={this.dragStart}
                     css={`
                       position: absolute;
                       top: 50%;
@@ -176,6 +174,7 @@ class Slider extends React.Component {
                       border: 1px solid ${theme.border};
                       border-radius: 50%;
                       cursor: pointer;
+                      pointer-events: auto;
                     `}
                   />
                 </HandlePosition>
@@ -208,6 +207,7 @@ const Bar = styled(animated.div)`
 `
 
 const HandleClip = styled.div`
+  pointer-events: none;
   overflow: hidden;
   width: calc(100% + ${HANDLE_SIZE + HANDLE_SHADOW_MARGIN * 2}px);
   height: calc(100% + ${HANDLE_SHADOW_MARGIN * 2}px);

From 1700e8e4774af5b0f1bd26354468f1604549b154 Mon Sep 17 00:00:00 2001
From: Rodrigo Perez <rodrigopi1989@gmail.com>
Date: Sat, 11 Apr 2020 00:43:22 -0300
Subject: [PATCH 3/3] min width auto

---
 src/components/DropDown/DropDown.js | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/src/components/DropDown/DropDown.js b/src/components/DropDown/DropDown.js
index 66d33c9d0..2632d2f22 100644
--- a/src/components/DropDown/DropDown.js
+++ b/src/components/DropDown/DropDown.js
@@ -9,8 +9,6 @@ import { useViewport } from '../../providers/Viewport/Viewport'
 import ButtonBase from '../ButtonBase/ButtonBase'
 import Popover from '../Popover/Popover'
 
-const MIN_WIDTH = 128
-
 function useDropDown({
   buttonRef,
   items,
@@ -111,26 +109,20 @@ const DropDown = React.memo(function DropDown({
 
   const theme = useTheme()
   const { width: vw } = useViewport()
-
-  const [widthNoPx = MIN_WIDTH] = (width || '').split('px')
   const [buttonWidth, setButtonWidth] = useState(0)
   const [measureWidth, setMeasureWidth] = useState(true)
 
-  // Adjust the button width if the item widths are larger than declared width
-  const [placeholderMinWidth, setPlaceholderMinWidth] = useState(
-    Math.min(widthNoPx, MIN_WIDTH)
-  )
   const popoverRefCallback = useCallback(el => {
     if (!el) {
       return
     }
-    setPlaceholderMinWidth(el.clientWidth)
     setMeasureWidth(false)
   }, [])
   useEffect(() => {
     setMeasureWidth(true)
   }, [vw, items])
 
+  console.log('measured width ', measureWidth)
   // Update the button width every time the reference updates
   const { refCallback, buttonRef } = useButtonRef(el => {
     setButtonWidth(el.clientWidth)
@@ -186,7 +178,7 @@ const DropDown = React.memo(function DropDown({
           padding-left: ${2 * GU}px;
           padding-right: ${1.5 * GU}px;
           width: ${width || (wide ? '100%' : 'auto')};
-          min-width: ${wide ? 'auto' : `${placeholderMinWidth}px`};
+          min-width: auto;
           background: ${disabled ? theme.disabled : theme.surface};
           color: ${disabled ? theme.disabledContent : theme.surfaceContent};
           border: ${disabled ? 0 : 1}px solid