After the fix for {T387119}, when opening the popup on small screen sizes, a region of the popup reveals the content behind it.
{F58965674, size=full}
{F58965685}
{F58965693}
{F58965695}
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 EditorOVerlayBaase
```
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;
} );
}
```