Fix footer alignment in search page

src/theme/Footer/index.tsx

@@ -1,22 +1,20 @@
-/**
- * SWIZZLED VERSION: 2.0.0-rc.1
- * REASONS:
- *  - The socials bar needed full width, so needed to be placed outside the default container.
- */
-
 import React from 'react';
 import Footer from '@theme-original/Footer';
-import type FooterType from '@theme/Footer';
-import type { WrapperProps } from '@docusaurus/types';
 import Social from '@site/src/components/Social';
 
-type Props = WrapperProps<typeof FooterType>;
+type FooterProps = {
+  footerStyleProps?: React.CSSProperties;
+};
 
-export default function FooterWrapper(props: Props): JSX.Element {
+const FooterWrapper = ({ footerStyleProps }: FooterProps) => {
   return (
-    <>
-      <Footer {...props} />
-      <Social />
-    </>
+    <div>
+      <div style={footerStyleProps}>
+        <Footer />
+        <Social />
+      </div>
+    </div>
   );
-}
+};
+
+export default FooterWrapper;

src/theme/Layout/Provider/index.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { composeProviders } from '@docusaurus/theme-common';
+import {
+  ColorModeProvider,
+  AnnouncementBarProvider,
+  DocsPreferredVersionContextProvider,
+  ScrollControllerProvider,
+  NavbarProvider,
+  PluginHtmlClassNameProvider,
+} from '@docusaurus/theme-common/internal';
+const Provider = composeProviders([
+  ColorModeProvider,
+  AnnouncementBarProvider,
+  ScrollControllerProvider,
+  DocsPreferredVersionContextProvider,
+  PluginHtmlClassNameProvider,
+  NavbarProvider,
+]);
+export default function LayoutProvider({ children }) {
+  return <Provider>{children}</Provider>;
+}

src/theme/Layout/index.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import clsx from 'clsx';
+import ErrorBoundary from '@docusaurus/ErrorBoundary';
+import {
+  PageMetadata,
+  SkipToContentFallbackId,
+  ThemeClassNames,
+} from '@docusaurus/theme-common';
+import { useKeyboardNavigation } from '@docusaurus/theme-common/internal';
+import SkipToContent from '@theme/SkipToContent';
+import AnnouncementBar from '@theme/AnnouncementBar';
+import Navbar from '@theme/Navbar';
+import Footer from '@theme/Footer';
+import LayoutProvider from '@theme/Layout/Provider';
+import ErrorPageContent from '@theme/ErrorPageContent';
+import styles from './styles.module.css';
+export default function Layout(props) {
+  const {
+    children,
+    noFooter,
+    wrapperClassName,
+    footerStyleProps,
+    title,
+    description,
+  } = props;
+  useKeyboardNavigation();
+  return (
+    <LayoutProvider>
+      <PageMetadata title={title} description={description} />
+
+      <SkipToContent />
+
+      <AnnouncementBar />
+
+      <Navbar />
+
+      <div
+        id={SkipToContentFallbackId}
+        className={clsx(
+          ThemeClassNames.wrapper.main,
+          styles.mainWrapper,
+          wrapperClassName,
+        )}
+      >
+        <ErrorBoundary fallback={(params) => <ErrorPageContent {...params} />}>
+          {children}
+        </ErrorBoundary>
+      </div>
+
+      {!noFooter && <Footer footerStyleProps={footerStyleProps} />}
+    </LayoutProvider>
+  );
+}

src/theme/Layout/styles.module.css

