Schedule update & Finally close the issue with Safari/Chrome Schdule style bug

src/components/Schedule.js

@@ -1,28 +1,27 @@
 const React = require('react')
 
-import {getDates} from '../utils/date'
-import {shortName} from '../models/collective'
+const {getDates} = require('../utils/date')
+const {shortName} = require('../models/collective')
 
 const now = new Date()
-const dates = getDates(now);
+const dates = getDates(now)
 
-const days = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];
-const isToday = weekDayIndex => (now.getDay() - 1) === weekDayIndex;
-const weekDay = weekDayIndex => dates[weekDayIndex];
-const short = shortName;
+const isToday = weekDayIndex => (now.getDay() - 1) === weekDayIndex
+const weekDay = weekDayIndex => dates[weekDayIndex]
+const short = shortName
 
 const todayClass = i => isToday(i)
 	? 'current'
 	: ''
 
 const HeadDay = ({i, children}) => (
-	<div className={`${todayClass(i)}`}>
+	<div className={`schedule-table__head-record ${todayClass(i)}`}>
 		<p className="day">{children}</p>
 		<p className="date">{weekDay(i)}</p>
 	</div>
 )
 
-const days2 = [
+const days = [
 	'Понедельник',
 	'Вторник',
 	'Среда',
@@ -33,15 +32,15 @@ const days2 = [
 
 const Schedule = ({groups}) => (
 	<div className="schedule-table">
-		<div className="schedule-table__head">
-			<div className="group">Гр.</div>
-
-			{days2.map((day, index) => (
-				<HeadDay key={index} i={index}>{day}</HeadDay>
-			))}
-		</div>
-
 		<div className="schedule-table__body">
+			<div className="schedule-table__body-row">
+				<div className="schedule-table__body-group">Гр.</div>
+
+				{days.map((day, index) => (
+					<HeadDay i={index}>{day}</HeadDay>
+				))}
+			</div>
+
 			{groups.map((group, index) => (
 				<GroupRow key={index} {...group}/>
 			))}

src/routes/schedule.js

@@ -35,7 +35,7 @@ function getSchedule() {
 				//}))
 
 				const Component = (
-					<div className="content content_full">
+					<div className="content content_wide">
 						{/*<ScheduleList schedules={schedules}/>*/}
 
 						<Schedule {...data}/>

src/style/body-wrapper.scss

@@ -12,7 +12,6 @@
 
 .body-wrapper__content {
   flex: 1;
-  margin: 0 auto 0;
 }
 
 @media (max-width: $mobile-width) {

src/style/components/schedule-table.scss

@@ -20,7 +20,7 @@ $current-day-column-border-thickness: 3px;
   }
 
   .lesson {
-    font-weight: bold;
+    margin-bottom: $half-margin;
   }
 
   .teacher {
@@ -32,24 +32,6 @@ $current-day-column-border-thickness: 3px;
     border-right: $current-day-column-border-thickness solid;
   }
 
-  &__head{
-    display: flex;
-
-    .date {
-      margin: .5em 0 0;
-      font-size: 1.5em;
-    }
-
-    & > div{
-      min-width: $cell-width;
-      text-align: center;
-    }
-
-    & > .group{
-      min-width: $group-cell-width;
-    }
-  }
-
   &__body {
     display: flex;
     flex-direction: column;
@@ -72,6 +54,22 @@ $current-day-column-border-thickness: 3px;
     }
   }
 
+  &__head-record {
+    min-width: $cell-width;
+    padding: $row-padding;
+
+    text-align: center;
+
+    & > .group {
+      min-width: $group-cell-width;
+    }
+
+    .date {
+      margin: .5em 0 0;
+      font-size: 1.5em;
+    }
+  }
+
   &__record{
     min-width: $cell-width;
     padding: $row-padding;

src/style/variables.scss

@@ -6,7 +6,7 @@ $tablet-min-width: 31.25em;
 $tablet-max-width: 64em;
 
 $content-full: 100%;
-$content-wide: 80%;
+$content-wide: 90%;
 $content-semi-wide: 70%;
 $content-thin: 60%;