adjusted placement and styling of buttons

2026-05-25-claude-move-action-buttons-to-top.md

@@ -0,0 +1,22 @@
+# Move Action Buttons to Top
+
+**Date:** 2026-05-25
+
+## Requests
+
+> on the popup window, there are buttons at the bottom (after the playlists). move them to the top (so the user doesn't need to scroll to access the actions).
+
+> put a small space between the buttons and the first playlist
+
+> when the buttons wrap onto another line (row), add a (smaller) space between the rows of buttons
+
+> also add a very small (horizontal) space between the buttons
+
+## Changes
+
+- **`popup/popup.html`**: Moved the `export-container` div (containing Export Playlists, Import Playlists, History, Save Channel, Wiki/Insp buttons) from after all view containers to just before the `playlists-container`. The buttons now appear immediately below the header on the main playlists view.
+- **`popup/popup.css`**: Added `.export-container` rule with:
+  - `display: flex; flex-wrap: wrap` — enables wrapping layout
+  - `row-gap: 6px` — small space between wrapped rows of buttons
+  - `column-gap: 4px` — very small horizontal space between buttons
+  - `margin-bottom: 12px` — gap between the button bar and the first playlist

popup/popup.css

@@ -892,3 +892,11 @@ button:hover {
 .export-btn:hover {
   background-color: #3367d6;
 }
+
+.export-container {
+  display: flex;
+  flex-wrap: wrap;
+  row-gap: 6px;
+  column-gap: 4px;
+  margin-bottom: 12px;
+}

popup/popup.html

@@ -40,6 +40,25 @@
         <h1>Import Playlists</h1>
       </header>
 
+      <!-- Export/Import/History buttons -->
+      <div class="export-container" x-bind="exportContainer">
+        <button class="export-btn" x-bind="exportButton">
+          Export Playlists
+        </button>
+        <button class="import-btn" x-bind="importButton">
+          Import Playlists
+        </button>
+        <button class="history-btn" x-bind="historyButton">
+          History
+        </button>
+        <button class="save-channel-btn" x-bind="saveChannelButton">
+          Save Channel
+        </button>
+        <button class="wiki-insp-btn" x-bind="wikiInspButton">
+          Wiki/Insp
+        </button>
+      </div>
+
       <div class="playlists-container" x-bind="playlistsContainer">
         <template
           x-for="playlistData in playlistsForDisplay"
@@ -435,24 +454,6 @@
         </div>
       </div>
 
-      <!-- Export/Import/History buttons -->
-      <div class="export-container" x-bind="exportContainer">
-        <button class="export-btn" x-bind="exportButton">
-          Export Playlists
-        </button>
-        <button class="import-btn" x-bind="importButton">
-          Import Playlists
-        </button>
-        <button class="history-btn" x-bind="historyButton">
-          History
-        </button>
-        <button class="save-channel-btn" x-bind="saveChannelButton">
-          Save Channel
-        </button>
-        <button class="wiki-insp-btn" x-bind="wikiInspButton">
-          Wiki/Insp
-        </button>
-      </div>
     </div>
   </body>
 </html>