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++) {