radicle/radicle-explorer
1
0
Fork 0
mirror of https://seed.radicle.dev/rad:z4V1sjrXqjvFdnCUbxPFqd5p4DtH5.git synced 2026-10-31 01:00:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

Match the reaction and edit button sizes

Browse Source 
The reaction trigger sits in a block wrapper, so its icon formed a line
box and took the leading with it, leaving the button taller than the
edit one beside it. It also carried its own padding, colour and hover
fill, on top of the ones the action around it already provides.

The action is now a fixed square with its content centred, so its size
no longer depends on the shape of whatever it wraps.
This commit is contained in:
Brandon Oxendine
2026-08-27 17:48:32 +02:00
committed by Rūdolfs Ošiņš
parent 66d849faaa
commit 3ac4249651
1 changed files with 15 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Revision.svelte
+15 -1
View File
@@ -1106,19 +1106,33 @@
align-items: center;
gap: 0.125rem;
}
/* A fixed square rather than padding around whatever is nested inside: the
reaction trigger sits in a block wrapper, so its icon forms a line box and
took the leading with it, making the button taller than the edit one. */
.body-action {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 1.5rem;
height: 1.5rem;
background: none;
border: none;
padding: 0.25rem;
padding: 0;
border-radius: var(--border-radius-sm);
cursor: pointer;
color: var(--color-text-tertiary);
opacity: 0;
transition: opacity 150ms ease;
}
/* The trigger brings its own padding, colour and hover fill; the body action
around it already provides all three. */
.body-action :global(.global-icon-button) {
display: flex;
padding: 0;
color: inherit;
background-color: transparent;
}
.patch-body:hover .body-action,
.patch-body:focus-within .body-action,
.body-action:focus-visible {