Updated table styling to ideally by more predictable

Set styles to be fixed and not cut text.

resources/assets/js/pages/page-form.js

@@ -50,7 +50,7 @@ function editorPaste(e, editor) {
 function registerEditorShortcuts(editor) {
     // Headers
     for (let i = 1; i < 5; i++) {
-        editor.addShortcut('ctrl+' + i, '', ['FormatBlock', false, 'h' + i]);
+        editor.addShortcut('meta+' + i, '', ['FormatBlock', false, 'h' + i]);
     }
 
     // Other block shortcuts

resources/assets/sass/_html.scss

@@ -1,6 +1,7 @@
 * {
   box-sizing: border-box;
 }
+
 html {
   background-color: #FFFFFF;
   height: 100%;
@@ -9,6 +10,7 @@ html {
     overflow-y: hidden;
   }
 }
+
 body {
   font-family: $text;
   font-size: $fs-m;
@@ -20,15 +22,3 @@ body {
 button {
   font-size: 100%;
 }
-
-table {
-  min-width: 100px;
-  td, th {
-	min-width: 10px;
-	padding: 4px 6px;
-	border: 1px solid #DDD;
-  }
-  td p, th p {
-    margin: 0;
-  }
-}

resources/assets/sass/_pages.scss

@@ -66,9 +66,10 @@
     margin: $-m 0;
   }
   table {
-    word-break: break-all;
-    word-break: break-word;
     hyphens: auto;
+    table-layout: fixed;
+    max-width: 100%;
+    height: auto !important;
   }
 }
 

resources/assets/sass/_tables.scss

@@ -1,3 +1,21 @@
+table {
+  min-width: 100px;
+  max-width: 100%;
+  thead {
+    background-color: #F8F8F8;
+    font-weight: 500;
+  }
+  td, th {
+    min-width: 10px;
+    padding: 6px 8px;
+    border: 1px solid #DDD;
+    overflow: auto;
+    line-height: 1.2;
+  }
+  td p, th p {
+    margin: 0;
+  }
+}
 
 table.table {
   width: 100%;
@@ -9,6 +27,7 @@ table.table {
     border: none;
     padding: $-xs $-xs;
     vertical-align: middle;
+    margin: 0;
   }
   th {
     font-weight: bold;
@@ -18,14 +37,6 @@ table.table {
   }
 }
 
-table {
-  max-width: 100%;
-  thead {
-    background-color: #F8F8F8;
-    font-weight: 500;
-  }
-}
-
 table.no-style {
   td {
     border: 0;