Finalizing behavior of AclInformation

js/components/ascribe_buttons/acl_button_list.js

@@ -43,6 +43,12 @@ let AclButtonList = React.createClass({
         window.dispatchEvent(new Event('resize'));
     },
 
+    componentDidUpdate(prevProps) {
+        if(prevProps.availableAcls && prevProps.availableAcls !== this.props.availableAcls) {
+            window.dispatchEvent(new Event('resize'));
+        }
+    },
+
     componentWillUnmount() {
         UserStore.unlisten(this.onChange);
 

js/components/ascribe_buttons/acl_information.js

@@ -48,7 +48,7 @@ let AclInformation = React.createClass({
                             {replaceSubstringAtIndex(info.slice(2), 's ', ' ')}
                         </span>
                         <span className="example">
-                            {example}
+                            {' ' + example}
                         </span>
                     </p>
                 );
@@ -119,7 +119,7 @@ let AclInformation = React.createClass({
                 {this.getButton()}
                 <div
                     style={{
-                        width: aclInformationSize > 300 ? aclInformationSize : 400,
+                        width: verbs.length > 1 && aclInformationSize > 300 ? aclInformationSize : verbs.length === 1 ? null : '100%',
                         marginLeft: verbs.length === 1 ? '.25em' : null
                     }}
                     className={classnames({'acl-information-dropdown-list': true, 'hidden': aim === 'button' && !isVisible})}>

sass/variables.scss

@@ -613,7 +613,7 @@ $modal-header-border-color:   #e5e5e5 !default;
 $modal-footer-border-color:   $modal-header-border-color !default;
 
 $modal-lg:                    900px !default;
-$modal-md:                    600px !default;
+$modal-md:                    500px !default;
 $modal-sm:                    300px !default;