styling updates and get all results (#22809)

Author: gracepark

components/Search.module.scss

@@ -23,7 +23,7 @@
   top: 0;
   right: 0;
   width: 0;
-  border-radius: 3px;
+  border-radius: 0 0 0 3px;
   background: var(--color-canvas-default);
   box-shadow: 0 1px 15px rgba(0, 0, 0, 0.15);
   transition: width 0.3s ease-in-out;

components/Search.tsx

@@ -265,74 +265,72 @@ function ShowSearchResults({
           >
             <div data-testid="search-results" className="mt-n2 mb-n2">
               <ActionList
-                items={results
-                  .slice(0, results.length - 1)
-                  .map(({ url, breadcrumbs, title, content, score, popularity }) => {
-                    return {
-                      key: url,
-                      text: title,
-                      renderItem: () => (
-                        <ActionList.Item as="div">
-                          <Link href={url} className="no-underline color-fg-default">
-                            <li
-                              key={url}
-                              data-testid="search-result"
-                              className={cx('list-style-none')}
-                            >
-                              <div className={cx('py-2 px-3')}>
-                                {/* Breadcrumbs in search records don't include the page title. These fields may contain <mark> elements that we need to render */}
-                                <Label variant="small" sx={{ bg: 'accent.emphasis' }}>
-                                  {breadcrumbs.length === 0
-                                    ? title.replace(/<\/?[^>]+(>|$)|(\/)/g, '')
-                                    : breadcrumbs
-                                        .split(' / ')
-                                        .slice(0, 1)
-                                        .join(' ')
-                                        .replace(/<\/?[^>]+(>|$)|(\/)/g, '')}
-                                </Label>
-                                {debug && (
-                                  <small className="float-right">
-                                    score: {score.toFixed(4)} popularity: {popularity.toFixed(4)}
-                                  </small>
+                items={results.map(({ url, breadcrumbs, title, content, score, popularity }) => {
+                  return {
+                    key: url,
+                    text: title,
+                    renderItem: () => (
+                      <ActionList.Item as="div">
+                        <Link href={url} className="no-underline color-fg-default">
+                          <li
+                            key={url}
+                            data-testid="search-result"
+                            className={cx('list-style-none')}
+                          >
+                            <div className={cx('py-2 px-3')}>
+                              {/* Breadcrumbs in search records don't include the page title. These fields may contain <mark> elements that we need to render */}
+                              <Label variant="small" sx={{ bg: 'accent.emphasis' }}>
+                                {breadcrumbs.length === 0
+                                  ? title.replace(/<\/?[^>]+(>|$)|(\/)/g, '')
+                                  : breadcrumbs
+                                      .split(' / ')
+                                      .slice(0, 1)
+                                      .join(' ')
+                                      .replace(/<\/?[^>]+(>|$)|(\/)/g, '')}
+                              </Label>
+                              {debug && (
+                                <small className="float-right">
+                                  score: {score.toFixed(4)} popularity: {popularity.toFixed(4)}
+                                </small>
+                              )}
+                              <div
+                                className={cx(
+                                  styles.searchResultTitle,
+                                  'mt-2 d-block f4 text-semibold'
                                 )}
-                                <div
-                                  className={cx(
-                                    styles.searchResultTitle,
-                                    'mt-2 d-block f4 text-semibold'
-                                  )}
-                                  dangerouslySetInnerHTML={{
-                                    __html: title,
-                                  }}
-                                />
-                                <div
-                                  className={cx(
-                                    styles.searchResultContent,
-                                    'mt-1 d-block overflow-hidden'
-                                  )}
-                                  style={{ maxHeight: '2.5rem' }}
-                                  dangerouslySetInnerHTML={{ __html: content }}
-                                />
-                                <div
-                                  className={'d-block mt-2 opacity-60 text-small'}
-                                  dangerouslySetInnerHTML={
-                                    breadcrumbs.length === 0
-                                      ? { __html: `${title}`.replace(/<\/?[^>]+(>|$)|(\/)/g, '') }
-                                      : {
-                                          __html: breadcrumbs
-                                            .split(' / ')
-                                            .slice(0, breadcrumbs.length - 1)
-                                            .join(' / ')
-                                            .replace(/<\/?[^>]+(>|$)/g, ''),
-                                        }
-                                  }
-                                />
-                              </div>
-                            </li>
-                          </Link>
-                        </ActionList.Item>
-                      ),
-                    }
-                  })}
+                                dangerouslySetInnerHTML={{
+                                  __html: title,
+                                }}
+                              />
+                              <div
+                                className={cx(
+                                  styles.searchResultContent,
+                                  'mt-1 d-block overflow-hidden'
+                                )}
+                                style={{ maxHeight: '2.5rem' }}
+                                dangerouslySetInnerHTML={{ __html: content }}
+                              />
+                              <div
+                                className={'d-block mt-2 opacity-60 text-small'}
+                                dangerouslySetInnerHTML={
+                                  breadcrumbs.length === 0
+                                    ? { __html: `${title}`.replace(/<\/?[^>]+(>|$)|(\/)/g, '') }
+                                    : {
+                                        __html: breadcrumbs
+                                          .split(' / ')
+                                          .slice(0, breadcrumbs.length - 1)
+                                          .join(' / ')
+                                          .replace(/<\/?[^>]+(>|$)/g, ''),
+                                      }
+                                }
+                              />
+                            </div>
+                          </li>
+                        </Link>
+                      </ActionList.Item>
+                    ),
+                  }
+                })}
               />
             </div>
           </Overlay>