[FIX] styling (word wrapping, table column gaps)

src/css/App.css

@@ -206,7 +206,7 @@ input[type=number]::-webkit-outer-spin-button {
 .page-header > h1 {
   margin: 0;
 	word-wrap: break-word;
-  word-break: break-all;
+  word-break: break-word;
 }
 
 .page-header > h2 {
@@ -215,7 +215,7 @@ input[type=number]::-webkit-outer-spin-button {
   display: flex;
   flex-direction: row;
 	word-wrap: break-word;
-  word-break: break-all;
+  word-break: break-word;
 }
 
 .page-header > .button {
@@ -257,7 +257,7 @@ label > a {
   color: inherit;
   text-decoration: none;
 	word-wrap: break-word;
-  word-break: break-all;
+  word-break: break-word;
 }
 
 label, p, input[type=text], main > span, main div > span {
@@ -274,6 +274,7 @@ label .MuiIconButton-label > input {
 	flex-direction: row;
 	justify-content: space-between;
 	align-items: baseline;
+  flex-wrap: wrap;
 }
 
 .stat-row > h1, .stat-row > h2, .stat-row > h3 {
@@ -376,7 +377,7 @@ label .MuiIconButton-label > input {
 
 .progress-history-container > div > *:first-child {
   border-left: 0;
-  word-break: break-all;
+  word-break: break-word;
   text-align: left;
 }
 

src/css/Progress.css

@@ -31,7 +31,6 @@
 .progress-end-incorrect-answers {
 	display: table;
 	table-layout: fixed;
-	column-gap: 10px;
 	width: 100%;
 	margin-top: 24px;
 	row-gap: 8px;
@@ -46,6 +45,11 @@
 	word-wrap: break-word;
 	padding-top: 2px;
 	padding-bottom: 2px;
+  	border-left: 8px solid transparent;
+}
+
+.progress-end-incorrect-answers > div > *:first-child {
+  	border-left: 0;
 }
 
 .progress-end-button-container {