Fix: Scrollablity issue for discord users page

Real-Dev-Squad · Jan 22, 2025 · 7c77f12 · 7c77f12
1 parent 1dc3328
commit 7c77f12
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 15 deletions.
diff --git a/users/discord/App.js b/users/discord/App.js
@@ -56,12 +56,20 @@ export const App = () => {
   if (users.length)
     return createElement('main', {}, [
       TabsSection({ tabs, activeTab, handleTabNavigation }),
-      UsersSection({
-        users,
-        showUser,
-        handleUserSelected,
-      }),
-      UserDetailsSection({ user: users[showUser] ?? {} }),
+
+      // Scrollable users section
+      createElement('div', { class: 'users_section' }, [
+        UsersSection({
+          users,
+          showUser,
+          handleUserSelected,
+        }),
+      ]),
+
+      // Fixed user details section
+      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
@@ -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
@@ -16,12 +16,7 @@ main {
   grid-template-areas:
     'tab tab '
     'aside details';
-}
-
-.users_section {
-  grid-area: aside;
-  overflow: scroll;
-  padding-inline: 1rem;
+  height: 100%; /* Ensure full page height */
 }
 
 .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%; /* Fill available space */
 }
 
 .user_details_field {
   padding: 0.5rem;
 }
+
 .no_user_found {
   width: 100vw;
   text-align: center;