Change 610940 had a related patch set uploaded (by Eric Gardner; owner: Eric Gardner):
[mediawiki/extensions/WikibaseMediaInfo@master] Add QuickView to search results

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

@egardner After testing this out via ngrok, there are a handful of small changes we could make to improve the quick view. Happy to move any of these to another ticket as I don't want to delay this going out.

• Changing the background color behind the images to be a bit darker, base20 or #54595d
• Can we make the quick view independently scrollable? On smaller viewports or with longer descriptions you can't access the "More Details" button without scrolling to the bottom of the page. Screenshot of this below.

• Is there anyway to scrape out the styling that is showing the gray box and border below the description? Screenshot below.

• Can we truncate the description text to 250 ish characters?
• Can we swap out the blue button "more details" with the gray with blue text on gray primary button and increase the margin top of the button by 6ish px?

• Can we reduce the margin above the file name / title to 12px ish instead of the 30px ish it is now?

There are a few design challenges I haven't solved completely yet, including the awkward audio quickview, different css in descriptions, etc. that I'll be working on.

I think the question of scrolling behavior and description truncation should be left to the next patch for this feature, because there is a lot to think about here (for example, truncation likely also means throwing away markup, which is sometimes extensive in these fields). I'm going to remove all scroll-related CSS from the quickview except for the position:sticky rule for now. Let's play with the initial version of this feature on Commons and then we can try to determine the best way to solve the problem of extensive content within previews.

Will address the other issues here today.

@egardner @mwilliams should we create new subtasks for solving the scroll and truncation/markup issues?

@CBogen I think the problem of "how to deal with long, arbitrary, inconsistent text and markup from file pages in QuickView" would benefit from its own ticket – we would do well to think carefully about what information we really want to display here and how we want to display it given what we're working with.

I think I figured out a way to get scrolling behavior a little closer to what @mwilliams probably has in mind so I'll try to include that here; may not need a ticket for that yet.

Change 610940 merged by jenkins-bot:
[mediawiki/extensions/WikibaseMediaInfo@master] Add QuickView to search results

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

The screenshots below are from commons betalabs for @mwilliams review (as per the comment).

(1) Please confirm that the color is ok.

Changing the background color behind the images to be a bit darker, base20 or #54595d

The color is now

.wbmi-media-search-quick-view__thumbnail
    background-color: #72777d;

to compare

#72777d	#54595d

(2) Seems to be Done:

Can we make the quick view independently scrollable? On smaller viewports or with longer descriptions you can't access the "More Details" button without scrolling to the bottom of the page. [...]

(3) Done.

Is there anyway to scrape out the styling that is showing the gray box and border below the description [...].

(4) Not Done

Can we truncate the description text to 250 ish characters?

Below the screenshot of the file image description that has 526 words

(5) The top margin still needs to be changed?

Can we swap out the blue button "more details" with the gray with blue text on gray primary button and increase the margin top of the button by 6ish px?

.wbmi-media-search-quick-view__cta {
    margin: 0.5rem 0;
    margin-top: 0.5rem;
    margin-right: 0px;
    margin-bottom: 0.5rem;
    margin-left: 0px;
}

(6) padding is 16px. There should be more adjustments?

Can we reduce the margin above the file name / title to 12px ish instead of the 30px ish it is now?

Really great design QA work @Etonkovidova!

It's been tricky to test these for me, so once it's out behind the URL parameter I'll make a new ticket with any remaining adjustments to the ui.

1. Background color This is ok. Eric reached out to me about adjusting that slightly to not be as dark, so #72777d is what we landed on.
2. Independent scrolling Agreed, seems done! Will spend more time with this later to make sure.
3. Scraping out gray styling Seems done! This wasn't showing up for every file, will help test this out more comprehensively later.
4. Truncating Not done but I will hopefully have a more holistic opinion on this once I'm able to test a large amount of cases in production. We might need to do more in addition to truncating.
5. Margins Will check on this afterwards, fine for now.
6. Padding Will check on this afterwards, fine for now.

In general this feels ready to go with the caveat that there will probably be more design changes to come in a separate ticket.