Media uploader tabs styling are little broken

[haykbalbabyan]

When you try to upload or select any media from the media uploader you can see tabs tyles are broken, tabs borders are not connected to the border of bottom and when tab is active blue border are et the center.

Steps to reproduce:

1. Go to post edit page
2. Click on the thumbnail or select thumbnail
3. Click on the upload tab and you'll see the issue

Actual result:
"Focused" border ends at the center of tab, and non-active tab's is not connecting to the bottom border.

Expected result:
non-active tab's border should be connected to the bottom border, and active tab's blue border should be end at the bottom instead of center.

[im3dabasia1]

Hey @haykbalbabyan,

Thanks for your first Trac ticket.

I was trying to reproduce the issue you're facing but was unable to. Could you please confirm if this behavior occurs with a default theme like Twenty Twenty-Five and no plugins active?

[sainathpoojary]

Reproduction Report

Description

This report validates whether the issue can be reproduced.

Environment

• WordPress: 6.7.1
• PHP: 8.1.29
• Server: nginx/1.16.0
• Database: mysqli (Server: 8.0.16 / Client: mysqlnd 8.1.29)
• Browser: Chrome 131.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Five 1.0
• MU Plugins: None activated
• Plugins: Test Reports 1.2.0

Actual Results

❌ Error condition didn't occurs.

Supplemental Artifacts

Video: ​https://utfs.io/f/PL8E4NiPUWyOiKbF08CG5UDOC4Pax1oEMRsQygVfuSB7Nbr8

[mayanktripathi32]

Hello @haykbalbabyan,

Thank you for reporting this issue.

I attempted to replicate the behavior you described by following the steps provided, but I was unable to observe the problem. The tabs and borders in the media uploader appear as expected.

​https://imgur.com/a/givJO9e

To investigate further, could you please share additional details such as:

1. Active Theme: Which theme are you currently using?
2. Active Plugins: Could you list the plugins you have activated?
3. Browser and Version: Which browser are you using, and its version?
4. Customizations: Have there been any custom CSS or script modifications applied to your site?

Regards

[haykbalbabyan]

Hi everyone, thanks for your answers.

I am a developer at a company that specializes in developing custom plugins based on WooCommerce.

We didn't have this problem before, only after we migrated WordPress version to 6.7.1, before that we were using 6.6.1 and didn't see this problem. That's the reason why I maked this ticked, we haven't applied any styles related to the media uploader. Also we use a custom js code based on WP API that allows us to open the media uploader and select any media. You can also try with a custom code to open the media uploader (without jquery) to see if there issue is exists, just make sure you're outside gutenberg. For example you can create custom admin page and try there. If you need - I can give you the code to open media uploader, but ChatGPT can help you :)))

(it's just that we have posts disabled and I can't try on the post edit page)

Again, Thank you all!

[mayanktripathi32]

Hello @haykbalbabyan,

It would be helpful if you could provide the code, as I have tested this on version 6.7.1 again but was unable to reproduce the issue. Additionally, could you share a list of the plugins you had active during testing? It might also help if you could disable the plugins and try testing again.

Regards,

[haykbalbabyan]

Thanks everyone, Im not sure how but currently issue is fixed. it may can be because of the font family, again thank you all!