feat: browse libraries styles fixed (#2694)

* feat: browse libraries styles fixed

* simplify jsx & css

* remove justify-content

* fix padding/margin

* Update src/components/LayerUI.scss

Co-authored-by: benjamin.kugler <benjamin.kugler@elliemae.com>
Co-authored-by: dwelle <luzar.david@gmail.com>

src/components/LayerUI.scss

@@ -7,13 +7,25 @@
     align-items: center;
     justify-content: center;
 
-    .browse-libraries {
-      position: absolute;
-      right: 12px;
-      top: 16px;
+    .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;
       }
     }
+  }
 
   .layer-ui__library-message {
     padding: 10px 20px;

src/components/LayerUI.tsx

@@ -124,24 +124,7 @@ const LibraryMenuItems = ({
   let addedPendingElements = false;
 
   rows.push(
-    <>
-      <a
-        className="browse-libraries"
-        href="https://libraries.excalidraw.com"
-        target="_excalidraw_libraries"
-        onClick={() => {
-          trackEvent(EVENT_EXIT, "libraries");
-        }}
-      >
-        {t("labels.libraries")}
-      </a>
-
-      <Stack.Row
-        align="center"
-        gap={1}
-        key={"actions"}
-        style={{ padding: "2px" }}
-      >
+    <div className="layer-ui__library-header">
       <ToolButton
         key="import"
         type="button"
@@ -175,8 +158,17 @@ const LibraryMenuItems = ({
             });
         }}
       />
-      </Stack.Row>
-    </>,
+
+      <a
+        href="https://libraries.excalidraw.com"
+        target="_excalidraw_libraries"
+        onClick={() => {
+          trackEvent(EVENT_EXIT, "libraries");
+        }}
+      >
+        {t("labels.libraries")}
+      </a>
+    </div>,
   );
 
   for (let row = 0; row < numRows; row++) {