Local error style fixes

Author: elmisback

src/herbie/LocalError/newLocalError.css

@@ -11,26 +11,36 @@
   border-radius: 4px;
 } */
 
-.high-error {
-  background-color: rgba(255, 0, 0, 0.2); /* Light red for high errors */
-  color: red;
+.high-error .accuracy-col {
+  font-weight: 500;
+  color: #b91c1c;             /* Keep the red tone */
+  background-color: #fdf2f2;  /* Very subtle pink background */
+  border-radius: 3px;
+  padding: 2px 4px;
 }
 
 .program-col {
   white-space: nowrap;
-  padding-right: 50px;
   overflow-x: auto;
   display: block;
-}
-
-.emphasize-diff {
-  font-weight: 500;
-  color: #b91c1c;             /* Keep the red tone */
-  background-color: #fdf2f2;  /* Very subtle pink background */
-  border-radius: 3px;
-  padding: 2px 4px;
+  text-align: left;
+  max-width: 300px;
 }
 
 .local-error td:not(.program-col) {
     text-align: right;
-}
+}
+
+.local-error table {
+  border-spacing: 10px 0px;
+}
+
+.local-error td {
+  font-family: 'Ruda', sans-serif;
+  color: gray;
+}
+
+.has-error td {
+  color: black;
+}
+

src/herbie/LocalError/newLocalError.tsx

@@ -86,9 +86,14 @@ function TreeRow({
     return herbiejs.displayNumber(num);
   }
 
+  const isHighError = parseFloat(node["percent-accuracy"]) < 50;
+  const hasError = parseFloat(node["percent-accuracy"]) < 99.9;
+
+  const rowClassName = isHighError ? "has-error high-error" : hasError ? "has-error" : "";
+
   return (
     <>
-      <tr>
+      <tr className={ rowClassName }>
         <td className="border px-4 py-2 program-col">
           <span
             style={{ marginLeft: `${depth * 15}px`, cursor: "pointer" }}
@@ -123,14 +128,14 @@ function TreeRow({
         <td>{renderValue(node["actual-value"])}</td>
         <td>{renderValue(node["exact-value"])}</td>
         <td>{renderValue(node["abs-error-difference"])}</td>
-        <td>
+        <td className="accuracy-col">
           {parseFloat(node["percent-accuracy"]).toFixed(1)}%
         </td>
-        <td>
-          <span className={`${parseFloat(node["percent-accuracy"]) < 100 ? "high-error" : ""}`}>
+        {/* <td>
+          <span >
             {parseFloat(node["ulps-error"]).toFixed(1)}
           </span>
-        </td>
+        </td> */}
       </tr>
 
       {isExpanded &&
@@ -185,7 +190,6 @@ function NewLocalError({ expressionId }: { expressionId: number }) {
               Difference
             </th>
             <th>Accuracy</th>
-            <th>Local Error</th>
           </tr>
         </thead>
         <tbody>