fix: Long attachment names are now wrapped, minor CSS improvements (#180)

Author: MauritsioRK

lib/public/components/Post/index.js

@@ -21,7 +21,7 @@ import { h } from '/js/src/index.js';
  * @return {vnode} A collection of links seperated by commas
  */
 const linksContainer = (links, properties, textKey) => links.length > 0
-    ? h('.flex-wrap', links.map((link, index) => h('.flex-row', [
+    ? h('.flex-wrap', { style: 'word-break: break-all' }, links.map((link, index) => h('.flex-row', [
         h('a', properties(link), link[textKey]),
         index + 1 < links.length ? h('', { style: 'white-space: pre;' }, ', ') : null,
     ])))
@@ -86,9 +86,7 @@ const activeFields = (model) => ({
  */
 const replyButton = (model, post) => h('a.btn.btn-primary', {
     id: `reply-to-${post.id}`,
-    style: {
-        float: 'right',
-    },
+    style: 'float: right;',
     onclick: (e) => model.router.handleLinkEvent(e),
     href: `?page=create-log-entry&parentLogId=${post.id}`,
 }, 'Reply');
@@ -105,24 +103,17 @@ const replyButton = (model, post) => h('a.btn.btn-primary', {
 const entry = (model, post, index, highlight) => {
     const postFields = activeFields(model);
 
-    return h('.w-100.flex-row.shadow-level1', {
-        id: `post${index}`,
-        style: {
-            margin: '5px',
-        },
-    }, [
-        h(`.w-20.shadow-level1${highlight ? '.bg-gray-light' : ''}`, {
-            style: { padding: '10px' },
-        }, [
+    return h(`#post${index}.w-100.flex-row.m1.shadow-level1`, [
+        h(`.w-20.p2.shadow-level1${highlight ? '.bg-gray-light' : ''}`, [
             h('table', [
                 h('tbody', Object.entries(postFields)
                     .map(([key, { name, format, visible }]) => visible && h(`tr#post${index}-${key}`, [
-                        h('td', { style: { 'text-align': 'right', 'font-weight': 'bold' } }, `${name}:`),
+                        h('td.text-right', { style: 'font-weight: bold' }, `${name}:`),
                         h('td', post[key] && format ? format(post[key]) : post[key] || 'None'),
                     ]))),
             ]),
         ]),
-        h('.w-80.shadow-level1', { style: { padding: '10px' } }, [
+        h('.w-80.p2.shadow-level1', [
             h('h4', post.title, replyButton(model, post)),
             h(`textarea.w-100#post-content${index}`, {
                 oninit: () => {