fix: FIT-138: Text on ASR Hypotheses Selection template not visible Dark mode #7638
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
✅ Deploy Preview for heartex-docs canceled.
|
✅ Deploy Preview for label-studio-storybook canceled.
|
✅ Deploy Preview for label-studio-playground canceled.
|
✅ Deploy Preview for label-studio-docs-new-theme canceled.
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
✅ All tests successful. No failed tests found. Additional details and impacted files@@ Coverage Diff @@
## develop #7638 +/- ##
========================================
Coverage 78.48% 78.48%
========================================
Files 197 197
Lines 16000 16000
========================================
Hits 12557 12557
Misses 3443 3443
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Pull Request Overview
This PR fixes an issue with the dark mode display of transcription text by removing conflicting inline styles from the ASR Hypotheses templates. Key changes include:
- Removing explicit background-color and box-shadow CSS properties.
- Leaving only minimal inline styling (padding-left: 5px;) so that Dark mode styles apply correctly.
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| label_studio/annotation_templates/ranking-and-scoring/asr-hypotheses/config.yml | Removed conflicting inline styles from transcription objects |
| docs/source/templates/asr_hypotheses.md | Removed conflicting inline styles from transcription examples |
label_studio/annotation_templates/ranking-and-scoring/asr-hypotheses/config.yml
Outdated
Show resolved
Hide resolved
…ed margin to prevent the box shadow from being cut off.
There was a problem hiding this comment.
Pull Request Overview
Centralize styling for ASR Hypotheses Selection to support Dark mode by adding a unified CSS block and removing per-choice inline styles.
- Added a
<Style>block defining.lsf-choice__itemrules inconfig.yml - Added the same
<Style>block inasr_hypotheses.md - Removed all inline
styleattributes from sample transcription data
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| label_studio/annotation_templates/ranking-and-scoring/asr-hypotheses/config.yml | Added centralized CSS for choice items and removed inline styles |
| docs/source/templates/asr_hypotheses.md | Added centralized CSS for choice items and removed inline styles |
label_studio/annotation_templates/ranking-and-scoring/asr-hypotheses/config.yml
Outdated
Show resolved
Hide resolved
label_studio/annotation_templates/ranking-and-scoring/asr-hypotheses/config.yml
Outdated
Show resolved
Hide resolved
hlomzik
approved these changes
May 28, 2025
robot-ci-heartex
deleted the
fb-fit-138/text-asr-hypotheses-selection-template-not-visible-dark-mode
branch
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Reason for change
The existing styling for ASR Hypotheses choices relied on individual inline styles, leading to Dark mode not being supported. This PR addresses this by centralizing the styling for
.lsf-choice__itemelements (ASR transcription choices) into a unified CSS block.Specifically, custom CSS has been added within the
<Style>block indocs/source/templates/asr_hypotheses.mdandlabel_studio/annotation_templates/ranking-and-scoring/asr-hypotheses/config.yml. This new CSS defines consistentpadding,box-shadow,background-color,border-radius,margin,line-height, andtransitioneffects.A hover style has also been added for improved user interaction feedback. All previously existing per-choice inline styles have been removed, ensuring that all transcription choices now uniformly adopt the styles defined in the centralized CSS block.
This change significantly improves maintainability, consistency, and the overall visual appearance of ASR Hypotheses choices in both documentation and configuration files.
Screenshots
Before:
After:
Testing
The following steps were performed to verify the fix:
Reviewer notes
Please pay close attention to the new CSS added within the
<Style>block in bothdocs/source/templates/asr_hypotheses.mdandlabel_studio/annotation_templates/ranking-and-scoring/asr-hypotheses/config.yml. Verify that all inline styles for individual transcription choices have been successfully removed. Confirm that the new centralized styling provides a consistent and visually appealing experience for ASR hypotheses without any regressions or unexpected side effects.General notes
This change is a significant step towards improving the maintainability and visual consistency of our templates. By centralizing the styling, future modifications will be much simpler and less prone to inconsistencies.