Visual tweaks to FE nav

components/apps/FileExplorer/Navigation.tsx

@@ -1,5 +1,5 @@
 import { basename, dirname } from "path";
-import { forwardRef, useMemo, useRef } from "react";
+import { forwardRef, useCallback, useMemo, useRef, useState } from "react";
 import AddressBar from "components/apps/FileExplorer/AddressBar";
 import {
   Back,
@@ -17,6 +17,7 @@ import Button from "styles/common/Button";
 import { ROOT_NAME } from "utils/constants";
 import { haltEvent, label } from "utils/functions";
 import { type CaptureTriggerEvent } from "contexts/menu/useMenuContextState";
+import useResizeObserver from "hooks/useResizeObserver";
 
 type NavigationProps = {
   hideSearch: boolean;
@@ -52,6 +53,21 @@ const Navigation = forwardRef<HTMLInputElement, NavigationProps>(
       [contextMenu, history, moveHistory, position]
     );
     const navRef = useRef<HTMLElement | null>(null);
+    const [removeSearch, setRemoveSearch] = useState(false);
+    const resizeCallback = useCallback<ResizeObserverCallback>(
+      ([{ contentRect }]) => {
+        const tooSmallForSearch = contentRect.width < 260;
+
+        if (removeSearch && !tooSmallForSearch) {
+          setRemoveSearch(false);
+        } else if (!removeSearch && tooSmallForSearch) {
+          setRemoveSearch(true);
+        }
+      },
+      [removeSearch]
+    );
+
+    useResizeObserver(navRef.current, resizeCallback);
 
     return (
       <StyledNavigation
@@ -118,7 +134,7 @@ const Navigation = forwardRef<HTMLInputElement, NavigationProps>(
           <Up />
         </Button>
         <AddressBar ref={inputRef} id={id} />
-        {!hideSearch && <SearchBar id={id} />}
+        {!hideSearch && !removeSearch && <SearchBar id={id} />}
       </StyledNavigation>
     );
   }

components/apps/FileExplorer/StyledAddressBar.ts

@@ -20,16 +20,20 @@ const StyledAddressBar = styled.div`
     font-size: 12px;
     font-weight: 400;
     height: ${({ theme }) => theme.sizes.fileExplorer.navInputHeight - 2}px;
-    padding-bottom: 1px;
+    padding-bottom: 2px;
     text-overflow: ellipsis;
     white-space: nowrap;
     width: calc(100% - 2px);
+
+    &:focus {
+      padding-bottom: 0;
+    }
   }
 
   img {
     left: 2px;
     position: absolute;
-    top: 3px;
+    top: 2px;
   }
 
   .refresh {

components/apps/FileExplorer/StyledNavigation.ts

@@ -28,14 +28,15 @@ const StyledNavigation = styled.nav`
     }
 
     &[title^="Up"] {
-      margin-bottom: 12px;
+      margin-right: 8px;
-      margin-right: 0;
+      position: relative;
-      margin-top: 10px;
+      right: -8px;
+      top: -1px;
     }
 
     &[title="Recent locations"] {
-      margin-left: 1px;
+      left: 55px;
-      margin-right: 0;
+      position: absolute;
 
       svg {
         stroke: currentColor;

hooks/useResizeObserver.ts

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 
 const useResizeObserver = (
-  componentWindow?: HTMLElement | null,
+  element?: HTMLElement | null,
   callback?: ResizeObserverCallback
 ): void => {
   const [resizeObserver, setResizeObserver] = useState<ResizeObserver>();
@@ -13,16 +13,16 @@ const useResizeObserver = (
   }, [callback]);
 
   useEffect(() => {
-    if (componentWindow instanceof HTMLElement) {
+    if (element instanceof HTMLElement) {
-      resizeObserver?.observe(componentWindow);
+      resizeObserver?.observe(element);
     }
 
     return () => {
-      if (componentWindow instanceof HTMLElement) {
+      if (element instanceof HTMLElement) {
-        resizeObserver?.unobserve(componentWindow);
+        resizeObserver?.unobserve(element);
       }
     };
-  }, [componentWindow, resizeObserver]);
+  }, [element, resizeObserver]);
 };
 
 export default useResizeObserver;