From 7c77f128b115899d5ea96590509ad8271f5b6453 Mon Sep 17 00:00:00 2001
From: "abhishek.rdx" <codeforstartups@gmail.com>
Date: Thu, 23 Jan 2025 00:57:11 +0530
Subject: [PATCH 1/2] Fix: Scrollablity issue for discord users page

---
 users/discord/App.js                          | 20 +++++++++++++------
 .../discord/components/UserDetailsSection.js  |  1 -
 users/discord/style.css                       | 19 ++++++++++--------
 3 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/users/discord/App.js b/users/discord/App.js
index 2fe6dc37..904d7173 100644
--- 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
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..39b47a54 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%; /* 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;

From f573796db7dfc93437cecceab38e47397ef4ddf4 Mon Sep 17 00:00:00 2001
From: "abhishek.rdx" <codeforstartups@gmail.com>
Date: Thu, 23 Jan 2025 01:04:45 +0530
Subject: [PATCH 2/2] Fix: Scrollablity issue for discord users

---
 users/discord/App.js    | 2 --
 users/discord/style.css | 4 ++--
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/users/discord/App.js b/users/discord/App.js
index 904d7173..78c89dd0 100644
--- a/users/discord/App.js
+++ b/users/discord/App.js
@@ -57,7 +57,6 @@ export const App = () => {
     return createElement('main', {}, [
       TabsSection({ tabs, activeTab, handleTabNavigation }),
 
-      // Scrollable users section
       createElement('div', { class: 'users_section' }, [
         UsersSection({
           users,
@@ -66,7 +65,6 @@ export const App = () => {
         }),
       ]),
 
-      // Fixed user details section
       createElement('div', { class: 'user_details_section' }, [
         UserDetailsSection({ user: users[showUser] ?? {} }),
       ]),
diff --git a/users/discord/style.css b/users/discord/style.css
index 39b47a54..077af50d 100644
--- a/users/discord/style.css
+++ b/users/discord/style.css
@@ -16,7 +16,7 @@ main {
   grid-template-areas:
     'tab tab '
     'aside details';
-  height: 100%; /* Ensure full page height */
+  height: 100%;
 }
 
 .tabs_section {
@@ -67,7 +67,7 @@ main {
   padding: 1rem;
   background-color: var(--light-gray);
   position: sticky;
-  height: 100%; /* Fill available space */
+  height: 100%;
 }
 
 .user_details_field {