done users and roles page responsive view review nalang ang polish

frontend/src/app/components/permissions/Permissions.jsx

@@ -20,15 +20,13 @@ const Permissions = ({ sampleData = [] }) => {
           </div>
         </div>
 
-        <div className={editUserStyle.wrapper}>
-          {sampleData.length === 0 ? (
-            // Default Message
-            <div className={editUserStyle.permissionDefaultState}>
-              <p>No permission added yet</p>
-            </div>
-          ) : (
-            // Sampple Data(static)
-            sampleData.map((perm, index) => {
+        {sampleData.length === 0 ? (
+          <div className={editUserStyle.permissionDefaultState}>
+            <p>No permission added yet</p>
+          </div>
+        ) : (
+          <div className={editUserStyle.permissionsList}>
+            {sampleData.map((perm, index) => {
               return (
                 <div className={editUserStyle.permissions} key={index}>
                   <div className={editUserStyle.permissionsItem}>
@@ -40,9 +38,9 @@ const Permissions = ({ sampleData = [] }) => {
                   </div>
                 </div>
               );
-            })
-          )}
-        </div>
+            })}
+          </div>
+        )}
       </div>
     </>
   );

frontend/src/app/components/permissions/styles.module.css

@@ -22,7 +22,6 @@
   align-items: flex-start;
   gap: 5px;
   flex: 1 0 0;
-
   color: #d2d3e1;
   font-family: Inter;
   font-size: 20px;
@@ -53,22 +52,13 @@
   background: #27293b;
 }
 
-.wrapper {
-  display: flex;
-  height: 43.813px;
-  padding: 8px 16px;
-  justify-content: center;
-  align-items: center;
-  align-self: stretch;
-}
-
 .permissionDefaultState {
-  display: flex;
-  justify-content: center;
   align-items: center;
   gap: 12px;
   flex: 1 0 0;
   align-self: stretch;
+  height: 43.813px;
+  padding: 8px 16px;
 }
 .permissionDefaultState p {
   display: flex;
@@ -84,16 +74,19 @@
   font-weight: 400;
   line-height: normal;
 }
-
+.permissionsList {
+  width: 100%;
+}
 .permissions {
   display: flex;
   height: 43.813px;
-  padding: 8px 16px;
+  padding: 8px 8px 8px 16px;
   justify-content: space-between;
   align-items: center;
   align-self: stretch;
   border-bottom: 0.5px solid #2e3042;
 }
+
 .permissions:hover {
   border-bottom: 1px solid rgba(129, 135, 255, 0.25);
   background: rgba(129, 135, 255, 0.05);
@@ -153,21 +146,21 @@
     font-size: 18px;
     align-self: stretch;
   }
+
   .svgContainer {
     display: none;
   }
-
-  .wrapper {
-    display: flex;
-    padding: 24px 16px 0 16px;
-    align-items: flex-start;
-    align-self: stretch;
-  }
   .permissionDefaultState {
     gap: 12px;
     align-self: stretch;
+    padding: 24px 16px 0 16px;
+  }
+  .permissionsList {
+    padding-top: 16px;
+  }
+  .permissions {
+    padding: 8px 16px;
   }
-
   .permissionDefaultState > p {
     font-weight: 500;
     text-align: center;