diff --git a/src/static/ribbit-core.css b/src/static/ribbit-core.css
index 9aedb73..8962874 100644
--- a/src/static/ribbit-core.css
+++ b/src/static/ribbit-core.css
@@ -39,20 +39,24 @@
 
 #ribbit.wysiwyg .ribbit-editing > .md-delim {
     display: inline;
-    opacity: 0.4;
+    opacity: 0.8;
+    /*
     font-weight: normal;
     font-style: normal;
     font-family: monospace;
     font-size: 0.85em;
+    */
 }
 
 /* List prefixes use a separate class so CSS can replace them with
    real list bullets in view state while keeping them in textContent */
 .md-list-prefix {
     display: inline;
-    opacity: 0.4;
+    opacity: 0.8;
+    /*
     font-family: monospace;
     font-size: 0.85em;
+    */
 }
 
 #ribbit.view .md-list-prefix {
@@ -96,8 +100,7 @@
  */
 
 #ribbit.wysiwyg {
-    font-family: monospace;
-    white-space: pre-wrap;
+    /* white-space: pre-wrap; */
 }
 
 .md-h1 { font-size: 2em;   font-weight: bold; }
diff --git a/test/integration/index.html b/test/integration/index.html
index ff99cca..4df85b5 100644
--- a/test/integration/index.html
+++ b/test/integration/index.html
@@ -6,8 +6,19 @@
     <link rel="stylesheet" href="/static/themes/ribbit-default/theme.css">
     <style>
         body { font-family: sans-serif; margin: 20px; }
-        #ribbit { border: 1px solid #ccc; padding: 20px; min-height: 200px; }
-        .ribbit-toolbar { background: #f5f5f5; border: 1px solid #ccc; padding: 4px; margin-bottom: 8px; }
+        main { max-width: 960px; margin: auto }
+        #ribbit { 
+            border: 1px solid #ccc;
+            padding: 20px;
+            min-height: 200px; 
+            margin: auto;
+        }
+        .ribbit-toolbar { 
+            background: #f5f5f5;
+            border: 1px solid #ccc;
+            padding: 4px;
+            margin-bottom: 8px; 
+        }
         .ribbit-toolbar ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
         .ribbit-toolbar button { padding: 4px 8px; border: 1px solid #ddd; border-radius: 3px; background: white; cursor: pointer; font-size: 12px; }
         .ribbit-toolbar button.active { background: #d0d0ff; }
@@ -18,19 +29,19 @@
     </style>
 </head>
 <body>
+    <main>
     <article id="ribbit">**bold** and *italic* and `code`
 
-## Heading
 
-- list item 1
-- list item 2
+| Type | To Get |
+|------|--------|
+| `*emphasis*` | *emphasis* |
+| `**bold**` | **bold** |
+| `abel](/link/address)` | [link label](/link/address) |
+| ``inline`` | `inline` |
 
-> a blockquote
-
-| A | B |
-|---|---|
-| 1 | 2 |
 </article>
+    </main>
 
     <script src="/static/ribbit.js"></script>
     <script>
