Apo 1022 seacoast search bar alignment

packages/web-shared/components/Profile/Profile.js

@@ -26,7 +26,7 @@ import themeGet from '@styled-system/theme-get';
 import { logout, useAuth } from '../../providers/AuthProvider';
 import authSteps from '../Auth/authSteps';
 
-const Profile = ({ theme, handleCloseProfile, ...rest }) => {
+const Profile = ({ theme, handleCloseProfile, size, ...rest }) => {
   const { currentUser } = useCurrentUser();
   const { currentChurch } = useCurrentChurch();
 
@@ -85,11 +85,13 @@ const Profile = ({ theme, handleCloseProfile, ...rest }) => {
             _: '0%',
             sm: 'xxl',
           }}
-          width={{
-            _: '100%',
-            sm: '350px',
-            md: '520px',
-          }}
+          width={
+            size ?? {
+              _: '100%',
+              sm: '350px',
+              md: '520px',
+            }
+          }
         >
           <Box display="flex" alignItems="center" justifyContent="end">
             <Styled.CloseIcon onClick={handleCloseProfile}>

packages/web-shared/components/Profile/Profile.styles.js

@@ -12,7 +12,7 @@ const Profile = withTheme(styled.div`
   position: absolute;
   transition: opacity 0.3s ease;
   z-index: 9999;
-  right: 0;
+  right: -15px;
 
   @media screen and (max-width: ${themeGet('breakpoints.sm')}) {
     position: fixed;

packages/web-shared/components/Profile/ProfileButton.js

@@ -32,7 +32,9 @@ const ProfileButton = (props) => {
           </Box>
         )}
       </Box>
-      {showProfile ? <Profile handleCloseProfile={() => setShowProfile(false)} /> : null}
+      {showProfile ? (
+        <Profile handleCloseProfile={() => setShowProfile(false)} size={props.popupSize} />
+      ) : null}
     </Box>
   );
 };

packages/web-shared/components/Searchbar/Searchbar.js

@@ -161,7 +161,7 @@ const Searchbar = (props = {}) => {
             </Styled.InterfaceWrapper>
           </Styled.Interface>
           <Box p={16}>
-            <ProfileButton />
+            <ProfileButton popupSize={searchState.searchProfileSize} />
           </Box>
         </Box>
         <SearchResults autocompleteState={autocompleteState} autocomplete={autocompleteInstance} />

packages/web-shared/embeds/Main.js

@@ -61,6 +61,7 @@ const Main = ({ type }) => {
                 type={widget.dataset.type}
                 church={widget.dataset.church}
                 searchFeed={widget.dataset.searchFeed}
+                searchProfileSize={widget.dataset.searchProfileSize}
                 featureFeed={widget.dataset.featureFeed}
                 modal={widget.dataset.modal}
                 emptyPlaceholderText={widget.dataset.emptyPlaceholderText}

packages/web-shared/providers/AppProvider.js

@@ -35,6 +35,7 @@ function AppProvider(props = {}) {
             <SearchProvider
               church={props.church}
               searchFeed={props.searchFeed}
+              searchProfileSize={props.searchProfileSize}
               customPlaceholder={props.customPlaceholder}
             >
               <ModalProvider>

packages/web-shared/providers/SearchProvider.js

@@ -8,6 +8,7 @@ const SearchDispatchContext = createContext();
 const initialState = {
   church: null,
   searchFeed: null,
+  searchProfileSize: null,
   customPlaceholder: null,
   loading: true,
 };
@@ -37,6 +38,7 @@ function SearchProvider(props = {}) {
     ...initialState, // spread the original initialState object
     church: props.church, // add church to state
     searchFeed: props.searchFeed, // add search feed id to state
+    searchProfileSize: props.searchProfileSize, // specify a custom width for the profile popup
     customPlaceholder: props.customPlaceholder, // add search custom placeholder to state
   });
 

web-embeds/src/App.js

@@ -24,6 +24,9 @@ function App() {
   const searchFeed = searchElement
     ? searchElement.getAttribute("data-search-feed")
     : null;
+  const searchProfileSize = searchElement
+    ? searchElement.getAttribute("data-search-profile-size")
+    : null;
   const church = churchElement
     ? churchElement.getAttribute("data-church")
     : null;
@@ -57,6 +60,7 @@ function App() {
     <AppProvider
       church={church}
       searchFeed={searchFeed}
+      searchProfileSize={searchProfileSize}
       customPlaceholder={customPlaceholder}
       usePathRouter={usePathRouter}
     >