diff --git a/src/services/ui/src/components/BreadCrumb/BreadCrumb.tsx b/src/services/ui/src/components/BreadCrumb/BreadCrumb.tsx
index 7ca64f4e8..4a9d2dc8d 100644
--- 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
index 068ba17d9..a5907f26b 100644
--- 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>