done users and roles page responsive view review nalang ang polish

frontend/src/app/users/[usersId]/styles.module.css

@@ -1,11 +1,11 @@
-.addUserContainer {
+.editUserContainer {
   display: flex;
   padding: 0px 144px 0 144px;
-  align-items: flex-start;
+  /* align-items: flex-start; */
   gap: 24px;
   flex: 1 0 0;
   align-self: stretch;
-  position: relative;
+  /* position: relative; */
 }
 .inputFieldContainer {
   display: flex;
@@ -24,6 +24,22 @@
   border-radius: 6px;
   background: #1d1e2a;
 }
+
+.imanginaryDiv {
+  padding: 18px;
+}
+.userPermissions {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1 0 0;
+  align-self: stretch;
+  height: calc(100vh - 175px);
+  position: relative;
+  overflow-y: auto;
+  scrollbar-width: none;
+  padding-bottom: 60px;
+}
 .header {
   display: flex;
   padding-bottom: 24px;
@@ -42,7 +58,6 @@
 .header > div > p {
   width: 163px;
   color: #d2d3e1;
-  color: color(display-p3 0.8235 0.8275 0.8784);
   font-family: Inter;
   font-size: 20px;
   font-style: normal;
@@ -113,6 +128,37 @@
   gap: 8px;
   align-self: stretch;
 }
-.imanginaryDiv {
-  padding: 18px;
+
+@media (max-width: 950px) {
+  .hiddenMobile {
+    display: none;
+  }
+  .editUserContainer {
+    align-self: stretch;
+    padding: 0 16px;
+    flex-direction: column;
+    gap: 0px;
+  }
+  .imanginaryDiv {
+    padding: 5px;
+  }
+  .header {
+    display: none;
+  }
+  .userDetails {
+    background: none;
+    padding: 0px 0px 0px 0px;
+    margin-top: 32x;
+  }
+
+  .userPermissions {
+    height: calc(100vh - 295px);
+  }
+}
+@media (max-width: 768px) {
+  .userDetails {
+    background: none;
+    padding: 0px 0px 0px 0px;
+    width: 100%;
+  }
 }