mastofe

commit: bdee8b2486a5df45a84859bd9cc7b5bb2997d2f4
parent: 845a05511b70aa9cc19cc8ee42dcecbeeb379568
Author: Morgan Bazalgette <the@howl.moe>
Date:   Sat, 31 Mar 2018 16:31:39 +0200

resize columns dynamically, with min width of 330

Diffstat:
M
app/javascript/mastodon/features/compose/components/search.js
2
+-
M
app/javascript/styles/mastodon/components.scss
9
+++++++--

2 files changed, 8 insertions(+), 3 deletions(-)
diff --git a/app/javascript/mastodon/features/compose/components/search.js b/app/javascript/mastodon/features/compose/components/search.js
@@ -20,7 +20,7 @@ class SearchPopout extends React.PureComponent {
     const { style } = this.props;
     const extraInformation = searchEnabled ? <FormattedMessage id='search_popout.tips.full_text' defaultMessage='Simple text returns statuses you have written, favourited, boosted, or have been mentioned in, as well as matching usernames, display names, and hashtags.' /> : <FormattedMessage id='search_popout.tips.text' defaultMessage='Simple text returns matching display names, usernames and hashtags' />;
     return (
-      <div style={{ ...style, position: 'absolute', width: 285 }}>
+      <div style={{ ...style, position: 'absolute', width: 315 }}>
         <Motion defaultStyle={{ opacity: 0, scaleX: 0.85, scaleY: 0.75 }} style={{ opacity: spring(1, { damping: 35, stiffness: 400 }), scaleX: spring(1, { damping: 35, stiffness: 400 }), scaleY: spring(1, { damping: 35, stiffness: 400 }) }}>
           {({ opacity, scaleX, scaleY }) => (
             <div className='search-popout' style={{ opacity: opacity, transform: `scale(${scaleX}, ${scaleY})` }}>
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
@@ -1766,7 +1766,7 @@
 }
 
 .drawer {
-  width: 300px;
+  width: 330px;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
@@ -1799,6 +1799,11 @@
   .search {
     margin-bottom: 10px;
   }
+
+  .column,
+  .drawer {
+    min-width: 330px;
+  }
 }
 
 @media screen and (max-width: 630px) {
@@ -1825,7 +1830,7 @@
 
   .column,
   .drawer {
-    flex: 0 0 auto;
+    flex: 1 1 auto;
     padding: 10px;
     padding-left: 5px;
     padding-right: 5px;