@Jdrewniak I was trying to reuse the overlay in desktop too. It seems I am missing something here. Some styles are missing for vector.

If we cannot have a clean overlay on top of vector skin, the option is to write a oojs-ui dialog in desktop, but that would need to duplicate lot of code and style we wrote for MF creatpageoverlay.

To be honest I'm surprised the overlay works in Vector at all. It's my understanding that the Overlay component was designed to work with Minerva and MobileFrontEnd, and as far as I know, it's never been used outside of this context.

You might be able to get it work by including extra styles, as @santhosh mentions, but just be aware that some of those style might be in MobileFrontend, and some might be in Minerva.

I'm pinging @Jdlrobson in case he has experience dealing with this kind of use-case.

Overlay has always been written in such a way that it can be used in Vector, but it's never had a use case, so that's never been prioritised. You'll need to skin it for Vector.

I will happily review a submission that adds mobile.startup/vector.less file to https://github.com/wikimedia/mediawiki-extensions-MobileFrontend/tree/master/skinStyles but @Pginer-WMF you'll need to define a spec for how this should look!

I think the challenge here is that nobody has ever written an experience that spans mobile and desktop.. I know, right!??! OOjs UI comes with a performance penalty on mobile and isn't compatible with our overlay management system there. I'm guessing the skinStyle can copy oojs ui's styles for OO.ui.Dialog - this would also be super helpful for putting us on course for consolidating the two on mobile and desktop.

I have a quick and dirty less file here

But, if we have a definition what we need to do, I can either patch MF or add custom style to ExternalGuidance.

If @Pginer-WMF agrees with the styling changes please patch MF (using a Vector skinStyle). I think this would be awesome to have (note you could also replicate OOUI Dialog styles with substituted class names).

This view represents a confirmation step before starting to contribute. I don't have a strong preference about the kind of dialog to use, but I think it make sense to reuse existing solutions instead of inventing a different one. So the to options I was considering are:

A) Mobile dialog, as seen for the example page on a mobile device or when inspected in mobile mode	B) Desktop dialog, as in the "process dialog" example from the ooui demos

Since the "Automatic translation" view is based on the mobile layout, I was expecting to support A), but I'm not sure whether the above comments are about how to technically support it, or about supporting some other option.

In T217887#5032079, @santhosh wrote:

I have a quick and dirty less file here

P8213 Add vector styling for overlay

1
2	.overlay {
3	position: absolute;
4	top: 10em;
5	left: 10em;
6	transition: all 0.25s ease-out 0s;
7	width: 75%;
8	max-height: calc( 100% - 2em );
9	border: 1px solid #a2a9b1;
10	border-radius: 2px;
11	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.25);
12
13	.overlay-content {
14	padding: 1em;
15	outline: 1px solid #c8ccd1;
16	}
17
18	.mw-ui-icon-mf-overlay-close {
19	border: 0;
20	background: none;
21	}
22	}
23
24	.overlay-header {
25	.overlay-title {
26	padding: 0 1em;
27	cursor: default;
28	text-align: center;
29
30	h2 {
31	border: 0;
32	}
33	}
34
35	ul {
36	float: right;
37	}
38	}
39
40	.overlay-enabled .overlay,
41	.overlay-enabled #mw-mf-page-center {
42	height: auto;
43	}

that will make this overly look like an OOUI dialog.

Can you share a screenshot? I tried to apply these in a CSS browser extension and got weird results.

Change 497753 had a related patch set uploaded (by Santhosh; owner: Santhosh):
[mediawiki/extensions/MobileFrontend@master] Add vector skin style for overlay

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

I submitted a patch to MF - https://gerrit.wikimedia.org/r/#/c/mediawiki/extensions/MobileFrontend/+/497753

The overlay in vector skin looks like below. Let us iterate from here to improve, @Jdlrobson, I am less familiar with the MF, so please review and help with suggestions.

Change 497753 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Add vector skin style for overlay

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