Hey guys, I found out that ul’s have default styling for chrome and I tried to add list-style-position: inside but it didn’t really fix it. A horrible tacky way would be to move the margin, but why does this happen?
Here is the return on the component:
return (
<div>
<div className="page-sub-title">Site Users: Page {pageNumber}</div>
<div className="site-users-list-container">
<ul className="site-users-list">
{data.users.map((user) => {
return (
<li key={user.id}>
<div className="user-info">
<p>
ID: <span className="user-id">{user.id}</span>
</p>
<p>
<span className="user-username">{user.username}</span>
</p>
<p>
<span className="user-role">{user.role}</span>
</p>
</div>
<div className="admin-btns-container">
<button disabled>User's Profile</button>
<button
className="secondaryBtn"
onClick={async (e) => {
e.preventDefault();
const response = await removeUser({
variables: {
id: user.id,
},
});
if (response) {
alert(`Removed User:${user.username} ID:${user.id}`);
}
}}
>
Delete User
</button>
</div>
</li>
);
})}
</ul>
</div>
<div className="userlist-btn-container">
{skipUsers !== 0 ? (
<button
className="commonBtn"
onClick={() => handleClick('admin', 0, 12)}
>
Prev
</button>
) : (
<div />
)}
{data.users.length === 12 ? (
<button
className="commonBtn"
onClick={() => handleClick('admin', 12, 12)}
>
Next
</button>
) : (
<div />
)}
</div>
</div>
);