mobile fixes

public/app.js

@@ -1729,13 +1729,17 @@ function createFavoriteManagerRow(item, index) {
   edit.type = 'button';
   edit.className = 'secondary-button favorite-action';
   edit.dataset.editFavorite = String(index);
-  edit.textContent = 'Edit';
+  edit.setAttribute('aria-label', `Edit ${item.title}`);
+  edit.title = 'Edit';
+  edit.append(createFavoriteActionIcon('edit'));
 
   const remove = document.createElement('button');
   remove.type = 'button';
   remove.className = 'remove-favorite favorite-action';
   remove.dataset.removeFavorite = String(index);
-  remove.textContent = 'Remove';
+  remove.setAttribute('aria-label', `Remove ${item.title}`);
+  remove.title = 'Remove';
+  remove.append(createFavoriteActionIcon('remove'));
 
   const actions = document.createElement('div');
   actions.className = 'favorite-actions';
@@ -1746,6 +1750,26 @@ function createFavoriteManagerRow(item, index) {
   return row;
 }
 
+function createFavoriteActionIcon(kind) {
+  const namespace = 'http://www.w3.org/2000/svg';
+  const svg = document.createElementNS(namespace, 'svg');
+  const paths = kind === 'edit'
+    ? ['M12 20h9', 'M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z']
+    : ['M3 6h18', 'M8 6V4h8v2', 'M6 6l1 15h10l1-15', 'M10 11v6', 'M14 11v6'];
+
+  svg.setAttribute('viewBox', '0 0 24 24');
+  svg.setAttribute('aria-hidden', 'true');
+  svg.setAttribute('focusable', 'false');
+
+  for (const pathData of paths) {
+    const path = document.createElementNS(namespace, 'path');
+    path.setAttribute('d', pathData);
+    svg.append(path);
+  }
+
+  return svg;
+}
+
 function startFavoriteWizard(mode, index = -1) {
   const item = mode === 'edit' ? state.favorites[index] : null;
 

public/styles.css

@@ -489,9 +489,9 @@ audio {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.75rem;
-  min-height: 4rem;
+  min-height: 4.7rem;
-  padding: 0.55rem;
+  padding: 0.65rem;
   border: 1px solid var(--line);
   border-radius: 8px;
   background: rgba(255, 255, 255, 0.06);
@@ -499,6 +499,7 @@ audio {
 
 .favorite-summary {
   min-width: 0;
+  padding-right: 0.15rem;
 }
 
 .favorite-title,
@@ -520,13 +521,34 @@ audio {
 }
 
 .favorite-action {
-  min-width: 5.2rem;
+  display: grid;
+  width: 2.45rem;
+  height: 2.45rem;
+  min-width: 2.45rem;
+  min-height: 2.45rem;
+  place-items: center;
+  padding: 0;
+  border-radius: 50%;
 }
 
 .favorite-actions {
   display: flex;
-  gap: 0.5rem;
+  flex: 0 0 auto;
-  min-width: 0;
+  gap: 0.45rem;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.favorite-action svg {
+  display: block;
+  width: 1.05rem;
+  height: 1.05rem;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2.2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  pointer-events: none;
 }
 
 .wizard-step {
@@ -559,9 +581,9 @@ audio {
   border-color: rgba(232, 168, 79, 0.7);
 }
 
-.secondary-button,
+.secondary-button:not(.favorite-action),
 .primary-button,
-.remove-favorite {
+.remove-favorite:not(.favorite-action) {
   min-height: 2.7rem;
   padding: 0.65rem 0.95rem;
   font-weight: 800;
@@ -618,20 +640,23 @@ audio {
   }
 
   .favorite-manager-row {
-    grid-template-columns: 1fr;
+    grid-template-columns: minmax(0, 1fr) auto;
-    align-items: stretch;
+    align-items: center;
-    gap: 0.7rem;
+    gap: 0.65rem;
+    min-height: 5rem;
+    padding: 0.7rem;
   }
 
   .favorite-actions {
-    display: grid;
+    flex-direction: column;
-    grid-template-columns: 1fr 1fr;
+    gap: 0.35rem;
-    width: 100%;
   }
 
   .favorite-actions .favorite-action {
-    width: 100%;
+    width: 2.35rem;
-    min-width: 0;
+    height: 2.35rem;
+    min-width: 2.35rem;
+    min-height: 2.35rem;
   }
 
   .remove-favorite,