[share dialog] improvements (#4540)

frontend/src/components/dialog/share-dialog.js

@@ -243,7 +243,7 @@ class ShareDialog extends React.Component {
     const enableShareLink = !repoEncrypted && canGenerateShareLink;
     return (
       <div>
-        <Modal isOpen={true} style={{maxWidth: '720px'}} className="share-dialog" toggle={this.props.toggleDialog}>
+        <Modal isOpen={true} style={{maxWidth: '760px'}} className="share-dialog" toggle={this.props.toggleDialog}>
           <ModalHeader toggle={this.props.toggleDialog}>
             {gettext('Share')} <span className="op-target" title={itemName}>{itemName}</span>
             {this.renderExternalShareMessage()}

frontend/src/components/dialog/share-to-group.js

@@ -287,16 +287,19 @@ class ShareToGroup extends React.Component {
   }
 
   render() {
+    const thead = (
+      <thead>
+        <tr>
+          <th width="47%">{gettext('Group')}</th>
+          <th width="35%">{gettext('Permission')}</th>
+          <th width="18%"></th>
+        </tr>
+      </thead>
+    );
     return (
       <Fragment>
         <table className="w-xs-200">
-          <thead>
-            <tr>
-              <th width="50%">{gettext('Group')}</th>
-              <th width="35%">{gettext('Permission')}</th>
-              <th width="15%"></th>
-            </tr>
-          </thead>
+          {thead}
           <tbody>
             <tr>
               <td>
@@ -338,13 +341,7 @@ class ShareToGroup extends React.Component {
         </table>
         <div className="share-list-container">
           <table className="table-thead-hidden w-xs-200">
-            <thead>
-              <tr>
-                <th width="50%">{gettext('Group')}</th>
-                <th width="35%">{gettext('Permission')}</th>
-                <th width="15%"></th>
-              </tr>
-            </thead>
+            {thead}
             <GroupList 
               items={this.state.sharedItems}
               permissions={this.permissions}

frontend/src/components/dialog/share-to-user.js

@@ -272,16 +272,19 @@ class ShareToUser extends React.Component {
 
   render() {
     let { sharedItems } = this.state;
+    const thead = (
+      <thead>
+        <tr>
+          <th width="47%">{gettext('User')}</th>
+          <th width="35%">{gettext('Permission')}</th>
+          <th width="18%"></th>
+        </tr>
+      </thead>
+    );
     return (
       <Fragment>
         <table className="w-xs-200">
-          <thead>
-            <tr>
-              <th width="50%">{gettext('User')}</th>
-              <th width="35%">{gettext('Permission')}</th>
-              <th width="15%"></th>
-            </tr>
-          </thead>
+          {thead}
           <tbody>
             <tr>
               <td>
@@ -325,13 +328,7 @@ class ShareToUser extends React.Component {
         </table>
         <div className="share-list-container">
           <table className="table-thead-hidden w-xs-200">
-            <thead>
-              <tr>
-                <th width="50%">{gettext('User')}</th>
-                <th width="35%">{gettext('Permission')}</th>
-                <th width="15%"></th>
-              </tr>
-            </thead>
+            {thead}
             <UserList 
               items={sharedItems}
               permissions={this.permissions}

frontend/src/css/share-link-dialog.css

@@ -34,7 +34,7 @@
 .share-dialog-content .share-dialog-main {
     display: flex;
     flex: 0 0 78%;
-    padding: 1rem 1.5rem 2rem;
+    padding: 1rem;
 }
 
 .share-dialog-content .share-dialog-main .tab-content {