Merge pull request #121 from edx/matthugs/gradebook-styling-issues

Gradebook styling issues

src/components/Gradebook/gradebook.scss

@@ -119,7 +119,6 @@
 
 .input-percent-label {
     margin-top: 10px;
-    margin-left: -60px;
 }
 
 .mb-85 {
@@ -130,7 +129,7 @@
     max-width: 1000px;
 }
 
-.original-filename {
+.wrap-text-in-cell {
     overflow-wrap: break-word;
     word-wrap: break-word;
 }

src/components/Gradebook/index.jsx

@@ -223,6 +223,7 @@ export default class Gradebook extends React.Component {
       unique_id: courseId,
       originalFilename,
       id,
+      user: username,
       ...rest
     } = row;
     const resultsText = [
@@ -241,11 +242,21 @@ export default class Gradebook extends React.Component {
       </a>
     );
     const filename = (
-      <span className="original-filename">
+      <span className="wrap-text-in-cell">
         {originalFilename}
       </span>
     );
-    return { resultsSummary, filename, ...rest };
+    const user = (
+      <span className="wrap-text-in-cell">
+        {username}
+      </span>
+    );
+    return {
+      resultsSummary,
+      filename,
+      user,
+      ...rest,
+    };
   };
 
   updateAssignmentTypes = (assignmentType) => {
@@ -831,16 +842,14 @@ export default class Gradebook extends React.Component {
                 onChange={this.handleMaxAssigGradeChange}
               />
               <span className="input-percent-label">%</span>
-              <div className="d-flex align-items-center">
-                <Button
-                  type="submit"
-                  className="btn-outline-secondary"
-                  name="assignmentGradeMinMax"
-                  disabled={!this.props.selectedAssignment}
-                >
-                  Apply
-                </Button>
-              </div>
+              <Button
+                type="submit"
+                className="btn-outline-secondary"
+                name="assignmentGradeMinMax"
+                disabled={!this.props.selectedAssignment}
+              >
+                Apply
+              </Button>
             </form>
           </div>
         </Collapsible>
@@ -868,7 +877,6 @@ export default class Gradebook extends React.Component {
             <span className="input-percent-label">%</span>
             <Button
               buttonType="outline-secondary"
-              className="align-self-center"
               onClick={this.handleCourseGradeFilterApplyButtonClick}
             >
               Apply