[openstreetmap/openstreetmap-website] Show tag changes in object history view (PR #6448)

[Pablo Brasero]

@pablobm commented on this pull request.

I'm seeing two things when comparing the production and the PR renders side by side. This is for the normal list of current tags, as opposed to the history view with diffs:

Production | PR
--- | ---
<img width="411" height="401" alt="Tags show with a grey background behind the keys, while values have a white background. Wikidata row has a 'barcode' icon to show further info" src="https://github.com/user-attachments/assets/c27eab60-e593-4fef-a1fc-c0001e16ece2" /> | <img width="411" height="401" alt="Tags show with an all-white background. There's no 'barcode' icon in Wikidata rows" src="https://github.com/user-attachments/assets/0e092f9f-5167-4b46-8c2b-30f2e87f0b7c" />

On production, keys have a grey background and values a white background. On this PR it's an all-white background. (I'm not too bothered by this one, but I don't know what others think and whether they are aware).

On production, `wikidata` tags show the "barcode" icon to trigger an expand for more info. This is missing on the PR version.

> @@ -1033,3 +1033,91 @@ img.trace_image {
     }
   }
 }
+
+/* Tag change highlighting for history views */
+.browse-tag-list {
+  .tag-added {
+    background-color: rgba(var(--bs-success-rgb), 0.08) !important;
+    border-left: 4px solid var(--bs-success);
+
+    th, td {
+      background-color: inherit !important;
+    }
+  }
+
+  .tag-modified {
+    background-color: rgba(var(--bs-warning-rgb), 0.08) !important;

Are all these `important!` declarations necessary? I just tried removing all of them, and the only change I could notice was taller column rows:

Current site | This PR | Removed `important!`
--- | --- | ---
<img width="406" height="281" alt="Tags in changeset, as currently on production" src="https://github.com/user-attachments/assets/4b3e94c3-b174-4e5c-b410-5ecdedd0cbaf" /> | <img width="406" height="281" alt="Tags in changeset as in this PR, with differences highlighted" src="https://github.com/user-attachments/assets/935a98cd-2663-4e92-a34c-0b4277a5d5e6" /> | <img width="406" height="281" alt="Tags in changeset, as in this PR, but columns are a bit taller" src="https://github.com/user-attachments/assets/e5c33dfd-695b-48e0-9ebf-20a3f12b7dfb" />

Mentioning because `important!` is frowned upon in CSS circles.

-- 
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/pull/6448#pullrequestreview-3416151361
You are receiving this because you are subscribed to this thread.

Message ID: <openstreetmap/openstreetmap-website/pull/6448/review/3416151361 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20251104/84ecc8dc/attachment.htm>