Search-results page: Fix search result layout block spacings (#60368)

* Fix search result page layout

* Add max-size to the preview panel

* Remove unused CSS

* Fix wrapping adds extra spacing when it's empty

* Fix paddings values for meta info block

* hide badge on synthetic count filter

* Fix spacing for getting started info tour

* Remove legacy css class

---------

Co-authored-by: Camden Cheek <camden@ccheek.com>

Author: vovakulikov

client/branded/src/search-ui/results/StreamingSearchResultsFooter.module.scss

@@ -0,0 +1,5 @@
+.root {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}

client/branded/src/search-ui/results/StreamingSearchResultsFooter.tsx

@@ -7,47 +7,46 @@ import { Alert, LoadingSpinner, Code, Text, H2, H3, ErrorAlert } from '@sourcegr
 
 import { StreamingProgressCount } from './progress/StreamingProgressCount'
 
-import styles from './StreamingSearchResultsList.module.scss'
+import styles from './StreamingSearchResultsFooter.module.scss'
 
 export const StreamingSearchResultFooter: React.FunctionComponent<
     React.PropsWithChildren<{
         results?: AggregateStreamingSearchResults
         children?: React.ReactChild | React.ReactChild[]
+        className?: string
     }>
-> = ({ results, children }) => {
+> = ({ results, children, className }) => {
     const skippedDisplay =
         results?.state === 'complete' && results.progress.skipped.find(skipped => skipped.reason.includes('display'))
     const resultLimitHit =
         results?.state === 'complete' && results.progress.skipped.some(skipped => skipped.reason.includes('-limit'))
 
     return (
-        <div className={classNames(styles.contentCentered, 'd-flex flex-column align-items-center')}>
+        <div className={classNames(className, styles.root)}>
             {(!results || results?.state === 'loading') && (
-                <div className="text-center my-4" data-testid="loading-container">
+                <div className="text-center" data-testid="loading-container">
                     <LoadingSpinner />
                 </div>
             )}
 
             {results?.state === 'complete' && results?.results.length > 0 && (
-                <StreamingProgressCount progress={results.progress} state={results.state} className="mt-4 mb-2" />
+                <StreamingProgressCount progress={results.progress} state={results.state} />
             )}
 
             {results?.state === 'error' && (
                 <ErrorAlert className="m-3" data-testid="search-results-list-error" error={results.error} />
             )}
 
             {results?.state === 'complete' && !results.alert && results?.results.length === 0 && (
-                <div className="pr-3 mt-3 align-self-stretch">
-                    <Alert variant="info">
-                        <H3 as={H2} className="m-0 py-1">
-                            No results matched your search.
-                        </H3>
-                    </Alert>
-                </div>
+                <Alert variant="info">
+                    <H3 as={H2} className="m-0 py-1">
+                        No results matched your search.
+                    </H3>
+                </Alert>
             )}
 
             {(skippedDisplay || resultLimitHit) && (
-                <Alert className="d-flex flex-column m-3" variant="info">
+                <Alert className="d-flex flex-column" variant="info">
                     {skippedDisplay && (
                         <Text className="m-0">
                             <strong>Display limit hit.</strong> {skippedDisplay.message}
@@ -61,6 +60,8 @@ export const StreamingSearchResultFooter: React.FunctionComponent<
                     )}
                 </Alert>
             )}
+
+            {children}
         </div>
     )
 }

client/branded/src/search-ui/results/StreamingSearchResultsList.tsx

@@ -282,7 +282,7 @@ export const StreamingSearchResultsList: React.FunctionComponent<
             </div>
 
             {itemsToShow >= resultsNumber && (
-                <StreamingSearchResultFooter results={results}>
+                <StreamingSearchResultFooter results={results} className="m-3">
                     <>
                         {results?.state === 'complete' && resultsNumber === 0 && (
                             <NoResultsPage

client/branded/src/search-ui/results/filters/components/dynamic-filter/SearchDynamicFilter.tsx

@@ -213,7 +213,8 @@ const DynamicFilterItem: FC<DynamicFilterItemProps> = props => {
                 onClick={() => onClick(filter, selected)}
             >
                 <span className={styles.itemText}>{renderItem ? renderItem(filter, selected) : filter.label}</span>
-                <DynamicFilterBadge exhaustive={filter.exhaustive} count={filter.count} />
+                {/* NOTE: filter.count should _only_ be zero for the synthetic count filter. */}
+                {filter.count > 0 && <DynamicFilterBadge exhaustive={filter.exhaustive} count={filter.count} />}
                 {selected && <Icon svgPath={mdiClose} aria-hidden={true} className="ml-1 flex-shrink-0" />}
             </Button>
         </li>

client/web/src/search/results/components/new-search-content/NewSearchContent.module.scss

@@ -126,7 +126,6 @@
 .content {
     grid-area: contents;
     overflow: auto;
-    padding: 1rem;
 
     &::-webkit-scrollbar {
         width: 0.5rem;
@@ -161,17 +160,10 @@
         }
     }
 
-    &--list {
-        // Compensate content parent block paddings in order
-        // to have paddings anywhere but content list with search matches
-        margin: -1rem;
-
-        // This is needed because search list may have search result matches
-        // block which have sticky header elements, sticky top position doesn't
-        // take into account negative margins so we
-        [data-result-header] {
-            top: -1rem;
-        }
+    &-meta-info {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
     }
 }
 

client/web/src/search/results/components/new-search-content/NewSearchContent.tsx

@@ -6,8 +6,8 @@ import {
     useCallback,
     useEffect,
     useLayoutEffect,
-    useRef,
     useMemo,
+    useRef,
 } from 'react'
 
 import { mdiClose } from '@mdi/js'
@@ -38,7 +38,7 @@ import {
 import { SettingsCascadeProps } from '@sourcegraph/shared/src/settings/settings'
 import { NOOP_TELEMETRY_SERVICE, TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
 import { lazyComponent } from '@sourcegraph/shared/src/util/lazyComponent'
-import { Button, Icon, H2, H4, useScrollManager, Panel, useLocalStorage, Link } from '@sourcegraph/wildcard'
+import { Button, H2, H4, Icon, Link, Panel, useLocalStorage, useScrollManager } from '@sourcegraph/wildcard'
 
 import { AuthenticatedUser } from '../../../../auth'
 import { useKeywordSearch } from '../../../../featureFlags/useFeatureFlag'
@@ -259,30 +259,33 @@ export const NewSearchContent: FC<NewSearchContentProps> = props => {
                         aria-label="Aggregation results panel"
                         onQuerySubmit={onQuerySubmit}
                         telemetryService={telemetryService}
+                        className="m-3"
                     />
                 )}
 
                 {aggregationUIMode !== AggregationUIMode.SearchPage && (
-                    <>
+                    <div className={styles.contentMetaInfo}>
                         <DidYouMean
                             telemetryService={props.telemetryService}
                             query={submittedURLQuery}
                             patternType={patternType}
                             caseSensitive={caseSensitive}
                             selectedSearchContextSpec={props.selectedSearchContextSpec}
+                            className="m-2"
                         />
 
                         {results?.alert?.kind && isSmartSearchAlert(results.alert.kind) && (
-                            <SmartSearch alert={results?.alert} onDisableSmartSearch={onDisableSmartSearch} />
+                            <SmartSearch
+                                alert={results?.alert}
+                                onDisableSmartSearch={onDisableSmartSearch}
+                                className="m-2"
+                            />
                         )}
 
-                        <GettingStartedTour.Info
-                            className="mt-2 mb-3"
-                            isSourcegraphDotCom={props.isSourcegraphDotCom}
-                        />
+                        <GettingStartedTour.Info className="m-2" isSourcegraphDotCom={props.isSourcegraphDotCom} />
 
                         {results?.alert && (!results?.alert.kind || !isSmartSearchAlert(results.alert.kind)) && (
-                            <div className={classNames(styles.alertArea, 'mt-4')}>
+                            <div className={classNames(styles.alertArea, 'm-2')}>
                                 {results?.alert?.kind === 'unowned-results' ? (
                                     <UnownedResultsAlert
                                         alertTitle={results.alert.title}
@@ -301,30 +304,31 @@ export const NewSearchContent: FC<NewSearchContentProps> = props => {
                                 )}
                             </div>
                         )}
+                    </div>
+                )}
 
-                        <StreamingSearchResultsList
-                            telemetryService={telemetryService}
-                            platformContext={platformContext}
-                            settingsCascade={settingsCascade}
-                            searchContextsEnabled={searchContextsEnabled}
-                            fetchHighlightedFileLineRanges={fetchHighlightedFileLineRanges}
-                            isSourcegraphDotCom={isSourcegraphDotCom}
-                            enableRepositoryMetadata={enableRepositoryMetadata}
-                            results={results}
-                            allExpanded={allExpanded}
-                            executedQuery={location.search}
-                            prefetchFileEnabled={true}
-                            prefetchFile={prefetchFile}
-                            enableKeyboardNavigation={true}
-                            showQueryExamplesOnNoResultsPage={true}
-                            queryState={queryState}
-                            buildSearchURLQueryFromQueryState={buildSearchURLQueryFromQueryState}
-                            selectedSearchContextSpec={selectedSearchContextSpec}
-                            logSearchResultClicked={onLogSearchResultClick}
-                            queryExamplesPatternType={patternType}
-                            className={styles.contentList}
-                        />
-                    </>
+                {aggregationUIMode !== AggregationUIMode.SearchPage && (
+                    <StreamingSearchResultsList
+                        telemetryService={telemetryService}
+                        platformContext={platformContext}
+                        settingsCascade={settingsCascade}
+                        searchContextsEnabled={searchContextsEnabled}
+                        fetchHighlightedFileLineRanges={fetchHighlightedFileLineRanges}
+                        isSourcegraphDotCom={isSourcegraphDotCom}
+                        enableRepositoryMetadata={enableRepositoryMetadata}
+                        results={results}
+                        allExpanded={allExpanded}
+                        executedQuery={location.search}
+                        prefetchFileEnabled={true}
+                        prefetchFile={prefetchFile}
+                        enableKeyboardNavigation={true}
+                        showQueryExamplesOnNoResultsPage={true}
+                        queryState={queryState}
+                        buildSearchURLQueryFromQueryState={buildSearchURLQueryFromQueryState}
+                        selectedSearchContextSpec={selectedSearchContextSpec}
+                        logSearchResultClicked={onLogSearchResultClick}
+                        queryExamplesPatternType={patternType}
+                    />
                 )}
             </div>
 
@@ -403,6 +407,7 @@ const FilePreviewPanel: FC<FilePreviewPanelProps> = props => {
         <Panel
             defaultSize={300}
             minSize={256}
+            maxSize={600}
             position="right"
             storageKey="file preview"
             ariaLabel="File sidebar"

client/web/src/search/suggestion/DidYouMean.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useMemo } from 'react'
 
 import { mdiArrowRight } from '@mdi/js'
+import classNames from 'classnames'
 
 import { SyntaxHighlightedSearchQuery } from '@sourcegraph/branded'
 import { ALL_LANGUAGES } from '@sourcegraph/common'
@@ -126,13 +127,15 @@ interface DidYouMeanProps
         Pick<SearchContextProps, 'selectedSearchContextSpec'>,
         TelemetryProps {
     query: string
+    className?: string
 }
 
 export const DidYouMean: React.FunctionComponent<React.PropsWithChildren<DidYouMeanProps>> = ({
     telemetryService,
     query,
     patternType,
     caseSensitive,
+    className,
     selectedSearchContextSpec,
 }) => {
     const suggestions = useMemo(() => getQuerySuggestions(query, patternType), [query, patternType])
@@ -145,7 +148,7 @@ export const DidYouMean: React.FunctionComponent<React.PropsWithChildren<DidYouM
 
     if (suggestions.length > 0) {
         return (
-            <div className={styles.root}>
+            <div className={classNames(className, styles.root)}>
                 <ul className={styles.container}>
                     {suggestions.map(suggestion => {
                         const builtURLQuery = buildSearchURLQuery(

client/web/src/search/suggestion/SmartSearch.tsx

@@ -1,6 +1,7 @@
 import { type MouseEvent, useCallback } from 'react'
 
 import { mdiChevronDown, mdiChevronUp, mdiArrowRight } from '@mdi/js'
+import classNames from 'classnames'
 
 import { smartSearchIconSvgPath, SyntaxHighlightedSearchQuery } from '@sourcegraph/branded'
 import { pluralize, formatSearchParameters } from '@sourcegraph/common'
@@ -29,6 +30,7 @@ import styles from './QuerySuggestion.module.scss'
 interface SmartSearchProps {
     alert: Required<AggregateStreamingSearchResults>['alert'] | undefined
     onDisableSmartSearch: () => void
+    className?: string
 }
 
 const alertContent: {
@@ -65,6 +67,7 @@ const alertContent: {
 export const SmartSearch: React.FunctionComponent<React.PropsWithChildren<SmartSearchProps>> = ({
     alert,
     onDisableSmartSearch,
+    className,
 }) => {
     const [isCollapsed, setIsCollapsed] = useTemporarySetting('search.results.collapseSmartSearch')
 
@@ -86,7 +89,7 @@ export const SmartSearch: React.FunctionComponent<React.PropsWithChildren<SmartS
     const content = alertContent[alert.kind](alert.proposedQueries?.length || 0)
 
     return (
-        <div className={styles.root}>
+        <div className={classNames(className, styles.root)}>
             <Collapse isOpen={!isCollapsed} onOpenChange={opened => setIsCollapsed(!opened)}>
                 <CollapseHeader className={styles.collapseButton}>
                     <div className={styles.header}>