fix: Show 'Convert Code to Paragraph' button for <code> elements

Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>

webclient/src/Article.js

@@ -105,7 +105,7 @@ function Article({ cache }) {
 									:
 										<React.Fragment key={k}>
 											<v.localName dangerouslySetInnerHTML={v.innerHTML ? { __html: v.innerHTML } : null} />
-											{v.localName === 'pre' && <button onClick={() => pConvert(k)}>Convert Code to Paragraph</button>}
+											{(v.localName === 'pre' || v.localName === 'code') && <button onClick={() => pConvert(k)}>Convert Code to Paragraph</button>}
 										</React.Fragment>
 									)
 							)}

webclient/src/Comments.js

@@ -85,7 +85,7 @@ function Comments({ cache }) {
 						{' '} | <HashLink to={'#'+cid} id={cid}>{moment.unix(c.date).fromNow()}</HashLink>
 
 						{hidden || hasChildren &&
-							<span className='collapser pointer' onClick={() => collapseComment(cid)}>–</span>
+							<button className='collapser pointer' onClick={() => collapseComment(cid)}>–</button>
 						}
 					</p>
 				</div>
@@ -93,7 +93,7 @@ function Comments({ cache }) {
 				<div className={isCollapsed ? 'text hidden' : 'text'}  dangerouslySetInnerHTML={{ __html: c.text || '<p>[Empty / deleted comment]</p>'}} />
 
 				{hidden && hasChildren ?
-					<div className='comment lined info pointer' onClick={() => expandComment(cid)}>[show {countComments(c)-1} more]</div>
+					<button className='comment lined info pointer' onClick={() => expandComment(cid)}>[show {countComments(c)-1} more]</button>
 				:
 					c.comments.map(i => displayComment(story, i, level + 1))
 				}

webclient/src/Style-light.css

@@ -51,6 +51,8 @@ input {
 
 pre {
 	overflow: auto;
+	white-space: pre-wrap;
+	overflow-wrap: break-word;
 }
 
 .container {
@@ -196,6 +198,11 @@ span.source {
 
 .comment .text {
 	margin-top: -0.5rem;
+	margin-bottom: 1rem;
+}
+
+.comment .text > * {
+	margin-bottom: 0;
 }
 
 .comment .text.hidden > p {
@@ -215,6 +222,31 @@ span.source {
 	padding-right: 1.5rem;
 }
 
+button.collapser {
+	background: transparent;
+	border: none;
+	margin: 0;
+	padding-top: 0;
+	padding-bottom: 0;
+	font: inherit;
+	color: inherit;
+}
+
+button.comment {
+	background: transparent;
+	border-top: none;
+	border-right: none;
+	border-bottom: none;
+	margin: 0;
+	padding-top: 0;
+	padding-right: 0;
+	padding-bottom: 0;
+	font: inherit;
+	color: inherit;
+	text-align: left;
+	width: 100%;
+}
+
 .comment .pointer {
 	cursor: pointer;
 }