From 1e63ed97265142d3c60b5b465aacfd1632c66a11 Mon Sep 17 00:00:00 2001
From: Nico <Nico>
Date: Tue, 31 Mar 2026 01:12:35 -0700
Subject: [PATCH] style: separate member card actions into footer

---
 .../src/components/manage/ManageHousehold.jsx | 12 ++++----
 .../components/manage/ManageHousehold.css     | 29 +++++++++++++------
 2 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/manage/ManageHousehold.jsx b/frontend/src/components/manage/ManageHousehold.jsx
index 94147c0..01cedb6 100644
--- a/frontend/src/components/manage/ManageHousehold.jsx
+++ b/frontend/src/components/manage/ManageHousehold.jsx
@@ -545,16 +545,18 @@ export default function ManageHousehold() {
 
               return (
                 <div key={member.id} className="member-card">
-                  <div className="member-avatar" aria-hidden="true">{roleMeta.icon}</div>
-                  <div className="member-info">
-                    <div className="member-topline">
+                  <div className="member-main">
+                    <div className="member-avatar" aria-hidden="true">{roleMeta.icon}</div>
+                    <div className="member-info">
+                      <div className="member-topline">
                       <span className={`member-role member-role-${member.role}`}>
                         {roleMeta.icon} {roleMeta.label}
                       </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>
-                    <span className="member-name">{member.username}</span>
-                    <span className="member-meta">ID #{member.id}</span>
                   </div>
                   {isManager && !isSelf && member.role !== "owner" && (
                     <div className="member-actions">
diff --git a/frontend/src/styles/components/manage/ManageHousehold.css b/frontend/src/styles/components/manage/ManageHousehold.css
index 3d029ba..8e4ac99 100644
--- a/frontend/src/styles/components/manage/ManageHousehold.css
+++ b/frontend/src/styles/components/manage/ManageHousehold.css
@@ -381,10 +381,9 @@ body.dark-mode .invite-status-badge.is-used {
 }
 
 .member-card {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
-  gap: 0.85rem;
-  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  gap: 0.9rem;
   padding: 0.95rem 1rem;
   background: rgba(255, 255, 255, 1);
   border: 1px solid var(--border);
@@ -420,6 +419,13 @@ body.dark-mode .member-card:hover {
   font-size: 1.15rem;
 }
 
+.member-main {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 0.85rem;
+  align-items: flex-start;
+}
+
 .member-info {
   display: flex;
   flex-direction: column;
@@ -489,7 +495,10 @@ body.dark-mode .member-card:hover {
   display: flex;
   gap: 0.55rem;
   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 {
@@ -518,6 +527,11 @@ body.dark-mode .member-role-action:hover:not(:disabled) {
   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 {
   border-color: color-mix(in srgb, var(--danger) 30%, transparent);
@@ -623,12 +637,9 @@ body.dark-mode .danger-zone {
     grid-template-columns: 1fr;
   }
 
-  .member-card {
-    grid-template-columns: auto 1fr;
-  }
-
   .member-actions {
     width: 100%;
+    justify-content: flex-start;
   }
 
   .member-actions button,