fix(OY2-28003): package ID text wrap + responsiveness (#593)

* fix(OY2-28003): package ID text wrap + responsiveness
Enterprise-CMCS · Jun 25, 2024 · e129441 · e129441
1 parent d732155
commit e129441
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/src/services/ui/src/components/BreadCrumb/BreadCrumb.tsx b/src/services/ui/src/components/BreadCrumb/BreadCrumb.tsx
@@ -65,7 +65,11 @@ export const BreadCrumb = ({
           {children}
         </Link>
       )}
-      {!active && <span aria-disabled>{children}</span>}
+      {!active && (
+        <span className="whitespace-nowrap" aria-disabled>
+          {children}
+        </span>
+      )}
     </li>
   );
 };

diff --git a/src/services/ui/src/features/package/index.tsx b/src/services/ui/src/features/package/index.tsx
@@ -74,10 +74,12 @@ export const Details = () => {
   const id = query.get("id") as string;
 
   return (
-    <div className="max-w-screen-xl mx-auto flex px-4 lg:px-8">
-      <div className="hidden lg:block">
+    <div className="max-w-screen-xl mx-auto flex flex-col lg:flex-row px-4 lg:px-8">
+      <div>
         <BreadCrumbs options={detailsAndActionsCrumbs({ id })} />
-        <DetailsSidebar id={id} />
+        <div className="hidden lg:block">
+          <DetailsSidebar id={id} />
+        </div>
       </div>
       <DetailsContent id={id} />
     </div>