Repository: busyorg/busy (js)

Issue:
Long topics break TopicSelector sort selector
#### Expected behavior

Long topics shouldn't cause sort selector to break. This should be taken care of for reasonable screen sizes and topic lengths.

#### Actual behavior

![image](https://user-images.githubusercontent.com/1968722/32371456-3a93065a-c091-11e7-8e6c-447d8d2a994d.png)

Sort selector renders improperly.

#### How to reproduce

Check feed with long topic on smaller screens below ~400px.

Pull request:
Update TopicSelector styles
Fixes #988.

This changes how TopicSelector behaves on smaller screens.
- TopicSelector items are now aligned in center
- "Sort by" and current sort now have white-space set to nowrap to prevent
breaking it.
- "Sort by" and current sort now have display set to inline-block to
cause them to split to two lines if there is no room.

**Before**:
![image](https://user-images.githubusercontent.com/1968722/32371940-23e779e8-c093-11e7-8ac2-5d6baa53cda7.png)
**After**:
![image](https://user-images.githubusercontent.com/1968722/32371964-37af2c00-c093-11e7-87f2-25a9671b3e37.png)

Patch:
diff --git a/src/components/TopicSelector.js b/src/components/TopicSelector.js
index f6655e05..20abefb4 100644
--- a/src/components/TopicSelector.js
+++ b/src/components/TopicSelector.js
@@ -53,7 +53,9 @@ class TopicSelector extends React.Component {
             )}
         </div>
         <div className="TopicSelector__sort">
-          <FormattedMessage id="sort_by" defaultMessage="Sort by" />
+          <span className="TopicSelector__sort__title">
+            <FormattedMessage id="sort_by" defaultMessage="Sort by" />
+          </span>
           <Popover
             trigger="click"
             visible={popoverVisible}
diff --git a/src/components/TopicSelector.less b/src/components/TopicSelector.less
index 75c88e99..352c1ae3 100644
--- a/src/components/TopicSelector.less
+++ b/src/components/TopicSelector.less
@@ -3,6 +3,7 @@
 .TopicSelector {
   display: flex;
   justify-content: space-between;
+  align-items: center;
   margin-bottom: 16px;
   padding: 0 @mobile-padding;
 
@@ -20,11 +21,18 @@
 
   &__sort {
     color: #99aab5;
+    text-align: right;
+
+    &__title {
+      display: inline-block;
+      white-space: nowrap;
+    }
 
     &__current {
       cursor: pointer;
       margin-left: 8px;
       font-weight: 500;
+      white-space: nowrap;
 
       & > .iconfont {
         margin-left: 4px;


Test patch:
diff --git a/src/stories/__snapshots__/stories.test.js.snap b/src/stories/__snapshots__/stories.test.js.snap
index 26b2dc45..62f85d38 100644
--- a/src/stories/__snapshots__/stories.test.js.snap
+++ b/src/stories/__snapshots__/stories.test.js.snap
@@ -2792,8 +2792,12 @@ exports[`Storyshots Topic selector Topic selector 1`] = `
     <div
       className="TopicSelector__sort"
     >
-      <span>
-        Sort by
+      <span
+        className="TopicSelector__sort__title"
+      >
+        <span>
+          Sort by
+        </span>
       </span>
       <span
         className="TopicSelector__sort__current"