make extra parameters collapsible to make more space for tags

css/base.css

@@ -765,13 +765,17 @@ table.permission-editor td.checkbox {
   padding: 0.5rem 0.75rem;
   line-height: 1.5;
 }
+
 /* Make sure padding is only applied at
    the top level panel */
-.panel-form-row > .panel-form-column {
+.panel-form-row > .panel-form-column,
+.panel-form-column > .panel-form-column {
     padding: 0!important;
     flex-grow: 1;
 }
-.panel-form-column > .panel-form-row {
+.panel-form-column > .panel-form-row,
+.panel-form-row > .panel-form-row
+ {
     padding: 0!important;
 }
 

index.html

@@ -528,6 +528,33 @@
       }
     }
 
+    // Toggle [Title text >] -> [Title text v]
+    class MoreButton extends React.PureComponent {
+      constructor(props) {
+        super(props);
+
+        this.state = {
+          open: this.props.open
+        };
+        this.handleToggle = this.handleToggle.bind(this);
+      }
+
+      handleToggle() {
+        var open = !this.state.open;
+        this.setState({open: open});
+        if (this.props.onToggle) {
+          this.props.onToggle(open);
+        }
+      }
+
+      render() {
+        return (<label className="small" onClick={this.handleToggle}>{this.props.title}...
+          {this.state.open ? <i className="material-icons">expand_more</i> :
+            <i className="material-icons">chevron_right</i>}
+          </label>);
+      }
+    }
+
     /* BEGIN Lettertile: Avatar box: either a bitmap or a letter tile or a stock icon. */
     class LetterTile extends React.PureComponent {
       render() {
@@ -2343,7 +2370,8 @@
           anon: null,
           contactList: [],
           showMemberPanel: this.props.showMemberPanel,
-          showPermissionEditorFor: undefined
+          showPermissionEditorFor: undefined,
+          moreInfoExpanded: false
         };
       },
 
@@ -2585,7 +2613,9 @@
       handleMemberSelected: function(uid) {
         this.setState({selectedContact: uid});
       },
-
+      handleMoreInfo: function(open) {
+        this.setState({moreInfoExpanded: open});
+      },
       handleContextMenu: function(params) {
         var instance = this;
         var topic = Tinode.getTopic(this.props.topic);
@@ -2674,15 +2704,21 @@
                 </div>
                 <div className="hr" />
                 <div className="panel-form-column">
-                  <div className="panel-form-row">
-                    <label>Address:</label>
-                    <tt>{this.state.address}</tt>
-                  </div>
                   <div className="panel-form-row">
                     <label>Muted:</label>
                     <CheckBox name="P" checked={this.state.muted}
                         onChange={this.handleMuted} />
                   </div>
+                  <MoreButton
+                    title="More"
+                    open={this.state.moreInfoExpanded}
+                    onToggle={this.handleMoreInfo} />
+                  {this.state.moreInfoExpanded ?
+                    <div className="panel-form-column">
+                    <div className="panel-form-row">
+                      <label>Address:</label>
+                      <tt>{this.state.address}</tt>
+                    </div>
                     {this.state.groupTopic ?
                       <div className="panel-form-row">
                         <label>Your permissions:</label>
@@ -2734,6 +2770,10 @@
                       null
                     }
                     </div>
+                  :
+                  null
+                  }
+                </div>
                 <div className="hr" />
                 {this.state.groupTopic ?
                   <div className="panel-form-column">