I'm happy to take a pass at this, but some things may change based on the new tabbed layout of these panels that @Cparle is currently implementing.

Actually, I think I will set the status of this ticket as "blocked" until the tab UI ticket is completed.

Maybe some of the concerns of the mobile design ticket T215818 could also be addressed as part of this work.

If this is to be done after the tabs are done then it should be blocked by T215642, instead of blocking T215644 (which… it doesn't?).

Now that tabs are seemingly almost ready to go, we can unblock this, yeah?

Updated padding changes to the statement box (per a chat with Nirzar): you can attach the items to the search box since the search adds an object to the list.

See here:

Change 497835 had a related patch set uploaded (by Ha78na; owner: Ha78na):
[mediawiki/extensions/WikibaseMediaInfo@master] [WIP] Styling adjustments on captions and statements tabs

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

Change 498215 had a related patch set uploaded (by Ha78na; owner: Ha78na):
[mediawiki/extensions/UploadWizard@master] Adjust caption remove button css

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

Change 498215 merged by jenkins-bot:
[mediawiki/extensions/UploadWizard@master] Adjust caption remove button css

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

Change 497835 abandoned by Ha78na:
Styling adjustments on captions and statements tabs

Reason:
Found out you can use flexbox with mediawiki which changes ... everything. Would have been nice to realize this earlier

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

Change 498261 had a related patch set uploaded (by Ha78na; owner: Eric Gardner):
[mediawiki/extensions/WikibaseMediaInfo@master] WIP: Refactor panel styles to use LESS features, Flexbox

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

Another update from design.

Change 498261 had a related patch set uploaded (by Eric Gardner; owner: Eric Gardner):
[mediawiki/extensions/WikibaseMediaInfo@master] Refactor panel styles to use LESS features, Flexbox

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

Ok, here is the current visual state of the panels. @PDrouin-WMF I was working from the Invision link here as a visual reference:
https://wikimedia.invisionapp.com/share/ZMOI9QK9TKS#/screens/324827164

Captions Panel
Read mode:

Edit mode:

Depicts Panel
Read mode:

Edit mode:

If there are minor adjustments remaining to spacing, etc (seems like that has gone back and forth a bit), I think my preference would be to merge my current patch which at least resolves T216772, and then refine things in an a new smaller patch. The current patch also contains a lot of under-the-hood improvements in how CSS is organized that should make small adjustments easier to do down the road.

This is looking so much better. Sounds good to me to merge the current patch and any additional adjustments can be smaller patches. Thank you!

Change 498261 merged by jenkins-bot:
[mediawiki/extensions/WikibaseMediaInfo@master] Refactor panel styles to use LESS features, Flexbox

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

Captions is looking much better with all the adjustments. Depicts is also looking great, and there are just two minor changes that need to be made:

1. The baseline alignment is still slightly off - moving the P number down just a tad should fix that

2. Depicts is capitalized. It should be lowercase.

2. is simply because that property has an uppercase 'D' on beta-wikidata - we don't capitalize or lowercase the labels. It's lowercase on prod wikidata, so that won't be an issue there.

In T216773#5082443, @matthiasmullie wrote:

2. is simply because that property has an uppercase 'D' on beta-wikidata - we don't capitalize or lowercase the labels. It's lowercase on prod wikidata, so that won't be an issue there.

I've changed the label on Beta Wikidata so the capitalisation is now fixed. :-)

Change 502389 had a related patch set uploaded (by Jforrester; owner: Eric Gardner):
[mediawiki/extensions/WikibaseMediaInfo@master] Minor CSS improvements to better match designs

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

Change 502389 merged by jenkins-bot:
[mediawiki/extensions/WikibaseMediaInfo@master] Minor CSS improvements to better match designs

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

@PDrouin-WMF do you think we could close/resolve this ticket now?