diff --git a/components/calendar/event-modal.tsx b/components/calendar/event-modal.tsx
index e839366f..ac133921 100644
--- a/components/calendar/event-modal.tsx
+++ b/components/calendar/event-modal.tsx
@@ -1154,8 +1154,8 @@ export function EventModal({
         </div>
 
         {/* Action Bar */}
-        <div className="px-6 py-3 border-t border-border flex-shrink-0 flex items-center justify-between">
-          <div className="flex items-center gap-1">
+        <div className="px-6 py-3 border-t border-border flex-shrink-0 flex flex-wrap items-center gap-2">
+          <div className="flex flex-wrap items-center gap-1 min-w-0">
             {onDelete && (
               showDeleteConfirm ? (
                 <div className="flex items-center gap-2">
@@ -1194,7 +1194,7 @@ export function EventModal({
             )}
           </div>
           {!showDeleteConfirm && (
-            <Button onClick={() => setMode("edit")}>
+            <Button onClick={() => setMode("edit")} className="ml-auto shrink-0">
               <Pencil className="w-4 h-4 me-1" />
               {t("events.edit")}
             </Button>
@@ -1625,8 +1625,8 @@ export function EventModal({
         </div>
       </div>
 
-      <div className="flex items-center justify-between px-6 py-4 border-t border-border flex-shrink-0">
-        <div className="flex items-center gap-1">
+      <div className="flex flex-wrap items-center gap-2 px-6 py-4 border-t border-border flex-shrink-0">
+        <div className="flex flex-wrap items-center gap-1 min-w-0">
           {isEdit && onDelete && (
             showDeleteConfirm ? (
               <div className="flex items-center gap-2">
@@ -1677,7 +1677,7 @@ export function EventModal({
           )}
         </div>
 
-        <div className="flex gap-2">
+        <div className="flex gap-2 ml-auto shrink-0">
           <Button variant="outline" onClick={isEdit ? () => setMode("view") : onClose}>
             {t("form.cancel")}
           </Button>