Probably huge huge connection to #1812
Description:
Website https://lichess.org has two buttons. "Donate" and "Swag store". These two buttons get stretched when opened in Ladybird. I created a (somewhat) minimal html code to reproduce the effect.
Information about the host system and the version of the browser:
OS: Debian GNU/Linux 12 (bookworm) x86_64
Kernel: 6.1.0-17-amd64
Compiler: gcc (GCC) 14.2.0
Build command: ./Meta/ladybird.sh run ladybird
Head commit when compiling: 44b1c4f2b59563cf29f6af81bb86645f2fa89155
More details:
The website changes its layout depending on the window's size.
The buttons remain in the correct size when the window size is small/medium. But when the width of the window is bigger, then the layout adjusts and the buttons get stretched.
(if your browser crashes when you try to scroll down the lichess.org page, disable javascript and then open the page again)
I assume this is a Grid issue, as out of hundreds of lines of CSS, grid related code is what's mostly left.
lichess-in-ladybird.mp4
Minimal code to reproduce the bug:
<!DOCTYPE html>
<head>
<!--
FOR DARK THEME contains var(--c-bg-box); used in lobby__support (I replaced it for simplicity)
<link data-css-key="common.theme.all" href="https://lichess1.org/assets/css/common.theme.all.c1f6a1e0.css" rel="stylesheet" />
<link data-css-key="site" href="https://lichess1.org/assets/css/site.cf08da8a.css" rel="stylesheet" />
<link data-css-key="lobby" href="https://lichess1.org/assets/css/lobby.aaf43fba.css" rel="stylesheet" />
-->
<style>
/* <link data-css-key="site" href="site.cf08da8a.css" rel="stylesheet"> */
#main-wrap {
display: grid;
/* grid-template-areas: ". . main . ."; makes this less severe */
grid-template-columns: var(---main-margin) 1fr minmax(auto, var(---main-max-width)) 1fr var(---main-margin);
/* something with grid-template-columns */
}
/* <link data-css-key="lobby" href="lobby.aaf43fba.css" rel="stylesheet"> */
.lobby__support a {
background: hsl(37, 7%, 14%);
}
.lobby {
---cols: 1;
grid-area: main;
display: grid;
}
@media(min-width: 499.3px) {
.lobby__support {
display: grid;
grid-template-columns: 1fr 1fr;
}
}
@media(min-width: 1259.3px) {
.lobby {
---cols: 4;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: fit-content(0) min-content auto repeat(3, fit-content(0));
grid-template-areas: "side app app table" "tv blog blog puzzle" "tv support support puzzle" "feed feed tours tours" ". about about ."
}
.lobby__support {
grid-gap: var(---block-gap)
}
}
.lobby__support {
grid-area: support
}
body {
overflow-y: scroll
}
#main-wrap {
---main-max-width: 1400px
/* delete this and it will be more severe */
}
.lobby__side {
overflow: hidden
}
</style>
</head>
<body class="dark coords-in simple-board mobile">
<div id="main-wrap" class="is2d">
<main class="lobby">
<div class="lobby__side">
<div></div>
<div class="about-side">It turns out that the longer this part is, the bigger the support object's height is
It turns out that the longer this part is, the bigger the support object's height is
It turns out that the longer this part is, the bigger the support object's height is
It turns out that the longer this part is, the bigger the support object's height is
It turns out that the longer this part is, the bigger the support object's height is
deleting this breaks the bug
</div>
</div>
<div></div>
<div></div>
<div>
<div></div>
</div>
<div>
<div>
<div><div>
</div>
</div>
<div><div>
</div>
</div>
<div><div>
</div>
</div>
</div>
</div>
<div class="lobby__support">
<a href="/patron">
Donate
Become a Lichess Patron
</a>
<a href="https://shop.spreadshirt.com/lichess-org">
Swag Store
Play chess in style
</a>
</div>
</main>
</div>
</body>
</html>
Body but with classes. It doesn't change anything, but maybe it will help understand
what the divs are for. There are divs that are closed but not even opened so I don't know.
<body class="dark coords-in simple-board mobile">
<div id="main-wrap" class="is2d">
<main class="lobby">
<div class="lobby__side">
<div class="lobby__spotlights"></div>
<div class="about-side">It turns out that the longer this part is, the bigger the support object's height is
It turns out that the longer this part is, the bigger the support object's height is
It turns out that the longer this part is, the bigger the support object's height is
It turns out that the longer this part is, the bigger the support object's height is
It turns out that the longer this part is, the bigger the support object's height is
deleting this breaks the bug
</div>
</div>
<div class="lobby__tv"></div>
<div class="lobby__blog ublog-post-cards"></div>
<div class="lobby__tournaments-simuls">
<div class="lobby__tournaments lobby__box"></div>
</div>
<div class="lobby__feed">
<div class="daily-feed__updates">
<div class="daily-feed__update"><div>
</div>
</div>
<div class="daily-feed__update"><div>
</div>
</div>
<div class="daily-feed__update"><div>
</div>
</div>
</div>
</div>
<div class="lobby__support">
<a href="/patron">
Donate
Become a Lichess Patron
</a>
<a href="https://shop.spreadshirt.com/lichess-org">
Swag Store
Play chess in style
</a>
</div>
</main>
</div>
</body>
I was simply deleting code as long as the bug persisted.
Screenshots:
Firefox: (different board color is because I am logged in)
Ladybird:
Video demo:
lichess-minimal-html.mp4
I hope this will help someone.
Good luck.
How does funding with Polar work?
Pay now to fund the work behind this issue.
Get updates on progress being made.
Maintainer is rewarded once the issue is completed.
Backer
You're funding impactful open source efforts
Contributor
You want to contribute to this effort
Maintainer
You want to get funding like this too