diff --git a/users/discord/App.js b/users/discord/App.js index 2fe6dc37..78c89dd0 100644 --- a/users/discord/App.js +++ b/users/discord/App.js @@ -56,12 +56,18 @@ export const App = () => { if (users.length) return createElement('main', {}, [ TabsSection({ tabs, activeTab, handleTabNavigation }), - UsersSection({ - users, - showUser, - handleUserSelected, - }), - UserDetailsSection({ user: users[showUser] ?? {} }), + + createElement('div', { class: 'users_section' }, [ + UsersSection({ + users, + showUser, + handleUserSelected, + }), + ]), + + createElement('div', { class: 'user_details_section' }, [ + UserDetailsSection({ user: users[showUser] ?? {} }), + ]), ]); return createElement('main', {}, [ diff --git a/users/discord/components/UserDetailsSection.js b/users/discord/components/UserDetailsSection.js index 655c19bc..58ac0529 100644 --- a/users/discord/components/UserDetailsSection.js +++ b/users/discord/components/UserDetailsSection.js @@ -7,7 +7,6 @@ export const UserDetailsSection = ({ return createElement( 'section', { - class: 'user_details_section', 'data-testid': 'user-details-section', }, [ diff --git a/users/discord/style.css b/users/discord/style.css index c44c8f11..077af50d 100644 --- a/users/discord/style.css +++ b/users/discord/style.css @@ -16,12 +16,7 @@ main { grid-template-areas: 'tab tab ' 'aside details'; -} - -.users_section { - grid-area: aside; - overflow: scroll; - padding-inline: 1rem; + height: 100%; } .tabs_section { @@ -43,6 +38,13 @@ main { border: 2px solid gray; } +.users_section { + grid-area: aside; + overflow-y: auto; + padding-inline: 1rem; + max-height: 20rem; +} + .user_card { padding: 1rem; display: flex; @@ -62,15 +64,16 @@ main { } .user_details_section { - grid-area: details; padding: 1rem; - margin: 0 1rem; background-color: var(--light-gray); + position: sticky; + height: 100%; } .user_details_field { padding: 0.5rem; } + .no_user_found { width: 100vw; text-align: center;