mm-1874 - Improving team url screen and fixing file attachments in IE 10

web/react/components/signup_team_complete.jsx

@@ -248,6 +248,8 @@ TeamURLPage = React.createClass({
     },
     render: function() {
 
+        $('body').tooltip( {selector: '[data-toggle=tooltip]', trigger: 'hover click'} );
+
         client.track('signup', 'signup_team_03_url');
 
         var name_error = this.state.name_error ? <label className="control-label">{ this.state.name_error }</label> : null;
@@ -260,8 +262,8 @@ TeamURLPage = React.createClass({
                 <div className={ name_error ? "form-group has-error" : "form-group" }>
                <div className="row">
                     <div className="col-sm-11">
-                        <div className="input-group">
-                            <span className="input-group-addon">{ utils.getWindowLocationOrigin() + "/" }</span>
+                        <div className="input-group input-group--limit">
+                            <span data-toggle="tooltip" title={ utils.getWindowLocationOrigin() + "/" } className="input-group-addon">{ utils.getWindowLocationOrigin() + "/" }</span>
                             <input type="text" ref="name" className="form-control" placeholder="" maxLength="128" defaultValue={this.props.state.team.name} autoFocus={true} onFocus={this.handleFocus}/>
                         </div>
                     </div>

web/sass-files/sass/partials/_files.scss

@@ -137,6 +137,7 @@
     }
   }
   .post-image__thumbnail {
+    display: block;
     width: 50%;
     height: 100%;
   }

web/sass-files/sass/partials/_signup.scss

@@ -54,6 +54,24 @@
         margin-bottom: 1em;
     }
 
+    .input-group {
+        &.input-group--limit {
+            table-layout: fixed;
+            width: 100%;
+            .form-control {
+                text-align: left;
+                display: table-cell;
+                width: 100%;
+            }
+            .input-group-addon {
+                width: 50%;
+                display: table-cell;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
+    }
+
     .inner__content {
         padding: 0 15px;
         margin: 30px 0 20px;