diff --git a/src/components/LayerUI.scss b/src/components/LayerUI.scss
index e4aa90298..494d3ba22 100644
--- a/src/components/LayerUI.scss
+++ b/src/components/LayerUI.scss
@@ -7,11 +7,23 @@
align-items: center;
justify-content: center;
- .browse-libraries {
- position: absolute;
- right: 12px;
- top: 16px;
- white-space: nowrap;
+ .layer-ui__library-header {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ margin: 2px 0;
+
+ button {
+ // 2px from the left to account for focus border of left-most button
+ margin: 0 2px;
+ }
+
+ a {
+ margin-left: auto;
+ // 17px for scrollbar (needed for overlay scrollbars on Big Sur?) + 1px extra
+ padding-right: 18px;
+ white-space: nowrap;
+ }
}
}
diff --git a/src/components/LayerUI.tsx b/src/components/LayerUI.tsx
index ec3b17e91..5a806e829 100644
--- a/src/components/LayerUI.tsx
+++ b/src/components/LayerUI.tsx
@@ -124,9 +124,42 @@ const LibraryMenuItems = ({
let addedPendingElements = false;
rows.push(
- <>
+
+
{
+ importLibraryFromJSON()
+ .then(() => {
+ // Maybe we should close and open the menu so that the items get updated.
+ // But for now we just close the menu.
+ setAppState({ isLibraryOpen: false });
+ })
+ .catch(muteFSAbortError)
+ .catch((error) => {
+ setAppState({ errorMessage: error.message });
+ });
+ }}
+ />
+ {
+ saveLibraryAsJSON()
+ .catch(muteFSAbortError)
+ .catch((error) => {
+ setAppState({ errorMessage: error.message });
+ });
+ }}
+ />
+
{
@@ -135,48 +168,7 @@ const LibraryMenuItems = ({
>
{t("labels.libraries")}
-
-
- {
- importLibraryFromJSON()
- .then(() => {
- // Maybe we should close and open the menu so that the items get updated.
- // But for now we just close the menu.
- setAppState({ isLibraryOpen: false });
- })
- .catch(muteFSAbortError)
- .catch((error) => {
- setAppState({ errorMessage: error.message });
- });
- }}
- />
- {
- saveLibraryAsJSON()
- .catch(muteFSAbortError)
- .catch((error) => {
- setAppState({ errorMessage: error.message });
- });
- }}
- />
-
- >,
+ ,
);
for (let row = 0; row < numRows; row++) {