Update Anki field marker menu (#1816)

* Update anki field marker menu to have less vertical padding

* Update positioning of field marker menu

3 files changed, 9 insertions, 2 deletions

diff --git a/ext/css/material.css b/ext/css/material.css
index b19b0b0f..3aa6b18b 100644
--- a/ext/css/material.css
+++ b/ext/css/material.css
@@ -1211,6 +1211,9 @@ button.popup-menu-item {
 button.popup-menu-item:not([hidden]) {
     display: flex;
 }
+button.popup-menu-item.popup-menu-item-thin {
+    --button-padding-vertical: 0.375em;
+}
 .popup-menu-item-icon {
     width: calc(16em / var(--font-size-no-units));
     height: calc(16em / var(--font-size-no-units));
@@ -1236,6 +1239,10 @@ button.popup-menu-item:not([hidden]) {
 
     font-size: var(--font-size-small);
 }
+:root[data-page-type=popup] .popup-menu.popup-menu-auto-size button.popup-menu-item.popup-menu-item-thin,
+.popup-menu.popup-menu-small button.popup-menu-item.popup-menu-item-thin {
+    --button-padding-vertical: 0.25em;
+}
 .popup-menu-item-group {
     position: relative;
     display: flex;
diff --git a/ext/js/pages/settings/anki-controller.js b/ext/js/pages/settings/anki-controller.js
index c0f7f626..1ec14c4b 100644
--- a/ext/js/pages/settings/anki-controller.js
+++ b/ext/js/pages/settings/anki-controller.js
@@ -241,7 +241,7 @@ class AnkiController {
             for (const marker of markers) {
                 const option = document.createElement('button');
                 option.textContent = marker;
-                option.className = 'popup-menu-item';
+                option.className = 'popup-menu-item popup-menu-item-thin';
                 option.dataset.menuAction = 'setFieldMarker';
                 option.dataset.marker = marker;
                 fragment.appendChild(option);
diff --git a/ext/settings.html b/ext/settings.html
index 0144ddd3..d392b0c0 100644
--- a/ext/settings.html
+++ b/ext/settings.html
@@ -2888,7 +2888,7 @@
 <template id="anki-card-field-template"><div class="anki-card-field-name-container"><span class="anki-card-field-name"></span></div>
 <div class="anki-card-field-value-container">
     <input type="text" class="anki-card-field-value input-with-suffix-button" autocomplete="off">
-    <button class="anki-card-field-value-menu-button input-suffix-button input-suffix-icon-button light-icon" data-menu-position="below left"><span class="icon" data-icon="material-down-arrow"></span></button>
+    <button class="anki-card-field-value-menu-button input-suffix-button input-suffix-icon-button light-icon" data-menu-position="v-center left"><span class="icon" data-icon="material-down-arrow"></span></button>
 </div></template>
 
 <template id="anki-card-terms-field-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu"><div class="popup-menu-body"></div></div></div></template>