Fix dropdown labels layout if label is too long

Split the dropdown list item label on multiple rows if label doesn't fit
in a single row.

Previously, the label was split on multiple rows but only if it
contained multiple words. For example 'A very long label item' would get
multiple rows with no issues, but 'averylonglabelitem' would cause
layout issues.
So, this affects, for example, items with long IDs as labels (see OCI
provider).

src/components/molecules/Dropdown/Dropdown.jsx

@@ -142,7 +142,9 @@ const Separator = styled.div`
   margin: 8px 16px;
   background: ${Palette.grayscale[3]};
 `
-const Labels = styled.div``
+const Labels = styled.div`
+  word-break: break-word;
+`
 
 export const updateTipStyle = (listItemsRef: HTMLElement, tipRef: HTMLElement, firstItemRef: HTMLElement) => {
   if (tipRef && firstItemRef) {

src/components/molecules/Dropdown/story.jsx

@@ -20,7 +20,8 @@ import Dropdown from '.'
 
 const items = [
   { label: 'Item 1', value: 'item-1' },
-  { label: 'Item 2', value: 'item-2' },
+  { label: 'Item 2 - contains a very long label that doesn\'t really fit', value: 'item-2' },
+  { label: 'containsaverylonglabelwhichalsodoesntcontainwhitespaces', value: 'item-2a' },
   { label: 'Item 3', value: 'item-3' },
   { label: 'Item 3', value: 'item-3-duplicated' },
 ]
@@ -110,8 +111,10 @@ storiesOf('Dropdown', module)
         { label: 'Item 2', value: 'item-2' },
         { label: 'Item 3', value: 'item-3' },
         { label: 'Item 4', value: 'item-4' },
-        { label: 'Item 1', value: 'item-1' },
-        { label: 'Item 2', value: 'item-2' },
+        { label: 'Item - contains a very long label that doesn\'t really fit', value: 'item-1' },
+        { label: 'Item - contains a very long label that doesn\'t really fit', value: 'item-1' },
+        { label: 'containsaverylonglabelwhichalsodoesntcontainwhitespaces', value: 'item-2' },
+        { label: 'containsaverylonglabelwhichalsodoesntcontainwhitespaces', value: 'item-2' },
         { label: 'Item 3', value: 'item-3' },
         { label: 'Item 4', value: 'item-4' },
         { label: 'Item 1', value: 'item-1' },