[Webkit-unassigned] [Bug 246303] sort.chimame.cafe layout is broken

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=246303

--- Comment #3 from Karl Dubost <karlcow at apple.com> ---
There's a set of flex and grid for this layout.

```
.sorter {
    margin: 0px auto;
    display: grid;
    grid-template-columns: 31% 34.5% 31%;
    place-content: space-between;
    width: 80%;
}

.container {
display: flex;
flex-flow: column nowrap;
align-items: center;
margin-top: 1em;
}

.options {
margin: 1em auto;
display: grid;
text-align: left;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
width: 50%;
}

```

It goes like this

```
<div class="container">
… cut for brevity …
  <div class="sorter">
    <div class="starting start button">

      <!-- CENTER COLUMN -->

    </div>

    <div class="left sort image">
      <!-- LEFT COLUMN -->

      <div class="loader-outer">
        <div class="loader">
          <span class="loader-inner"></span>
        </div>
      </div>
      <iframe
        width="240"
        src="https://www.youtube.com/embed/ZjH7UErJshA"
        title="YouTube video player"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen=""
      ></iframe>
      <img />
    </div>

    <div class="right sort image">
      <!-- RIGHT COLUMN -->

      <div class="loader-outer">
        <div class="loader">
          <span class="loader-inner"></span>
        </div>
      </div>
      <iframe
        width="240"
        src="https://www.youtube.com/embed/2XXtRdHcWbA"
        title="YouTube video player"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen=""
      ></iframe>
      <img />
    </div>
    … cut for brevity …
  </div>

  <div class="options">
    … cut for brevity …
  </div>

</div>
```

The height of the columns are 750.9375px I'm not sure why

.sort.image iframe, iframe.sort.image {
background-image: url("https://sort.chimame.cafe/src/assets/not-available.jpg");
}

The background image in case the iframe is not working is shorter than this.

Ultimately this is the iframe making this thing behaves strangely.


I'm not sure why they created 7 rows for this layout. 
but ultimately this is fixing it.


```
.sorter > .image {
    width: 100%;
    height: 100%;
    margin: auto;
/*    grid-row: 1 / 7; */
    grid-row: 1 / 2;
    cursor: pointer;
}
.starting.start.button {
/*    grid-row: span 6; */
    grid-row: span 1;
}
```

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20221012/903ebdea/attachment-0001.htm>