Change #1218345 had a related patch set uploaded (by Audrey Penven; author: Audrey Penven):

[mediawiki/extensions/Wikibase@master] [WIP] styling for horizontally-scrollable snak values

https://gerrit.wikimedia.org/r/1218345

There's an in-progress patch for this, with a css-only change. It works for musical notation, but is not ideal for long string values.

What's left to do:

• confirm and probably fix the relationship of the right side of the snak value, the gradient mask, and the end of the container
• get feedback from @Alice.moutinho about how the left side should behave once the user starts scrolling. Is the sharp cutoff ok, or should this also have a fade?
• made the fade also work for long strings. It should be possible to scroll them far enough to see it unobstructed by the fade. (this could be a followup)

Adding some screencasts that were supposed to accompany Audrey’s comment but Phabricator was acting up (you might have to right click > open video in new tab and/or download them in order to play them properly):

long musical notation with fade-out on the right side:
{F71122398}

long string, which can never fully escape from the faded out area:
{F71122397}
that^ should be fixed either before merging my patch, or in a followup

🔄 Development Handover Summary

📋 Overview

Implementing the musical notation to cover the long notations with an overflow and a gradient fade to the right.

✅ Work Completed

• Long values have their overflow hidden and are scrollable.
• Long values are truncated with fade.

🔧 Technical Implementation Details

Changes Made:

• Implemented the gradient fade for the long musical notations.
• Fixed both LTR/RTL for the musical notations (both should always scroll from the left side).
• Fixed the case of RTL with long snak value, the layout shifts.
• Covered the musical notations view with E2E test (will be implemented in teh Score extension).
• Covered the snakValue with Jest test.

Dependencies:

• Score extension.
• Lilypond should be also installed.

🧪 Testing/Technical Status

Completed:

• Covered the snakValue with Jest test for the musical notations.

Test Coverage:

Unit Tests:

• Sets the musical-notation-value class for musical notation datatype.
• Does not set musical-notation-value class for other datatypes like string.

E2E Tests:

• Displays musical notation statement with correct class and fade effect and music image existence.

🚧 Remaining Work

High Priority:

• Need to clarify with @Alice.moutinho if the starting value should be also having a gradient fade like the end.

Blocked/Deferred:

• Need to clarify whether there is a way to test the musical notations in the CI, otherwise the E2E test should be removed.

🔗 Related Resources

Related Gerrit Patch(es):

• https://gerrit.wikimedia.org/r/c/mediawiki/extensions/Wikibase/+/1218345

🎯 Suggested Next Steps

1. Check with Alice on the mentioned issues.
2. Check for the CI to test the Score extension

For Reviewer:

• Added minor comments in the patch explains the CI thing, with the long string layout shifting issue.

For Next Developer:

• Check if there is a needed fading for the notation start, or just a sharp cutoff

📸 Screenshots/Demos

Before:

After:

Handover Date: 18th December 2025
Last Updated By: Mahmoud (06-01-2026)
Status: Done for the current requirements,.

Hello @AudreyPenven_WMDE, answering to your question : "if the starting value should be also having a gradient fade like the end"

i don't think a fade is necessary at the start, because the fade is to signify that you can scroll, and once the user has scrolled so the start is cut: - he already knows that it is scrollable, so mission accomplished, and the way the notation will be cut at the start (missing characters typical of the beginning of a musical notation) will also be a dead give away that you can scroll. So i would keep it simple and do a clean cut.

Change #1218345 merged by jenkins-bot:

[mediawiki/extensions/Wikibase@master] Styling for horizontally-scrollable snak values

https://gerrit.wikimedia.org/r/1218345

Not sure if it's just on my end, but I am unable to publish a musical notation statement on test wikidata anymore

Hi @Arian_Bozorg .. I tried adding the musical notations on the test environment now with two statements and it works fine: https://test.wikidata.org/wiki/Q241449
You might need to check if the Mobile Editing feature is enabled in your account preferences.
Any issue/error I can assist you with?