Limit page issues truncation to at least 2 lines
In the case of template {{dictdef}} the issue gets limited to one line making it unreadable on mobile at certain resolutions due to the learn more link taking up space that's available to the issue itself As well as enforcing a max-height, enforce a height so that all issues can have at least 2 lines to play with on all mobile screen resolutions Bug: T197931 Change-Id: Icebdcf37d0f307dc82493c5ced53b632a6b09aea
This commit is contained in:
parent
a10bb49c01
commit
28b9517dcb
|
@ -40,6 +40,9 @@ table.ambox {
|
||||||
// See https://en.wikipedia.org/w/index.php?title=Module:Message_box&action=raw (search for 'mbox-text-span').
|
// See https://en.wikipedia.org/w/index.php?title=Module:Message_box&action=raw (search for 'mbox-text-span').
|
||||||
.mbox-text-span {
|
.mbox-text-span {
|
||||||
max-height: @contentLineHeight * 2em;
|
max-height: @contentLineHeight * 2em;
|
||||||
|
// All will have this height (approx 2 lines) even if a single line e.g. {{dictdef}} when on mobile.
|
||||||
|
// Overriden later in tablet styles.
|
||||||
|
height: @contentLineHeight * 2em;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -122,6 +125,7 @@ table.ambox {
|
||||||
|
|
||||||
@media screen and ( min-width: @width-breakpoint-tablet ) {
|
@media screen and ( min-width: @width-breakpoint-tablet ) {
|
||||||
.mbox-text-span {
|
.mbox-text-span {
|
||||||
|
height: auto;
|
||||||
margin-bottom: @amboxPadding * 3 !important; // important offsets `.ambox div { margin:0!important}` which offsets inline styles.
|
margin-bottom: @amboxPadding * 3 !important; // important offsets `.ambox div { margin:0!important}` which offsets inline styles.
|
||||||
}
|
}
|
||||||
.ambox-learn-more {
|
.ambox-learn-more {
|
||||||
|
|
Loading…
Reference in New Issue