Fix lint and build errors in Web components

- Components.hs: Fix escaped quotes in renderFormattedJson
- Style.hs: Use overflowWrap instead of wordBreak for breakWord value

1 files changed, 19 insertions, 0 deletions

diff --git a/Omni/Jr/Web/Style.hs b/Omni/Jr/Web/Style.hs
index bbf828b..c385ac7 100644
--- a/Omni/Jr/Web/Style.hs
+++ b/Omni/Jr/Web/Style.hs
@@ -1757,6 +1757,16 @@ unifiedTimelineStyles = do
   ".timeline-generic" ? do
     padding (px 4) (px 0) (px 4) (px 0)
     color "#6b7280"
+  ".formatted-json" ? do
+    margin (px 0) (px 0) (px 0) (px 0)
+    padding (px 8) (px 8) (px 8) (px 8)
+    backgroundColor "#f9fafb"
+    borderRadius (px 4) (px 4) (px 4) (px 4)
+    overflowX auto
+    fontSize (px 12)
+    fontFamily ["SF Mono", "Monaco", "Consolas", "monospace"] [monospace]
+    whiteSpace preWrap
+    overflowWrap breakWord
 
 responsiveStyles :: Css
 responsiveStyles = do
@@ -2088,6 +2098,15 @@ darkModeStyles =
       borderColor "#dc2626"
     ".event-error" |> ".event-label" ? color "#f87171"
     ".error-message" ? color "#f87171"
+    ".timeline-error" |> ".event-label" ? color "#fca5a5"
+    ".timeline-guardrail" |> ".event-label" ? color "#fbbf24"
+    ".timeline-guardrail" ? do
+      backgroundColor "#451a03"
+      borderColor "#f59e0b"
+    ".timeline-guardrail" |> ".guardrail-content" ? color "#fcd34d"
+    ".formatted-json" ? do
+      backgroundColor "#1e1e1e"
+      color "#d4d4d4"
     -- Responsive dark mode: dropdown content needs background on mobile
     query Media.screen [Media.maxWidth (px 600)] <| do
       ".navbar-dropdown-content" ? do