nalalangan/grocery-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: harden reliability checks #2

Merged
nalalangan merged 67 commits from main-new into main 2026-05-25 14:28:32 -09:00
Conversation 0 Commits 67 Files Changed 230 +27 -14
2 changed files with 27 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 1e63ed9726 - Show all commits

12
frontend/src/components/manage/ManageHousehold.jsx
View File

@ -545,16 +545,18 @@ export default function ManageHousehold() {
return ( return (
<div key={member.id} className="member-card"> <div key={member.id} className="member-card">
<div className="member-avatar" aria-hidden="true">{roleMeta.icon}</div> <div className="member-main">
<div className="member-info"> <div className="member-avatar" aria-hidden="true">{roleMeta.icon}</div>
<div className="member-topline"> <div className="member-info">
<div className="member-topline">
<span className={`member-role member-role-${member.role}`}> <span className={`member-role member-role-${member.role}`}>
{roleMeta.icon} {roleMeta.label} {roleMeta.icon} {roleMeta.label}
</span> </span>
{isSelf && <span className="member-self-pill">✨ You</span>} {isSelf && <span className="member-self-pill">✨ You</span>}
</div>
<span className="member-name">{member.username}</span>
<span className="member-meta">ID #{member.id}</span>
</div> </div>
<span className="member-name">{member.username}</span>
<span className="member-meta">ID #{member.id}</span>
</div> </div>
{isManager && !isSelf && member.role !== "owner" && ( {isManager && !isSelf && member.role !== "owner" && (
<div className="member-actions"> <div className="member-actions">

29
frontend/src/styles/components/manage/ManageHousehold.css
View File

@ -381,10 +381,9 @@ body.dark-mode .invite-status-badge.is-used {
} }
.member-card { .member-card {
display: grid; display: flex;
grid-template-columns: auto minmax(0, 1fr); flex-direction: column;
gap: 0.85rem; gap: 0.9rem;
align-items: flex-start;
padding: 0.95rem 1rem; padding: 0.95rem 1rem;
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
border: 1px solid var(--border); border: 1px solid var(--border);
@ -420,6 +419,13 @@ body.dark-mode .member-card:hover {
font-size: 1.15rem; font-size: 1.15rem;
} }
.member-main {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 0.85rem;
align-items: flex-start;
}
.member-info { .member-info {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -489,7 +495,10 @@ body.dark-mode .member-card:hover {
display: flex; display: flex;
gap: 0.55rem; gap: 0.55rem;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: 0.4rem; justify-content: flex-end;
align-items: center;
padding-top: 0.75rem;
border-top: 1px solid color-mix(in srgb, var(--color-border-light) 82%, transparent);
} }
.member-role-action { .member-role-action {
@ -518,6 +527,11 @@ body.dark-mode .member-role-action:hover:not(:disabled) {
color: #f3f9ff; color: #f3f9ff;
} }
[data-theme="dark"] .member-actions,
body.dark-mode .member-actions {
border-top-color: color-mix(in srgb, var(--color-border-medium) 88%, transparent);
}
/* Danger Zone */ /* Danger Zone */
.danger-zone { .danger-zone {
border-color: color-mix(in srgb, var(--danger) 30%, transparent); border-color: color-mix(in srgb, var(--danger) 30%, transparent);
@ -623,12 +637,9 @@ body.dark-mode .danger-zone {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.member-card {
grid-template-columns: auto 1fr;
}
.member-actions { .member-actions {
width: 100%; width: 100%;
justify-content: flex-start;
} }
.member-actions button, .member-actions button,