fix(web): use kebab-case CSS classes and Tailwind font-mono var

Quentin Gliech and Claude Opus 4.6 (1M context) created 1 month ago

Rename code_block → code-block, code_content → code-content.
Use var(--font-mono) from the Tailwind theme instead of hardcoded
font-family stack.

Co-Authored-By: Claude Opus 4.6 (1M context) <[e-mail]>

Change summary

webui2/src/components/code/file-viewer.module.css | 20 ++++++++--------
webui2/src/components/code/file-viewer.tsx        |  6 ++--
2 files changed, 13 insertions(+), 13 deletions(-)

Detailed changes

webui2/src/components/code/file-viewer.module.css

@@ -1,35 +1,35 @@
-.code_block {
+.code-block {
   overflow-x: auto;
-  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+  font-family: var(--font-mono);
   font-size: 0.75rem;
   line-height: 1.25rem;
 }
 
-.code_content pre {
+.code-content pre {
   margin: 0 !important;
   padding: 0 !important;
 }
 
-.code_content code {
+.code-content code {
   display: block;
 }
 
-.code_content code > .line {
+.code-content code > .line {
   display: block;
   min-width: 100%;
   padding-right: 1rem;
 }
 
-.code_content code > .line:first-child {
+.code-content code > .line:first-child {
   padding-top: 0.5rem;
 }
 
-.code_content code > .line:last-child {
+.code-content code > .line:last-child {
   padding-bottom: 0.5rem;
 }
 
 /* Line numbers via ::before pseudo-element */
-.code_content code > .line::before {
+.code-content code > .line::before {
   content: attr(data-line-number);
   display: inline-block;
   width: 3rem;
@@ -41,10 +41,10 @@
 }
 
 /* Line highlighting */
-.code_content code > .line.highlighted {
+.code-content code > .line.highlighted {
   background-color: rgba(255, 235, 59, 0.3);
 }
 
-:global(.dark) .code_content code > .line.highlighted {
+:global(.dark) .code-content code > .line.highlighted {
   background-color: rgba(255, 235, 59, 0.15);
 }

webui2/src/components/code/file-viewer.tsx

@@ -289,7 +289,7 @@ function CodeBlock({ selectedRange, onLineClick, children }: CodeBlockProps) {
   // targeting the CSS module's scoped class.
   const highlightStyle = (() => {
     if (!selectedRange) return null;
-    const scope = `.${styles["code_content"]}`;
+    const scope = `.${styles["code-content"]}`;
     const selectors: string[] = [];
     for (let i = selectedRange.start; i <= selectedRange.end; i++) {
       selectors.push(`${scope} code > .line:nth-child(${i})`);
@@ -300,7 +300,7 @@ function CodeBlock({ selectedRange, onLineClick, children }: CodeBlockProps) {
 
   return (
     <div
-      className={styles["code_block"]}
+      className={styles["code-block"]}
       onClick={(e) => {
         const target = e.target as HTMLElement;
         const lineEl = target.closest("[data-line-number]");
@@ -312,7 +312,7 @@ function CodeBlock({ selectedRange, onLineClick, children }: CodeBlockProps) {
       }}
     >
       {highlightStyle}
-      <div className={styles["code_content"]}>
+      <div className={styles["code-content"]}>
         {children}
       </div>
     </div>