fix: quickaction in media with icon on button

lib/bds/desktop/shell_live/media_editor_html/media_editor.html.heex

@@ -25,7 +25,8 @@
           phx-click="toggle_media_editor_quick_actions"
           phx-value-id={@media_editor.id}
         >
-          <%= translated("Quick Actions") %>
+          <span class="quick-actions-btn-icon">⚡</span>
+          <span class="quick-actions-btn-label"><%= translated("Quick Actions") %></span>
         </button>
 
         <%= if @media_editor.quick_actions_open? do %>
@@ -38,11 +39,11 @@
                 phx-click="open_overlay"
                 phx-value-kind="ai_suggestions"
               >
-                <span class="quick-action-icon">🤖</span>
                 <span class="quick-action-text">
                   <strong><%= translated("AI Suggestions") %></strong>
                   <small><%= translated("Review title, alt text, and caption suggestions") %></small>
                 </span>
+                <span class="quick-action-icon">🤖</span>
               </button>
 
               <div class="quick-actions-divider"></div>
@@ -55,11 +56,11 @@
               phx-value-id={@media_editor.id}
               disabled={not @media_editor.can_detect_language?}
             >
-              <span class="quick-action-icon">🔍</span>
               <span class="quick-action-text">
                 <strong><%= translated("Detect Language") %></strong>
                 <small><%= translated("Persist the detected language for this media item") %></small>
               </span>
+              <span class="quick-action-icon">🔍</span>
             </button>
 
             <div class="quick-actions-divider"></div>
@@ -72,11 +73,11 @@
               phx-value-kind="language_picker"
               disabled={not @media_editor.can_translate?}
             >
-              <span class="quick-action-icon">🌍</span>
               <span class="quick-action-text">
                 <strong><%= translated("Translate") %></strong>
                 <small><%= translated("Select a target language for this media item") %></small>
               </span>
+              <span class="quick-action-icon">🌍</span>
             </button>
           </div>
         <% end %>

priv/ui/app.css

@@ -2674,6 +2674,87 @@ button svg * {
   font-style: italic;
 }
 
+[data-testid="media-editor"] .quick-actions-wrapper {
+  position: relative;
+}
+
+[data-testid="media-editor"] .quick-actions-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+[data-testid="media-editor"] .quick-actions-btn-icon {
+  font-size: 12px;
+  line-height: 1;
+}
+
+[data-testid="media-editor"] .quick-actions-menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  width: 280px;
+  background: var(--vscode-dropdown-background, #252526);
+  border: 1px solid var(--vscode-dropdown-border, #454545);
+  border-radius: 6px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+  overflow: hidden;
+  z-index: 30;
+}
+
+[data-testid="media-editor"] .quick-actions-divider {
+  height: 1px;
+  background: var(--vscode-dropdown-border, #454545);
+}
+
+[data-testid="media-editor"] .quick-action-item {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 10px;
+  width: 100%;
+  padding: 10px 12px;
+  background: none;
+  border: none;
+  color: var(--vscode-dropdown-foreground, #ccc);
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.1s;
+}
+
+[data-testid="media-editor"] .quick-action-item:hover:not(:disabled) {
+  background: var(--vscode-list-hoverBackground, #2a2d2e);
+}
+
+[data-testid="media-editor"] .quick-action-item:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+[data-testid="media-editor"] .quick-action-icon {
+  font-size: 16px;
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+
+[data-testid="media-editor"] .quick-action-text {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+[data-testid="media-editor"] .quick-action-text strong {
+  font-size: 13px;
+  font-weight: 500;
+}
+
+[data-testid="media-editor"] .quick-action-text small {
+  font-size: 11px;
+  opacity: 0.7;
+}
+
 [data-testid="media-editor"] .editor-content {
   flex: 1;
   display: flex;
@@ -2742,6 +2823,7 @@ button svg * {
   background-color: var(--vscode-input-background);
   border-radius: 8px;
   min-height: 300px;
+  overflow: hidden;
 }
 
 [data-testid="media-editor"] .media-preview-placeholder {
@@ -2753,17 +2835,20 @@ button svg * {
 }
 
 [data-testid="media-editor"] .media-preview-image {
-  max-width: 100%;
-  max-height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
+  align-self: stretch;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
   padding: 16px;
+  box-sizing: border-box;
 }
 
 [data-testid="media-editor"] .media-preview-image img {
-  max-width: 100%;
+  width: 100%;
-  max-height: 100%;
+  height: 100%;
   object-fit: contain;
   border-radius: 4px;
 }

test/bds/ui/shell_test.exs

@@ -220,9 +220,16 @@ defmodule BDS.UI.ShellTest do
 
   test "desktop shell css keeps the old media editor layout contract" do
     css = File.read!("/Users/gb/Projects/bDS2/priv/ui/app.css")
+    template = File.read!("/Users/gb/Projects/bDS2/lib/bds/desktop/shell_live/media_editor_html/media_editor.html.heex")
 
     assert css =~ ".media-preview {"
     assert css =~ "min-height: 300px;"
+    assert css =~ ".media-preview-image {"
+    assert css =~ "width: 100%;"
+    assert css =~ "height: 100%;"
+    assert css =~ "box-sizing: border-box;"
+    assert css =~ ".media-preview-image img {"
+    assert css =~ "object-fit: contain;"
     assert css =~ ".media-details {"
     assert css =~ "width: 320px;"
     assert css =~ ".media-details textarea {"
@@ -237,6 +244,12 @@ defmodule BDS.UI.ShellTest do
     assert css =~ "padding: 6px 10px;"
     assert css =~ ".linked-post-item:hover .unlink-btn {"
     assert css =~ "opacity: 1;"
+    assert Regex.match?(~r/class="secondary quick-actions-btn".*?<span class="quick-actions-btn-icon">⚡<\/span>\s*<span class="quick-actions-btn-label"><%= translated\("Quick Actions"\) %><\/span>/s, template)
+    assert template =~ ~s(class="quick-action-text")
+    assert template =~ ~s(class="quick-action-icon">🤖</span>)
+    assert Regex.match?(~r/class="quick-action-text">\s*<strong><%= translated\("AI Suggestions"\) %><\/strong>.*?<\/span>\s*<span class="quick-action-icon">🤖<\/span>/s, template)
+    refute template =~ ~s|<span class="quick-action-icon">🤖</span>
+          <span class="quick-action-text">|
   end
 
   test "desktop shell status task area keeps the compact running-task markup" do