fix(ui): issues at 700px (#924)

Enterprise-CMCS · Jan 13, 2025 · c48365e · c48365e
1 parent 8a7ad97
commit c48365e
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git 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
@@ -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("");