After the fix for T387119: Block messages don't appear correctly on mobile, when opening the popup on small screen sizes, a region of the popup reveals the content behind it.
A priori, this can be fixed by adding the following rule to BlockMessageDetails.less
@media screen and ( max-height: 460px ) {
.drawer-container .block-message {
// Prevents a problem observed on very small screen sizes (heights less
// than 460px) where the height of the top white part becomes so small
// that its contents overflow, making the popup to show a transparent
// region between the main message area and the div showing the reason
// for the block, thus revealing the contents behind the popup.
max-height: none !important;
}
}See also https://gerrit.wikimedia.org/r/c/mediawiki/extensions/MobileFrontend/+/1129332/comment/4ca764aa_e3e532ba/ & https://gerrit.wikimedia.org/r/c/mediawiki/extensions/MobileFrontend/+/1129332/44..46 for a fix
Browser:
Chromium 131.0.6778.204 (Official Build) built on Ubuntu 24.04.1 LTS (64-bit)
Revision 52183f9e99a61056f9b78535f53d256f1516f2a0-refs/branch-heads/6778_155@{#7}
OS Linux
JavaScript V8 13.1.201.19
User Agent Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36
Steps to replicate the issue (include links if applicable):
- Create a block
- Click edit icon
- Click see more
- Shrink browser to 433 x 385
What happens?:
What should have happened instead?:
Software version (on Special:Version page; skip for WMF-hosted wikis like Wikipedia):
Other information (browser name/version, screenshots, etc.):
Easiest way to show a block is to edit is to edit parseBlockInfo and getLoadingPromise in EditorOVerlayBase
Promise.resolve( `ASjadsjajasaASjadsjajasaASjadsjajasaASjadsjajasaASjadsjajasaASjadsjajasaASjadsjajasaASjadsjajasaASjadsjajasa ASjadsjajasa ASjadsjajasa ASjadsjajasa ASjadsjajasa ASjadsjajasa ASjadsjajasa ASjadsjajasa`)
/**
* Get a promise that is resolved when the editor data has loaded,
* or rejected when we're refusing to load the editor because the user is blocked.
*
* @return {jQuery.Promise}
*/
getLoadingPromise() {
return this.dataPromise.then( ( result ) => {
// check if user is blocked
result = {
blockinfo: {
blockpartial: false,
blocknocreate: true,
blockanononly: true,
blockedby: 'Foo',
blockreason: `ASjadsjajasaASjadsjajasaASjadsjajasaASjadsjajasaASjadsjajasaASjadsjajasaASjadsjajasaASjadsjajasaASjadsjajasa
ASjadsjajasa
ASjadsjajasa
ASjadsjajasa
ASjadsjajasa
ASjadsjajasa
ASjadsjajasa
ASjadsjajasa`,
blockexpiry: 1000,
blockexpiryformatted: new Date(),
blockexpiryrelative: 1000,
blockid: 1000
}
};
if ( result && result.blockinfo ) {
const block = parseBlockInfo( result.blockinfo ),
message = blockMessageDrawer( block );
return util.Deferred().reject( message );
}
return result;
} );
}
