Fix break word css causing lines to overflow

themes/lite/templates/base.html

@@ -7,6 +7,12 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1">
 
 		<style>
+			*, *::before, *::after {
+				box-sizing: border-box;
+			}
+			p, h1, h2, h3, h4, h5, h6 {
+				overflow-wrap: break-word;
+			}
 			a.external {
 				background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath fill='%23fff' stroke='%23000' d='M1.5 4.518h5.982V10.5H1.5z'/%3E%3Cpath fill='%23000' d='M5.765 1H11v5.39L9.427 7.937l-1.31-1.31L5.393 9.35l-2.69-2.688 2.81-2.808L4.2 2.544z'/%3E%3Cpath fill='%23fff' d='m9.995 2.004.022 4.885L8.2 5.07 5.32 7.95 4.09 6.723l2.882-2.88-1.85-1.852z'/%3E%3C/svg%3E%0A");
 				background-position: center right;

themes/theme/templates/style.css

@@ -1,8 +1,16 @@
+			*, *::before, *::after {
+				box-sizing: border-box;
+			}
+			p, h1, h2, h3, h4, h5, h6 {
+				overflow-wrap: break-word;
+			}
+
 			html {
 				overflow-y: scroll;
 			}
 
 			body {
+				-webkit-font-smoothing: antialiased;
 				text-rendering: optimizeLegibility;
 				font-family: serif;
 			}