added "add media" buttons to prevent media picker opening automatically and added status captions

public/css/editor.css

@@ -173,6 +173,49 @@
   font-weight: 700;
 }
 
+.editor-media-actions {
+  display: grid;
+  gap: .75rem;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.editor-media-button {
+  align-items: center;
+  background: #fff;
+  border: 1px solid rgba(49, 93, 58, .35);
+  border-radius: .85rem;
+  color: #233326;
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  font-weight: 700;
+  gap: .65rem;
+  justify-content: center;
+  min-height: 3.5rem;
+  padding: .65rem .8rem;
+}
+
+.editor-media-button:hover {
+  background: #eef5ef;
+  border-color: #315d3a;
+}
+
+.editor-media-button:focus-visible {
+  outline: .2rem solid #f2ca6b;
+  outline-offset: .15rem;
+}
+
+.editor-media-icon {
+  fill: none;
+  flex: 0 0 2rem;
+  height: 2rem;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 2;
+  width: 2rem;
+}
+
 .editor-round-button {
   align-items: center;
   background: #315d3a;
@@ -408,3 +451,9 @@
     grid-template-columns: max-content minmax(0, 1fr);
   }
 }
+
+@media (max-width: 34rem) {
+  .editor-media-actions {
+    grid-template-columns: 1fr;
+  }
+}