From 2c09bfc3d97218dd3a1395eb86bb003a2c8fe201 Mon Sep 17 00:00:00 2001
From: nikec <43032218+niikeec@users.noreply.github.com>
Date: Sat, 26 Aug 2023 11:30:41 +0200
Subject: [PATCH] [ENG-1003] fix search bar position (#1252)

fix search bar position
---
 .../app/$libraryId/TopBar/TopBarOptions.tsx   |  2 +-
 interface/app/$libraryId/TopBar/index.tsx     | 19 +++++++++++--------
 interface/app/$libraryId/location/$id.tsx     | 14 ++++++--------
 interface/app/$libraryId/node/$id.tsx         | 13 ++++---------
 4 files changed, 22 insertions(+), 26 deletions(-)

diff --git a/interface/app/$libraryId/TopBar/TopBarOptions.tsx b/interface/app/$libraryId/TopBar/TopBarOptions.tsx
index 87bae08eb..7ed1ebf66 100644
--- a/interface/app/$libraryId/TopBar/TopBarOptions.tsx
+++ b/interface/app/$libraryId/TopBar/TopBarOptions.tsx
@@ -37,7 +37,7 @@ export default ({ options }: TopBarChildrenProps) => {
 	}, []);
 
 	return (
-		<div data-tauri-drag-region className="flex flex-row">
+		<div data-tauri-drag-region className="flex flex-1 justify-end">
 			<div data-tauri-drag-region className={`flex gap-0`}>
 				{options?.map((group, groupIndex) => {
 					return group.map(
diff --git a/interface/app/$libraryId/TopBar/index.tsx b/interface/app/$libraryId/TopBar/index.tsx
index 94142ec57..8285d69d4 100644
--- a/interface/app/$libraryId/TopBar/index.tsx
+++ b/interface/app/$libraryId/TopBar/index.tsx
@@ -20,19 +20,22 @@ const TopBar = (props: Props) => {
 			data-tauri-drag-region
 			style={{ height: TOP_BAR_HEIGHT }}
 			className={clsx(
-				'duration-250 top-bar-blur absolute left-0 top-0 z-50 flex',
-				'w-full flex-row items-center justify-between overflow-hidden',
-				'border-b border-sidebar-divider bg-app/90 px-3.5',
-				'transition-[background-color,border-color] ease-out',
+				'top-bar-blur absolute inset-x-0 z-50 flex items-center gap-3.5 overflow-hidden border-b !border-sidebar-divider bg-app/90 px-3.5',
+				'duration-250 transition-[background-color,border-color] ease-out',
 				isDragging && 'pointer-events-none'
 			)}
 		>
-			<div data-tauri-drag-region className="flex min-w-0 flex-row items-center">
+			<div
+				data-tauri-drag-region
+				className="flex flex-1 items-center gap-3.5 overflow-hidden"
+			>
 				<NavigationButtons />
-				<div ref={props.leftRef} className="contents" />
+				<div ref={props.leftRef} className="overflow-hidden" />
 			</div>
-			{props.noSearch || <SearchBar />}
-			<div ref={props.rightRef} className="contents" />
+
+			{!props.noSearch && <SearchBar />}
+
+			<div ref={props.rightRef} className={clsx(!props.noSearch && 'flex-1')} />
 		</div>
 	);
 };
diff --git a/interface/app/$libraryId/location/$id.tsx b/interface/app/$libraryId/location/$id.tsx
index 62d7d7d87..3516bfbcb 100644
--- a/interface/app/$libraryId/location/$id.tsx
+++ b/interface/app/$libraryId/location/$id.tsx
@@ -122,14 +122,12 @@ export const Component = () => {
 		<ExplorerContextProvider explorer={explorer}>
 			<TopBarPortal
 				left={
-					<div className="group flex flex-row items-center space-x-2">
-						<span className="flex flex-row items-center">
-							<Folder size={22} className="ml-3 mr-2 mt-[-1px] inline-block" />
-							<span className="max-w-[100px] truncate text-sm font-medium">
-								{path && path?.length > 1
-									? getLastSectionOfPath(path)
-									: location.data?.name}
-							</span>
+					<div className="flex items-center gap-2">
+						<Folder size={22} className="mt-[-1px]" />
+						<span className="truncate text-sm font-medium">
+							{path && path?.length > 1
+								? getLastSectionOfPath(path)
+								: location.data?.name}
 						</span>
 						{location.data && (
 							<LocationOptions location={location.data} path={path || ''} />
diff --git a/interface/app/$libraryId/node/$id.tsx b/interface/app/$libraryId/node/$id.tsx
index 7f0113c13..da5cc5414 100644
--- a/interface/app/$libraryId/node/$id.tsx
+++ b/interface/app/$libraryId/node/$id.tsx
@@ -43,15 +43,10 @@ export const Component = () => {
 		<ExplorerContextProvider explorer={explorer}>
 			<TopBarPortal
 				left={
-					<div className="group flex flex-row items-center space-x-2">
-						<span className="flex flex-row items-center">
-							<img
-								src={Laptop}
-								className="ml-3 mr-2 mt-[-1px] inline-block h-6 w-6"
-							/>
-							<span className="overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium">
-								{nodeState.data?.name || 'Node'}
-							</span>
+					<div className="flex items-center gap-2">
+						<img src={Laptop} className="mt-[-1px] h-6 w-6" />
+						<span className="truncate text-sm font-medium">
+							{nodeState.data?.name || 'Node'}
 						</span>
 					</div>
 				}