feat: Make search input/search result fixed on the top of sidebar

fix #176

Author: HerringtonDarkholme

media/vscode.css

@@ -31,6 +31,10 @@ body,
   margin-block-start: 0;
   height: 100%;
 }
+#root {
+  display: flex;
+  flex-direction: column;
+}
 
 a {
   color: var(--vscode-textLink-foreground);

src/webview/SearchSidebar/SearchResultList/index.tsx

@@ -8,7 +8,7 @@ interface SearchResultListProps {
 
 const SearchResultList = ({ matches }: SearchResultListProps) => {
   return (
-    <div>
+    <div style={{ flexGrow: '1', overflowY: 'scroll' }}>
       {matches.map(([filePath, match]) => {
         return <TreeItem filePath={filePath} matches={match} key={filePath} />
       })}

src/webview/SearchSidebar/SearchWidgetContainer/comps/SearchOptions.tsx

@@ -17,7 +17,7 @@ const buttonStyle: CSSProperties = {
   flex: '0 0 auto',
   position: 'absolute',
   top: '0',
-  right: '0'
+  right: '-2px'
 }
 const optionsStyle: CSSProperties = {
   minHeight: '16px',
@@ -43,7 +43,7 @@ export default function SearchOptions({
         <VscEllipsis />
       </button>
       {showOptions && (
-        <div style={{ paddingBottom: '4px' }}>
+        <div style={{ paddingBottom: '6px' }}>
           <IncludeFile
             includeFile={includeFile}
             setIncludeFile={setIncludeFile}

src/webview/SearchSidebar/SearchWidgetContainer/comps/SearchWidget.tsx

@@ -5,8 +5,7 @@ import * as stylex from '@stylexjs/stylex'
 
 const styles = stylex.create({
   container: {
-    position: 'relative',
-    margin: '0 12px 0 2px'
+    position: 'relative'
   },
   replaceToggle: {
     width: 16,

src/webview/SearchSidebar/SearchWidgetContainer/index.tsx

@@ -16,7 +16,7 @@ const SearchWidgetContainer = ({ onQueryChange }: Props) => {
   } = useSearchQuery(onQueryChange)
 
   return (
-    <div>
+    <div style={{ margin: '0 12px 0 2px' }}>
       <SearchWidget
         inputValue={inputValue}
         setInputValue={setInputValue}