- Issue created by @rkoller
- Merge request !598Issue #3506330: Improve the styling for vertical tabs. โ (Open) created by Unnamed author
Fix the issue "Improve the styling for vertical tabs". Please review.
- Status changed to Needs work
3 months ago 9:56am 18 April 2025 - ๐ณ๐ฑNetherlands batigolix Utrecht
I tried this locally but I did not see a difference.
@utkarsh_kumar_singh can you add screenshots that show the changes that you made?
Hi @batigolix,
Apologies for the delayed response.As requested, I'm sharing the before and after images to illustrate the issue and the changes made. Please review them and let me know if any further adjustments are needed.
Looking forward to your feedback.
- ๐ฎ๐ณIndia snehal-chibde
hello @utkarsh_kumar_singh, even i have tried this locally, I do not see any changes.
Added screenshots for reference. Hello @snehal-chibde,
Thank you for review. Iโve updated the MR. Iโve fixed the height of the content to match the height of all vertical tabs in dark mode for better consistency.
As mentioned in first bullet point in "Proposed resolution" I increased the contrast of --gin-border-color. However, I couldnโt directly adjust the contrast of --vertical-tabs-border-color as this variable is not defined in the Gin theme for light mode. I am adding the screenshots for both light and dark mode.Please have a look and let me know your thoughts.
- ๐ฎ๐ณIndia Kanchan Bhogade
Hi
have manually tested MR 598 on Drupal 10.3 version with Gin theme
The MR is applied Successfully...Vertical tab height is fixed for the dark mode.
The border color for light mode also darker.Attaching screenshot for reference
RTBC+1
Keeping in need review for code verification
- Status changed to Needs review
24 days ago 2:59pm 3 July 2025 - ๐จ๐ฆCanada mgifford Ottawa, Ontario
@batigolix @snehal-chibde Do the existing screenshots clarify things in the latest version? It seems like with code verification we may be able to get this to RTBC.
- ๐จ๐ฆCanada mgifford Ottawa, Ontario
There are a few code changes in the MR, but the most important one for this is this code
--gin-border-color: #d4d4d8;
changing to--gin-border-color: #838585;
Just to compare the greys https://coolors.co/contrast-checker/838585-d4d4d8
The big thing here is that are these going to work in dark mode, and with forced-colors.
- ๐ฎ๐ณIndia divyansh.gupta Jaipur
Tested the MR locally. Borders now show properly in light mode, content area height matches tabs in dark mode. MR scoped to vertical tabs only. Ready to be RTBC.
- ๐ฉ๐ชGermany jurgenhaas Gottmadingen
The MR contains lots of unrelated changes that need to be reverted first.