fix(search): increase size on fullPageWidth viewport (#784)

Aaron Pham

2024-02-02 295b8fc9149e6702629717e3b71b2eff7d726a19

fix(search): increase size on fullPageWidth viewport (#784)

* fix(search): increase size on fullPageWidth viewport

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* chore: fix width size to be consistent on multiple views

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* chore: set layout to 0 if there is no term

remove flashing by setting max-height

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

---------

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

 quartz/components/scripts/search.inline.ts

@@ -451,6 +451,10 @@
      searchLayout.style.opacity = "1"
    }

    if (term === "" && searchLayout) {
      searchLayout.style.opacity = "0"
    }

    if (term.toLowerCase().startsWith("#")) {
      searchType = "tags"
    } else {

 quartz/components/styles/search.scss

@@ -54,15 +54,11 @@
    }

    & > #search-space {
      width: 50%;
      width: 75%;
      margin-top: 12vh;
      margin-left: auto;
      margin-right: auto;

      @media all and (max-width: $fullPageWidth) {
        width: 90%;
      }

      & > * {
        width: 100%;
        border-radius: 5px;
@@ -94,7 +90,8 @@
        border: 1px solid var(--lightgray);

        & > div {
          height: calc(75vh - 20em);
          // vh - #search-space.margin-top
          height: calc(75vh - 12vh);
          background: none;

          &:first-child {
@@ -146,6 +143,10 @@
              0 14px 50px rgba(27, 33, 48, 0.12),
              0 10px 30px rgba(27, 33, 48, 0.16);
          }

          a.internal {
            background-color: none;
          }
        }

        & > #results-container {