.users-layout { display:grid; grid-template-columns:300px minmax(0,1fr); align-items:start; gap:22px; } .users-layout > .alert { grid-column:1/-1; margin:0; } .add-user-form { margin:0; text-align:left; } .add-user-form .form-check { width:100%; margin-bottom:12px; font-size:12px; } .add-user-form .btn { width:100%; } .users-table { min-width:650px; } .users-table th { font-size:10px; padding:12px 10px; white-space:nowrap; } .users-table td { font-size:12px; padding:14px 10px; } .users-table td:first-child { font-weight:600; } .users-table td:nth-child(3) { font-family:ui-monospace,monospace; white-space:nowrap; } .user-create .form-label { font-size:12px; } @media(max-width:1200px) { .users-layout { grid-template-columns:1fr; } .add-user-form { display:grid; grid-template-columns:1fr 1fr; gap:0 24px; } .add-user-form > .d-flex { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; gap:8px; } .add-user-form > .btn { width:auto; justify-self:start; } } @media(max-width:600px) { .add-user-form { display:block; } .add-user-form > .d-flex { display:flex; align-items:flex-start; gap:0; } }