@@ -0,0 +1,21 @@
+html,
+body {
+  height: 100%;
+}
+
+.mainWrapper {
+  flex: 1 0 auto;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Docusaurus-specific utility class */
+:global(.docusaurus-mt-lg) {
+  margin-top: 3rem;
+}
+
+:global(#__docusaurus) {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+}

src/theme/SearchBar/FilterDropdown.js

@@ -22,6 +22,10 @@ export const FilterDropdown = forwardRef(
         ? [...selectedFacets[1], value]
         : selectedFacets[1].filter((facet) => facet !== value);
 
+      if (!checked && updatedFacetList.length === 0) {
+        return;
+      }
+
       if (checked) {
         // If a parent filter is checked, add its child filters
         if (value === 'docusaurus_tag:docs-build-current') {

src/theme/SearchPage/index.js

@@ -125,6 +125,12 @@ function SearchPageContent() {
   const documentsFoundPlural = useDocumentsFoundPlural();
   const docsSearchVersionsHelpers = useDocsSearchVersionsHelpers();
   const [searchQuery, setSearchQuery] = useSearchQueryString();
+  const [footerStyle, setFooterStyle] = useState({
+    position: 'relative',
+    width: '100%',
+    bottom: '0%',
+  });
+
   const { selectedFacets, setSelectedFacets } = useContext(SearchContext);
   const initialSearchResultState = {
     items: [],
@@ -299,8 +305,20 @@ function SearchPageContent() {
     }
     makeSearch(searchResultState.lastPage);
   }, [makeSearch, searchResultState.lastPage]);
+
+  useEffect(() => {
+    const handleResultState = () => {
+      if (searchResultState.loading || !searchResultState.totalResults) {
+        setFooterStyle({ position: 'absolute', width: '100%', bottom: '0%' });
+      } else {
+        setFooterStyle({ position: 'relative', width: '100%', bottom: '0%' });
+      }
+    };
+    handleResultState();
+    return () => handleResultState();
+  }, [JSON.stringify(searchResultState)]);
   return (
-    <Layout>
+    <Layout footerStyleProps={footerStyle}>
       <Head>
         <title>{useTitleFormatter(getTitle())}</title>
         {/*
@@ -309,20 +327,15 @@ function SearchPageContent() {
         */}
         <meta property='robots' content='noindex, follow' />
       </Head>
-      <FilterDropdown
-        styleProps={
-          window.innerWidth < 1279
-            ? { right: '10%', top: '22.5%' }
-            : window.innerWidth < 1500
-            ? { right: '15.5%', top: '22.5%' }
-            : { right: '20%', top: '15.5%' }
-        }
-        selectedFacets={selectedFacets}
-        setSelectedFacets={setSelectedFacets}
-      />
       <div className='container margin-vert--lg'>
-        <h1>{getTitle()}</h1>
-
+        <div className={styles.heading}>
+          <h1>{getTitle()}</h1>
+          <FilterDropdown
+            styleProps={{ position: 'relative' }}
+            selectedFacets={selectedFacets}
+            setSelectedFacets={setSelectedFacets}
+          />
+        </div>
         <form className='row' onSubmit={(e) => e.preventDefault()}>
           <div
             className={clsx('col', styles.searchQueryColumn, {
@@ -357,7 +370,6 @@ function SearchPageContent() {
             />
           )}
         </form>
-
         <div className='row'>
           <div className={clsx('col', 'col--8', styles.searchResultsColumn)}>
             {!!searchResultState.totalResults &&
@@ -401,7 +413,6 @@ function SearchPageContent() {
             </a>
           </div>
         </div>
-
         {searchResultState.items.length > 0 ? (
           <main>
             {searchResultState.items.map(
@@ -450,7 +461,11 @@ function SearchPageContent() {
         ) : (
           [
             searchQuery && !searchResultState.loading && (
-              <p key='no-results'>
+              <p
+                key='no-results'
+                className={clsx(styles.searchResults)}
+                style={{ marginBottom: '45%' }}
+              >
                 <Translate
                   id='theme.SearchPage.noResultsText'
                   description='The paragraph for empty search result'
@@ -464,7 +479,6 @@ function SearchPageContent() {
             ),
           ]
         )}
-
         {searchResultState.hasMore && (
           <div className={styles.loader} ref={setLoaderRef}>
             <Translate

src/theme/SearchPage/styles.module.css

@@ -110,3 +110,9 @@
   background: rgb(255 215 142 / 25%);
   padding: 0.09em 0;
 }
+.heading {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 125%;
+}