Improve table layout and styling in mail-group component

Enhanced `.table-header` and `.table-row` with a grid layout,
column configurations, and improved spacing for better structure.
Added styles for `.table-header` to improve visual hierarchy
and updated `.table-row` with transitions and an `.expanded`
state for better interactivity.

Adjusted `.groups-table .table-row` padding in the media query
for smaller screens to improve responsiveness.

Author: Timothy Dodd

src/MailVoidWeb/src/app/_components/mail-settings-modal/mail-group/mail-group.component.scss

@@ -44,7 +44,26 @@
   overflow: hidden;
 
   .table-header, .table-row {
+    display: grid;
     grid-template-columns: 1.5fr 2fr 0.75fr 1fr 0.75fr;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    align-items: center;
+  }
+
+  .table-header {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--comment);
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+  }
+
+  .table-row {
+    font-size: 0.875rem;
+    padding: 0.625rem 1rem;
+    transition: background-color 0.15s ease;
+    &.expanded { background-color: var(--bGLight); border-bottom-color: transparent; }
   }
 }
 
@@ -109,7 +128,7 @@
 
 @media (max-width: 768px) {
   .groups-table .table-header { display: none; }
-  .groups-table .table-row { grid-template-columns: 1fr; gap: 0.375rem; }
+  .groups-table .table-row { grid-template-columns: 1fr; gap: 0.375rem; padding: 0.75rem 1rem; }
   .col-actions { justify-content: flex-start; margin-top: 0.25rem; }
   .edit-fields { flex-direction: column; }
   .inline-form-body .form-row {