From c48365ec9c49fa323ada0dc74022ab9221efc170 Mon Sep 17 00:00:00 2001
From: rmuntaqim <146774930+rmuntaqim@users.noreply.github.com>
Date: Mon, 13 Jan 2025 13:31:35 -0500
Subject: [PATCH] fix(ui): issues at `700px` (#924)

---
 react-app/src/components/BreadCrumb/BreadCrumb.tsx | 8 ++++++--
 react-app/src/components/SearchForm/index.tsx      | 2 +-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/react-app/src/components/BreadCrumb/BreadCrumb.tsx b/react-app/src/components/BreadCrumb/BreadCrumb.tsx
index cfca4089c8..89a5fdf8c6 100644
--- a/react-app/src/components/BreadCrumb/BreadCrumb.tsx
+++ b/react-app/src/components/BreadCrumb/BreadCrumb.tsx
@@ -74,8 +74,12 @@ export const BreadCrumbSeperator = () => <ChevronRight className="w-5 h-5" />;
 
 export const BreadCrumbBar = ({ children }: React.PropsWithChildren) => {
   return (
-    <nav role="navigation" aria-label="breadcrumbs for spa or waiver choices" className="my-4">
-      <ul className="flex gap-1">{children}</ul>
+    <nav
+      role="navigation"
+      aria-label="breadcrumbs for spa or waiver choices"
+      className="my-4"
+    >
+      <ul className="flex flex-wrap gap-1">{children}</ul>
     </nav>
   );
 };
diff --git a/react-app/src/components/SearchForm/index.tsx b/react-app/src/components/SearchForm/index.tsx
index 857a19ff55..08672a3626 100644
--- a/react-app/src/components/SearchForm/index.tsx
+++ b/react-app/src/components/SearchForm/index.tsx
@@ -65,7 +65,7 @@ export const SearchForm: FC<{
         )}
         {!!searchText && (
           <XIcon
-            className="absolute cursor-pointer top-0 bottom-0 w-6 h-6 my-auto left-[28rem]"
+            className="absolute cursor-pointer top-0 bottom-0 w-6 h-6 my-auto right-0 lg:left-[28rem] xl:left-[55%]"
             data-testid="close-icon"
             onClick={() => {
               setSearchText("");