diff --git a/web/src/components/nav/ActionBar.tsx b/web/src/components/nav/ActionBar.tsx
index 681aa0c..0b39980 100644
--- a/web/src/components/nav/ActionBar.tsx
+++ b/web/src/components/nav/ActionBar.tsx
@@ -5,5 +5,5 @@ interface ActionBarProps {
 }
 
 export default function ActionBar({ children }: ActionBarProps) {
-  return <div className="flex items-center gap-2">{children}</div>;
+  return <div className="flex flex-wrap items-center gap-2">{children}</div>;
 }
diff --git a/web/src/components/nav/ActionButton.tsx b/web/src/components/nav/ActionButton.tsx
index 8d0b797..3240c06 100644
--- a/web/src/components/nav/ActionButton.tsx
+++ b/web/src/components/nav/ActionButton.tsx
@@ -1,7 +1,7 @@
 import { Link } from "react-router-dom";
 
 const actionStyle =
-  "bg-neutral-800 hover:bg-neutral-700 text-neutral-200 px-4 py-2 rounded";
+  "bg-neutral-800 hover:bg-neutral-700 text-neutral-200 px-4 py-2 rounded whitespace-nowrap";
 
 interface ActionButtonProps {
   onClick: () => void;