Compact mode for a task list

[joshefin]

Describe the bug

Compact mode does not work for a memo with a long task list.

It seems that line-clamp-6 does not help when li has display: flex;

Steps to reproduce

1. Enable auto compact mode.
2. Create a memo with a task list of more than 6 items.
3. The whole task list is shown on a homepage, instead of first 6 items.

The version of Memos you're using.

v0.22.4

Screenshots or additional context

No response

[joshefin]

This actually happens with any unordered list. It does not have to be a task list (with checkboxes). Why is each task list entry rendered as <ul><li>...</li></ul> instead of <li>...</li> in a parent <ul>?

[joshefin]

I did a little bit more research and here is an example and a question:

This content:

- First item
- Second item
- Third item

Is rendered like this:

<div class="w-full max-w-full word-break text-base leading-snug space-y-2 whitespace-pre-wrap">
  <ul>
    <li class="w-full flex flex-row">
      <div class="w-auto grid grid-cols-[24px_1fr] gap-1">
        <div class="w-7 h-6 flex justify-center items-center">
          <span class="opacity-80">•</span>
        </div>
        <div>
          <span>First item</span>
        </div>
      </div>
    </li>
  </ul>
  <ul>
    <li class="w-full flex flex-row">
      <div class="w-auto grid grid-cols-[24px_1fr] gap-1">
        <div class="w-7 h-6 flex justify-center items-center">
          <span class="opacity-80">•</span>
        </div>
        <div>
          <span>Second item</span>
        </div>
      </div>
    </li>
  </ul>
  <ul>
    <li class="w-full flex flex-row">
      <div class="w-auto grid grid-cols-[24px_1fr] gap-1">
        <div class="w-7 h-6 flex justify-center items-center">
          <span class="opacity-80">•</span>
        </div>
        <div>
          <span>Third item</span>
        </div>
      </div>
    </li>
  </ul>
</div>

This looks unnecessarily complex. Why not just...

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

... with a few lines of CSS to achieve the same look and feel? It would be better for performance and customization.

[johnnyjoygh]

Maybe already fixed with https://github.com/usememos/memos/commit/ca213437e92c9976b41ffcea217efb5914a82720. If the issue still exists, please feel free to reopen it.

[joshefin]

@johnnyjoygh This is not fixed, in the v0.23.0-rc.0 version. I think -webkit-line-clamp does not work with complex ul/li/div flex structure.

[joshefin]

@johnnyjoygh Can you reopen this, because I don't have that option?

[RoccoSmit]

@joshefin, can you share some screenshots of the issues you are having and more info on your setup. Compacting lists looks to be working as expected.

ul

todo list

[joshefin]

@RoccoSmit I thought I was using the latest version, but I was actually using the stable one, because I didn't change the docker compose file. Everything works as it should with the 0.23.0-rc.2 version. Sorry and thanks.