fix(search): properly show mobile layout

Jacky Zhao

2025-04-11 091cc1b05e55114b488590e087cf0da9d3f87ab5

fix(search): properly show mobile layout

 quartz/components/scripts/search.inline.ts

@@ -300,9 +300,11 @@
    itemTile.classList.add("result-card")
    itemTile.id = slug
    itemTile.href = resolveUrl(slug).toString()
    itemTile.innerHTML = `<h3>${title}</h3>${htmlTags}${
      enablePreview && window.innerWidth > 600 ? "" : `<p>${content}</p>`
    }`
    itemTile.innerHTML = `
      <h3 class="card-title">${title}</h3>
      ${htmlTags}
      <p class="card-description">${content}</p>
    `
    itemTile.addEventListener("click", (event) => {
      if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return
      hideSearch()

 quartz/components/styles/search.scss

@@ -133,11 +133,13 @@
        }

        @media all and ($mobile) {
          & > #preview-container {
          flex-direction: column;

          & > .preview-container {
            display: none !important;
          }

          &[data-preview] > #results-container {
          &[data-preview] > .results-container {
            width: 100%;
            height: auto;
            flex: 0 0 100%;
@@ -204,6 +206,12 @@
              margin: 0;
            }

            @media all and not ($mobile) {
              & > p.card-description {
                display: none;
              }
            }

            & > ul.tags {
              margin-top: 0.45rem;
              margin-bottom: 0;