Aesthetic changes: remove fade effect, borders, and change color scheme.

app.py

@@ -137,7 +137,7 @@ Each subsequent row of images was generated using the same process, but with a d
 See SamplePrompts.csv for the list of prompts used and their descriptions.
 """
 
-TOOLTIP_NOTE_HTML = '<div class="hover-hint">Underlined items can be hovered for more info.</div>'
+TOOLTIP_NOTE_HTML = '<div class="hover-hint">Hover over underlined items for more info.</div>'
 
 HOVER_HINT_CSS = """
 /* Solid, visible underline for tagged items */
@@ -162,6 +162,13 @@ HOVER_HINT_CSS = """
   bottom: 6px;
   text-align: right;
 }
+
+/* Extra padding around commas */
+.badpad{
+  display:inline-block;         /* make padding take effect */
+  padding: 0 0.60em;            /* ~two extra spaces total on each side of ',' -> ~3-ch width overall */
+  border-radius: 3px;           /* a tiny rounding looks nicer on a blocky background */
+}
 """
 
 
@@ -221,43 +228,6 @@ css = HOVER_HINT_CSS + """
 .scrollable-content::-webkit-scrollbar-thumb{ background: rgba(180,180,180,.9); border-radius: 8px; }
 .scrollable-content::-webkit-scrollbar-track{ background: rgba(0,0,0,.15); }
 
-/* --- Fade that blends into the pane background, no chip --- */
-.scroll-fade { 
-  position: relative; 
-  /* ensure our ::after overlay paints above children */
-  isolation: isolate;
-}
-
-.scroll-fade::after{
-  content: "";
-  position: absolute;
-  left: 0; right: 0; bottom: 0;
-  height: 20px;                 /* a hair taller; tweak if you like */
-  pointer-events: none;
-  /* transparent → panel background (Gradio theme var, with dark fallback) */
-  background: linear-gradient(
-    to bottom, 
-    rgba(0,0,0,0), 
-    var(--background-fill-secondary, #1f2937)
-  );
-  transition: opacity .18s ease;
-  z-index: 3;                   /* sit above the scroller’s content */
-}
-
-.scroll-fade.at-bottom::after { opacity: 0; }
-
-/* no chip */
-.scroll-fade::before { content: none; }
-
-/* --- Subtle divider between Unknown and Suggested panes --- */
-.pane-right {
-  border-left: 1px solid var(--block-border-color, rgba(255,255,255,.16));
-  padding-left: 16px;               /* keep content away from divider */
-}
-.pane-left {
-  padding-right: 16px;              /* symmetrical spacing */
-}
-
 /* (Optional) make both scroll panes taller so they fill more of the column */
 .pane-left  .scrollable-content,
 .pane-right .scrollable-content {
@@ -983,12 +953,12 @@ def format_annotated_html(bad_entities, known_entities, text):
         "Model Specific": "This is not an e621 tag, but may still be valid with the right model.  Check your model&#39;s documentation.  If the tag is not mentioned in the documentation, do not use it."
     }
     color_map = {
-        "Unknown Tag": ("white", "red"),
-        "Duplicate": ("black", "yellow"),
-        "Move Comma Inside Parentheses": ("white", "green"),
-        "Double Comma": ("white", "orange"),
-        "Model Specific": ("black", "lightgray"), 
-        "Remove Final Comma": ("white", "brown")
+        "Double Comma": ("black", "#E69F00"),         # Orange — black text
+        "Duplicate": ("black", "#F0E442"),            # Yellow — black text
+        "Model Specific": ("black", "#56B4E9"),       # Sky blue — black text 
+        "Move Comma Inside Parentheses": ("white", "#009E73"),  # Bluish green
+        "Remove Final Comma": ("white", "#0072B2"),   # Blue
+        "Unknown Tag": ("white", "#D55E00"),          # Vermilion — danger
     }
 
     # Splice from the original text so indexes stay valid.
@@ -1023,7 +993,11 @@ def format_annotated_html(bad_entities, known_entities, text):
                 )
         else:
             fg, bg = color_map.get(label, ("black", "white"))
-            html_part = f'<span style="background-color: {bg}; color: {fg};">{disp}</span>'
+            # Make single-character issues (commas) easier to see by padding the span
+            pad_labels = ("Remove Final Comma", "Move Comma Inside Parentheses", "Double Comma")
+            pad_class = "badpad" if label in pad_labels else ""
+            class_attr = f' class="{pad_class}"' if pad_class else ""
+            html_part = f'<span{class_attr} style="background-color: {bg}; color: {fg};">{disp}</span>'
 
         html_text = html_text[:start] + html_part + html_text[end:]