diff --git a/assets/css/styles.css b/assets/css/styles.css
index 36bb3ba..605259a 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -398,6 +398,30 @@ body {
     color: var(--text-primary);
     font-weight: 600;
     border: none;
+}
+
+/* Menu options UI tweaks */
+.menu-option-item h6 {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.menu-option-item .btn-sm {
+    padding: 0.25rem 0.5rem;
+    font-size: 0.85rem;
+}
+
+.table td.text-nowrap {
+    white-space: nowrap;
+}
+
+/* Ensure action buttons are always visible and don't wrap */
+.table td .d-flex {
+    align-items: center;
+    justify-content: flex-end;
+}
+
     padding: 15px;
     font-size: 0.9rem;
 }
diff --git a/assets/js/app_simple.js b/assets/js/app_simple.js
index 93da262..267fe2d 100644
--- a/assets/js/app_simple.js
+++ b/assets/js/app_simple.js
@@ -2461,8 +2461,8 @@ window.addMenuOption = function () {
     const optionHtml = `
         <div class="menu-option-item border rounded p-3 mb-2">
             <div class="d-flex justify-content-between align-items-center mb-2">
-                <h6 class="mb-0">Opción ${optionIndex}</h6>
-                <button type="button" class="btn btn-sm btn-outline-danger" onclick="removeMenuOption(this)">
+                <h6 class="mb-0 flex-grow-1 text-truncate" style="max-width:85%">Opción ${optionIndex}</h6>
+                <button type="button" class="btn btn-sm btn-outline-danger ms-2" onclick="removeMenuOption(this)" aria-label="Eliminar opción">
                     <i class="fas fa-trash"></i>
                 </button>
             </div>
@@ -3254,13 +3254,15 @@ function showMenuOptionsModal(menuData) {
                                                     <td><span class="badge bg-info">${option.option_action || option.action || 'message'}</span></td>
                                                     <td><small>${(option.option_value || option.value || '').substring(0, 40)}${(option.option_value || option.value || '').length > 40 ? '...' : ''}</small></td>
                                                     <td>${option.order_index || index + 1}</td>
-                                                    <td>
-                                                        <button class="btn btn-outline-warning btn-xs" onclick="editMenuOption(${menuData.id}, ${option.id || index})" title="Editar">
-                                                            <i class="fas fa-edit"></i>
-                                                        </button>
-                                                        <button class="btn btn-outline-danger btn-xs ms-1" onclick="deleteMenuOption(${menuData.id}, ${option.id || index})" title="Eliminar">
-                                                            <i class="fas fa-trash"></i>
-                                                        </button>
+                                                    <td class="text-nowrap">
+                                                        <div class="d-flex gap-1">
+                                                            <button class="btn btn-outline-warning btn-sm" onclick="editMenuOption(${menuData.id}, ${option.id || index})" title="Editar">
+                                                                <i class="fas fa-edit"></i>
+                                                            </button>
+                                                            <button class="btn btn-outline-danger btn-sm" onclick="deleteMenuOption(${menuData.id}, ${option.id || index})" title="Eliminar">
+                                                                <i class="fas fa-trash"></i>
+                                                            </button>
+                                                        </div>
                                                     </td>
                                                 </tr>
                                             `).join('')}