fix(dropdowns): Allow for dropdowns to fill full column (#2684)

* fix(dropdowns): Allow for dropdowns to fill full column

When the text inside a dropdown is longer than it is for English, the text is truncated which can result in a less-than-usable experience for languages such as German with longer words. This commit addresses the following:

* Allow the dropdown to expand to the entire width of the column based on the length of the text in the dropdown
* Align active dropdown arrow in relation to the trigger rather than the dropdown
* Show the right hand side of the dropdown which was previously hidden (could not see border radius)
* Ensure the three places dropdowns of status, account, and emoji appear well in Chrome, Firefox, Safari

* fix(emoji-dropdown): Restore emoji dropdown caret

diff --git a/app/assets/javascripts/components/features/compose/components/emoji_picker_dropdown.jsx b/app/assets/javascripts/components/features/compose/components/emoji_picker_dropdown.jsx
index 69042d3f71a6b611d0eab55af67739f3c3b79943..bc22b074d1f54a0594ae578f709f63bce31d26d0 100644 (file)
--- a/app/assets/javascripts/components/features/compose/components/emoji_picker_dropdown.jsx
+++ b/app/assets/javascripts/components/features/compose/components/emoji_picker_dropdown.jsx
@@ -97,7 +97,7 @@ class EmojiPickerDropdown extends React.PureComponent {
           <img draggable="false" className="emojione" alt="🙂" src="/emoji/1f602.svg" />
         </DropdownTrigger>
 
-        <DropdownContent className='dropdown__left light'>
+        <DropdownContent className='dropdown__left'>
           <EmojiPicker emojione={settings} onChange={this.handleChange} searchPlaceholder={intl.formatMessage(messages.emoji_search)} categories={categories} search={true} />
         </DropdownContent>
       </Dropdown>

diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss
index a8a81d7b21fd4ce366731af98801c1ddde10a2c1..1468999b2c9afa350bf04576253bf9148caa0b1d 100644 (file)
--- a/app/assets/stylesheets/components.scss
+++ b/app/assets/stylesheets/components.scss
@@ -181,6 +181,19 @@
   color: $color4;
 }
 
+.dropdown--active:after {
+  content: "";
+  display: block;
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 4.5px 7.8px 4.5px;
+  border-color: transparent transparent $color2 transparent;
+  bottom: 8px;
+  right: 104px;
+}
+
 .invisible {
   font-size: 0;
   line-height: 0;
@@ -317,6 +330,12 @@
 
 .compose-form__autosuggest-wrapper {
   position: relative;
+
+  .dropdown--active:after {
+    border-color: transparent transparent $color5 transparent;
+    bottom: -1px;
+    right: 8px;
+  }
 }
 
 .compose-form__publish {
@@ -563,7 +582,6 @@ a.status__content__spoiler-link {
   align-items: center;
   display: flex;
   margin-top: 10px;
-  overflow: hidden;
 }
 
 .status__action-bar-button-wrapper {
@@ -737,6 +755,20 @@ a.status__content__spoiler-link {
 .account__action-bar-dropdown {
   flex: 1 1 auto;
   padding: 10px;
+
+  .dropdown--active {
+    .dropdown__content.dropdown__right {
+      left: 6px;
+      right: initial;
+    }
+
+    &:after {
+      bottom: initial;
+      margin-left: 11px;
+      margin-top: -7px;
+      right: initial;
+    }
+  }
 }
 
 .account__action-bar-links {
@@ -1009,28 +1041,11 @@ a.status__content__spoiler-link {
 .dropdown--active .dropdown__content {
   display: block;
   line-height: 18px;
+  max-width: 311px;
+  right: 0;
   text-align: left;
   z-index: 9999;
 
-  &:before {
-    content: "";
-    display: block;
-    position: absolute;
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-width: 0 4.5px 7.8px 4.5px;
-    border-color: transparent transparent $color2 transparent;
-    top: -7px;
-    left: 8px;
-  }
-
-  &.light {
-    &:before {
-      border-color: transparent transparent $color5 transparent;
-    }
-  }
-
   & > ul {
     list-style: none;
     background: $color2;
@@ -1039,17 +1054,16 @@ a.status__content__spoiler-link {
     box-shadow: 0 0 15px rgba($color8, 0.4);
     min-width: 140px;
     position: relative;
-    left: -10px;
+  }
+
+  &.dropdown__right {
+    right: 0;
   }
 
   &.dropdown__left {
     & > ul {
       left: -98px;
     }
-
-    & > .emoji-dialog {
-      left: -210px;
-    }
   }
 
   & > ul > li > a {
@@ -1058,7 +1072,6 @@ a.status__content__spoiler-link {
     display: block;
     padding: 4px 14px;
     box-sizing: border-box;
-    width: 140px;
     text-decoration: none;
     background: $color2;
     color: $color1;