Fix news title grid width and the grid in trainee table

src/components/pages/News.js

@@ -25,7 +25,10 @@ class News extends Component {
               style={{ fontSize: '2em', width: '100%' }}
             >
               <Grid>
-                <Grid.Column floated='left' width={8}>
+                <Grid.Column
+                  floated='left'
+                  width={this.props.user.role === 'Staff' ? 12 : 16}
+                >
                   {item.title}
                 </Grid.Column>
                 { this.props.user.role === 'Staff' ?

src/components/pages/TraineeTableRow.js

@@ -75,7 +75,7 @@ class TraineeTableRow extends Component {
         <Table.Cell>
           <Grid>
             <Grid.Row>
-              <Grid.Column floated='left' width={8} textAlign='left'>
+              <Grid.Column floated='left' width={11} textAlign='left'>
 
                 {notes.length > 0 ?
                   <Comment>
@@ -92,7 +92,7 @@ class TraineeTableRow extends Component {
                   null
                  }
               </Grid.Column>
-              <Grid.Column floated='right' width={4} textAlign='right'>
+              <Grid.Column floated='right' width={5} textAlign='right'>
                 {notes.length > 0 ?
                   <CommentModal notes={notes} />
              :