From 68b1d3d0bd7447c7f7a120947da3036846f006a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Artur=20Magalh=C3=A3es?= <artur.magalhaes@vtex.com.br>
Date: Mon, 14 Nov 2022 12:01:48 -0500
Subject: [PATCH] fix: fixed some layout issues

---
 CHANGELOG.md                    |  4 ++++
 react/components/UserWidget.tsx | 15 +++++++++------
 react/components/userWidget.css |  3 +++
 3 files changed, 16 insertions(+), 6 deletions(-)
 create mode 100644 react/components/userWidget.css

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1feaf735..54615efe 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Fixed
+
+- Fixed some layout issues
+
 ## [1.16.3] - 2022-11-09
 
 ### Fixed
diff --git a/react/components/UserWidget.tsx b/react/components/UserWidget.tsx
index cc16af9a..484e25b0 100644
--- a/react/components/UserWidget.tsx
+++ b/react/components/UserWidget.tsx
@@ -6,6 +6,7 @@ import { AutocompleteInput, Button, Tag } from 'vtex.styleguide'
 import { useCssHandles } from 'vtex.css-handles'
 import { useRuntime } from 'vtex.render-runtime'
 
+import userWidgetCss from './userWidget.css'
 import {
   organizationMessages as storeMessages,
   userWidgetMessages as messages,
@@ -74,7 +75,7 @@ const CustomOrganizationOption = (props: any) => {
       onClick={onClick}
       disabled={value.status !== 'active'}
     >
-      <div className="flex items-center">
+      <div className="flex items-center truncate">
         <span className="pr2">{renderOptionHighlightedText()}</span>
         {typeof value !== 'string' && (
           <div className="t-mini c-muted-1">{value.caption}</div>
@@ -295,7 +296,7 @@ const UserWidget: FunctionComponent = () => {
 
   return (
     <div
-      className={`${handles.userWidgetContainer} w-100 flex flex-column mv3 bg-base--inverted`}
+      className={`${handles.userWidgetContainer} w-100 flex flex-column mv3 bg-base--inverted ${userWidgetCss.userWidget__zIndex}`}
     >
       <div
         className={`${handles.userWidgetRow} flex justify-center items-center`}
@@ -305,10 +306,12 @@ const UserWidget: FunctionComponent = () => {
         >
           {(!userWidgetData?.checkImpersonation?.email &&
             organizationsState.organizationOptions.length > 1 && (
-              <AutocompleteInput
-                input={organizationAutoCompleteInput}
-                options={autoCompleteOrganizationOptions}
-              />
+              <Fragment>
+                <AutocompleteInput
+                  input={organizationAutoCompleteInput}
+                  options={autoCompleteOrganizationOptions}
+                />
+              </Fragment>
             )) || (
             <Fragment>
               {`${formatMessage(messages.organization)} ${
diff --git a/react/components/userWidget.css b/react/components/userWidget.css
new file mode 100644
index 00000000..0b7bc64f
--- /dev/null
+++ b/react/components/userWidget.css
@@ -0,0 +1,3 @@
+.userWidget__zIndex {
+  z-index: 9999;
+}