contact card: edit / new in one size, a slash's width apart
The slash takes the buttons' own type, so it sits on their line, and
the two give up their inner padding toward it. Stacked on a phone they
keep their whole padding, their right edges together.
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0186Ru2zvdWEwdwGhQ5V9z5X
diff --git a/public/admin.css b/public/admin.css
index e6056de..3b104ed 100644
--- a/public/admin.css
+++ b/public/admin.css
@@ -1140,13 +1140,24 @@ span.avatar[data-size="lg"] {
.detail-grid dd:has(> [role="group"]) > div:not([role="group"]) {
grid-column: 1;
}
-/* The slash between the pair, set on the buttons' line and close to
- both, their own padding being the space either side of it. */
+/* The slash between the pair, in the buttons' own type so it sits on
+ their baseline rather than a step larger beside it. The buttons give
+ up their inner padding toward it, the slash being the space between
+ them; the outer padding stays, so a hover still fills a box. */
.detail-grid dd > [role="group"] {
align-items: baseline;
}
.detail-grid dd > [role="group"] > span {
font-family: var(--gl-font-mono);
+ font-size: 0.8125rem;
+ line-height: 1.15;
+ padding-inline: var(--gl-space-3xs);
+}
+.detail-grid dd > [role="group"] > button:first-child {
+ padding-inline-end: 0;
+}
+.detail-grid dd > [role="group"] > button:last-child {
+ padding-inline-start: 0;
}
/* On a phone the group stacks and the slash goes, the line break
saying what it said: side by side the two take the tags' column
@@ -1160,6 +1171,12 @@ span.avatar[data-size="lg"] {
.detail-grid dd > [role="group"] > span {
display: none;
}
+ /* With no slash between them the two keep their whole padding, so
+ their right edges stand together. */
+ .detail-grid dd > [role="group"] > button:first-child,
+ .detail-grid dd > [role="group"] > button:last-child {
+ padding-inline: var(--_pad-x);
+ }
.detail-grid dd > [role="group"] > span + button {
margin-block-start: calc(-1 * var(--gl-space-3xs));
}