# 27-Apr-2026 — cleaner Member Admin layout, shared contact dropdowns, and unified admin table styling... [#18](https://github.com/nbarrett/ngx-ramblers/issues/18)

## [build 626](https://github.com/nbarrett/ngx-ramblers/actions/runs/24989456857) — [commit f8c4a2b](https://github.com/nbarrett/ngx-ramblers/commit/f8c4a2bd7257d3be2fbd879f6248348d9918710f)

_____

### Member Admin restyle
- Replaced the heavy dark grey wrapper with a single clean white card
(hairline border, modest padding) so the page sits flush with the rest
of the admin area instead of looking like its own oddly-shaded box.
- Merged the Email and Mobile columns into the Member Name and Mobile
cells using a new shared dropdown. The name itself opens a Send email /
Share / Copy email menu; the mobile number opens Call / SMS / WhatsApp
/ Copy number. The Email column is gone, freeing screen real estate
and making each row noticeably more compact.
- Member Name no longer wraps; the cell expands to fit the full name.
- Sticky horizontal scrolling now keeps both the Edit button and the
Member Name visible as you scroll right, not just the Edit button.
- Light alternating row stripes for easier scanning, applied to the
sticky cells too so the stripe pattern stays consistent across the
whole row.
- Last Bulk Load header markup brought back into line with the rest
(it was a flex outlier in the markup). 
- See screenshot below for new look member admin screen:


![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/335c68be-fbf4-40fb-82a6-08aa9065971b.jpeg)


### Shared admin table styling
- Member Admin, Member Bulk Load, and any other admin table using the
legacy tbl-green-g class or Bootstrap's plain table class now share a
single look: tokenised header background and text, alternating row
stripes, and the same mintcake-tinted hover. Adding more admin tables
in future picks up the styling for free.
- New design tokens in tokens.sass for table header background and text
and for the row stripe colour, used by both Member Admin and the Walk
History audit so the two read as siblings.


![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/bc1d12e5-5c70-4449-b129-605771df8da1.jpeg)


### Walk Edit / tabs
- Fixed a CSS shorthand bug in tabs.sass that was silently killing the
margin below the main tab strip (an invalid five-value margin was
being dropped by the browser). Tab content now has proper breathing
room — the long-standing "everything is too close to the tab" feel
goes away once the rule actually applies.
- Tightened the global thumbnail padding so framed sections don't
swallow as much vertical space.

### Walk history audit
- Added the missing column header row (Date / Member / Event Type /
Notes) so the audit list reads as a table.
- Unified its column header colours and row stripes with the new shared
tokens so it matches the Member Admin look exactly.

![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/b17401d0-080f-4983-b411-ad2504e018fa.jpeg)



### Shared scaffolding
- New ContactActionDropdown component in modules/common. It takes a
generic list of actions (label, icon, tooltip, href or onClick) and
is the DRY home for both phone and email dropdowns going forward.
- Both dropdowns now wait ~350ms on hover before opening, so the menu
doesn't pop while the cursor is just passing through.
- WalkLeaderPhoneAction.COPY added so the walks-page leader phone
dropdown also gains a Copy entry.

### Markdown tables and mailman icon
- Add a markdown table style block (markdown.sass) with light borders,
rounded corners, header tint and alternating-row stripes so tables in
CMS-rendered technical articles read as tables (rgba 0.10/0.14
borders, mintcake hover at 0.16, 1rem font, 8px corner radius).
- Add a new ngx:mailman envelope icon to the custom icon pack — filled
paths only, so the polychrome rendering survives iconify processing
(earlier rect/gradient versions rendered as faint gray). 
- Drives the visuals on the new [Mock to Production technical article](https://www.ngx-ramblers.org.uk/how-to/technical-articles/2026-04-27-salesforce-mock-to-production). Example of markdown table formatting is shown below:

![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/6ea2b5e7-e75f-4cf5-867f-1a1ccf13b0be.jpeg)