04/20 Update extension UI and functions: add item, form filler

extension/popup/popup.css

@@ -432,9 +432,11 @@ body {
   inset: 0;
   background: rgba(0, 0, 0, 0.45);
   display: flex;
-  align-items: center;
+  align-items: flex-start; /* anchor to top so card is never cut off */
   justify-content: center;
   z-index: 9999;
+  overflow-y: auto; /* allow scrolling if popup height is small */
+  padding: 16px 14px; /* breathing room from top/bottom edges */
 }
 .save-overlay.hidden {
   display: none;
@@ -442,24 +444,27 @@ body {
 .save-modal {
   background: #fff;
   border-radius: 12px;
-  padding: 20px 18px 16px;
-  width: 272px;
+  padding: 18px 16px 14px;
+  width: 100%; /* fill the overlay width minus its padding */
+  max-width: 288px;
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
+  flex-shrink: 0; /* never crush the card */
 }
 .save-modal-header {
   display: flex;
   align-items: center;
   gap: 8px;
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 700;
   color: #1a1a2e;
-  margin-bottom: 6px;
+  margin-bottom: 5px;
 }
 .save-modal-sub {
   font-size: 11px;
   color: #6b7280;
-  margin-bottom: 12px;
+  margin-bottom: 10px;
   word-break: break-all;
+  line-height: 1.4;
 }
 .save-modal-actions {
   display: flex;
@@ -473,6 +478,27 @@ body {
   margin-top: 0;
 }
 
+/* Folder select inside the save modal */
+.save-folder-select {
+  width: 100%;
+  padding: 7px 10px;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  font-size: 13px;
+  color: #1a1a2e;
+  background: #fff;
+  outline: none;
+  cursor: pointer;
+  transition:
+    border-color 0.15s,
+    box-shadow 0.15s;
+  appearance: auto;
+}
+.save-folder-select:focus {
+  border-color: #c0392b;
+  box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.12);
+}
+
 /* ── Generator view ──────────────────────────────────────────────── */
 .gen-suggestion {
   background: #e8f5f0;