Add responsive mobile layout and improve viewport handling
Introduced CSS classes for targeted styling and implemented responsive breakpoints for mobile devices. Enhanced TopBar and AdminPanel layouts to adapt to smaller screens with reorganized grid structures and improved touch targets. Updated shell container to use dynamic viewport height (dvh) and added safe area insets for better mobile browser compatibility. Adjusted button sizes, spacing, and element wrapping for improved usability on narrow
This commit is contained in:
@@ -89,24 +89,25 @@ export default function AdminPanel() {
|
||||
{users.map((u) => (
|
||||
<div
|
||||
key={u.id}
|
||||
className="hp-admin-user-row"
|
||||
style={{
|
||||
...styles.userRow,
|
||||
gridTemplateColumns: "1fr 1fr 80px 90px 92px",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<div style={{ color: stylesTokens.textMain, fontWeight: 900 }}>
|
||||
<div className="hp-admin-name" style={{ color: stylesTokens.textMain, fontWeight: 900 }}>
|
||||
{u.display_name || "—"}
|
||||
</div>
|
||||
<div style={{ color: stylesTokens.textDim, fontSize: 13 }}>{u.email}</div>
|
||||
<div style={{ textAlign: "center", fontWeight: 900, color: stylesTokens.textGold }}>
|
||||
<div className="hp-admin-email" style={{ color: stylesTokens.textDim, fontSize: 13 }}>{u.email}</div>
|
||||
<div className="hp-admin-role" style={{ textAlign: "center", fontWeight: 900, color: stylesTokens.textGold }}>
|
||||
{u.role}
|
||||
</div>
|
||||
<div style={{ textAlign: "center", opacity: 0.85, color: stylesTokens.textMain }}>
|
||||
<div className="hp-admin-status" style={{ textAlign: "center", opacity: 0.85, color: stylesTokens.textMain }}>
|
||||
{u.disabled ? "disabled" : "active"}
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="hp-admin-action"
|
||||
onClick={() => deleteUser(u)}
|
||||
style={{
|
||||
...styles.secondaryBtn,
|
||||
|
||||
Reference in New Issue
Block a user