fix: enhance borders

src/components/FileExplorer/index.tsx

@@ -114,19 +114,21 @@ export function FileExplorer({ freeze, metaData }: Props) {
                       )}
                     </>
                   )}
-                  <SizeObserver<HTMLDivElement>>
-                    {({ width = 0, height = 0 }, ref) => (
-                      <div className={'files'} ref={ref}>
-                        <ListView
-                          height={height}
-                          width={width}
-                          nodeRendererContext={nodeRendererContext}
-                          expandTo={expandTo}
-                          metaData={metaData}
-                        />
-                      </div>
-                    )}
-                  </SizeObserver>
+                  {visibleNodes.nodes.length > 0 && (
+                    <SizeObserver<HTMLDivElement>>
+                      {({ width = 0, height = 0 }, ref) => (
+                        <div className={'files'} ref={ref}>
+                          <ListView
+                            height={height}
+                            width={width}
+                            nodeRendererContext={nodeRendererContext}
+                            expandTo={expandTo}
+                            metaData={metaData}
+                          />
+                        </div>
+                      )}
+                    </SizeObserver>
+                  )}
                 </>
               )
             )

src/components/SearchBar.tsx

@@ -2,7 +2,6 @@ import { SearchIcon } from '@primer/octicons-react'
 import { TextInput, TextInputProps } from '@primer/react'
 import { useConfigs } from 'containers/ConfigsContext'
 import * as React from 'react'
-import { cx } from 'utils/cx'
 import { isValidRegexpSource } from 'utils/general'
 import { SearchMode } from './searchModes'
 
@@ -20,39 +19,42 @@ export function SearchBar({ onSearch, onFocus, value }: Props) {
       ? 'Match file name with regular expression.'
       : `Match file path sequence with plain input.`
 
+  const validationStatus = React.useMemo(
+    () => (searchMode === 'regex' && !isValidRegexpSource(value) ? 'error' : undefined),
+    [value, searchMode],
+  )
+
   return (
-    <div className={'search-input-wrapper'}>
-      <TextInput
-        leadingVisual={SearchIcon}
-        onFocus={e => {
-          onFocus(e)
-          e.target.select()
-        }}
-        tabIndex={0}
-        className={cx('search-input', {
-          error: searchMode === 'regex' && !isValidRegexpSource(value),
-        })}
-        aria-label="search files"
-        placeholder={`Search files`}
-        onChange={({ target: { value } }) => onSearch(value, searchMode)}
-        value={value}
-        trailingAction={
-          <TextInput.Action
-            onClick={() => {
-              const newMode = searchMode === 'regex' ? 'fuzzy' : 'regex'
-              configs.onChange({
-                searchMode: newMode,
-              })
-              // Skip search if no input to prevent resetting folder expansions
-              if (value) onSearch(value, newMode)
-            }}
-            aria-label={toggleButtonDescription}
-            sx={{ color: 'fg.subtle' }}
-          >
-            {searchMode === 'regex' ? '.*$' : 'a/b'}
-          </TextInput.Action>
-        }
-      />
-    </div>
+    <TextInput
+      leadingVisual={SearchIcon}
+      onFocus={e => {
+        onFocus(e)
+        e.target.select()
+      }}
+      block
+      sx={{ borderRadius: 0 }}
+      className={'search-input'}
+      aria-label="search files"
+      placeholder={`Search files`}
+      onChange={({ target: { value } }) => onSearch(value, searchMode)}
+      value={value}
+      validationStatus={validationStatus}
+      trailingAction={
+        <TextInput.Action
+          aria-label={toggleButtonDescription}
+          sx={{ color: 'fg.subtle' }}
+          onClick={() => {
+            const newMode = searchMode === 'regex' ? 'fuzzy' : 'regex'
+            configs.onChange({
+              searchMode: newMode,
+            })
+            // Skip search if no input to prevent resetting folder expansions
+            if (value) onSearch(value, newMode)
+          }}
+        >
+          {searchMode === 'regex' ? '.*$' : 'a/b'}
+        </TextInput.Action>
+      }
+    />
   )
 }

src/styles/index.scss

@@ -584,30 +584,18 @@ $minimal-z-index: max(
           }
         }
 
-        /* search input */
-        .search-input-wrapper {
-          position: relative;
+        .search-input {
+          padding-left: 0;
 
-          .search-input {
-            width: 100%;
-            box-shadow: none; // stay low
-            border: none;
-            border-radius: 0;
-            border-top: 1px solid var(--gitako-border-default);
-            color: var(--gitako-fg-default);
-            background: var(--gitako-bg-default);
-            padding-left: 10px;
+          .TextInput-icon {
+            margin-left: 8px;
+          }
 
-            .TextInput-action {
-              font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+          .TextInput-action {
+            font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace;
 
-              button {
-                font-weight: normal;
-              }
-            }
-
-            &.error {
-              border-color: var(--gitako-danger-emphasis);
+            button {
+              font-weight: normal;
             }
           }
         }
@@ -625,7 +613,6 @@ $minimal-z-index: max(
           position: relative;
           flex: 1;
           overflow: hidden;
-          border-top: 1px solid var(--gitako-border-default);
 
           // Put this inside files will help files to get proper size derived from parents, regardless of its content size
           .magic-size-container {
@@ -876,7 +863,7 @@ $minimal-z-index: max(
           top: 0;
           left: 0;
           background: var(--gitako-bg-subtle);
-          z-index: 1;
+          z-index: 2;
         }
         .settings-section {
           &:not(:last-of-type) {