Problems with `layout: two_cols-header`

[KerstinKeller]

Describe the bug I am having some trouble using the layout: two-cols-header. When using this layout, the start of the columns seem to be aligned in the the middle of the slide, rather then starting below the common text. Take this example:

---
layout: two-cols-header
---
This spans both
::left::
# Left
This shows on the left
- albc
- aegaw
- badf
- baer
- abewb
- abe
- abweawb
::right::
# Right
This shows on the right
::bottom::
This shows at the bottom, aligned to the end (bottom) of the grid

Renders as

When you want to put some code, it's even worse:

What can be done to move up the columns? I guess packages/client/layouts/two-cols-header.vue has to be modified somehow?

Desktop (please complete the following information):

• OS: Windows
• Browser: Edge
• Slidev version: latest (0.48.8)

[KerstinKeller]

Chatgpt suggests the following changes to two-cols-header.vue which actually gives a pleasing result:

Here's a suggestion to adjust your grid to include three explicit rows:

.two-cols-header {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto 1fr auto; /* Adjust to fit content */
}

/* Adjust other styles as necessary to fit the new grid definition */
.col-bottom {
  align-self: end;
  grid-area: 3 / 1 / 4 / 3; /* Adjust this to correctly place the bottom area */
}

This adjustment defines the grid with three rows: one for the header (auto to size based on content), a flexible middle row (1fr), and another auto row for the bottom content. Adjusting .col-bottom to start from the third row ensures it's placed at the bottom of the grid, potentially solving the layout issue you're experiencing.

It does give a more pleasing outcome:

Should I create a PR for this? Or do you have other suggestions?

[KermanX]

It might be better if the layout uses flex instead of the static grid. But changing this will break many existing slides.

[draptik]

@KerstinKeller thanks for sharing the workaround: I stumbled into the same issue today! Is there an easy css fix to add some padding/margin between the 2 bottom code blocks? My css skills are pretty rusty...

[KerstinKeller]

I added the following line:

.two-cols-custom {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto 1fr auto;
  column-gap: 20px; /* Adjust the gap size as needed */
}

However, I have no clue about web development whatsoever, so I don't know if it's a good or bad way to handle this, however it does work.

[draptik]

@KerstinKeller Thank you so much - also for the quick response: saved my day! Worked like a charm, talk went well. 🙏