Merge pull request #24 from MichaelMarcialis/unified-resizable-button-mm

Suggested Resizable Button Changes
stratoula · Aug 8, 2022 · e5b11f3 · e5b11f3
2 parents e2cafff + 917c234
commit e5b11f3
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 17 deletions.
diff --git a/...nified_search/public/query_string_input/text_based_languages_editor/resizable_button.scss b/...nified_search/public/query_string_input/text_based_languages_editor/resizable_button.scss
@@ -1,12 +1,8 @@
-
-.unifiedTextLangEditor--resizableButtonWrapper {
-  position: relative;
-}
-
 .unifiedTextLangEditor--resizableButtonContainer {
   position: absolute;
-  width: 100%;
-  top: $euiSizeS;
+  bottom: 0;
+  left: 0;
+  right: 0;
   display: flex;
   flex-direction: column;
 }

diff --git a/...unified_search/public/query_string_input/text_based_languages_editor/resizable_button.tsx b/...unified_search/public/query_string_input/text_based_languages_editor/resizable_button.tsx
@@ -22,16 +22,14 @@ export function ResizableButton({
   const setFocus = (e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.focus();
 
   return (
-    <div className="unifiedTextLangEditor--resizableButtonWrapper">
-      <div className="unifiedTextLangEditor--resizableButtonContainer">
-        <button
-          data-test-subj="unifiedTextLangEditor-resize"
-          className="unifiedTextLangEditor--resizableButton"
-          onMouseDown={onMouseDownResizeHandler}
-          onKeyDown={onKeyDownResizeHandler}
-          onClick={setFocus}
-        />
-      </div>
+    <div className="unifiedTextLangEditor--resizableButtonContainer">
+      <button
+        data-test-subj="unifiedTextLangEditor-resize"
+        className="unifiedTextLangEditor--resizableButton"
+        onMouseDown={onMouseDownResizeHandler}
+        onKeyDown={onKeyDownResizeHandler}
+        onClick={setFocus}
+      />
     </div>
   );
 }
diff --git a/src/plugins/unified_search/public/search_bar/search_bar.styles.ts b/src/plugins/unified_search/public/search_bar/search_bar.styles.ts
@@ -13,6 +13,7 @@ export const searchBarStyles = ({ euiTheme }: UseEuiTheme) => {
   return {
     uniSearchBar: css`
       padding: ${euiTheme.size.s};
+      position: relative;
     `,
     detached: css`
       border-bottom: ${euiTheme.border.thin};