diff --git a/src/styles/adminDensity.css b/src/styles/adminDensity.css index 9da4025a..0763a2e4 100644 --- a/src/styles/adminDensity.css +++ b/src/styles/adminDensity.css @@ -143,11 +143,11 @@ .admin-density-drawer .el-drawer__footer { padding: var(--admin-space-5) var(--admin-space-6); border-top: 1px solid var(--cc-border); } /* Reusable row action group; no business action names in the shared layer. */ -.admin-density .data-table .density-actions { --cc-list-action-sibling-margin: 0px; display: flex; align-items: center; gap: var(--admin-space-2); } +.admin-density .data-table .density-actions { --cc-list-action-sibling-margin: 0px; display: flex; align-items: center; gap: var(--cc-row-action-gap, var(--admin-space-2)); } .admin-density .data-table .density-actions > :is(.el-button, .el-dropdown) { margin-left: 0; } /* The same action spacing also applies to native tables and teleported content. */ -:is(.admin-density, .admin-density-dialog) .density-actions { display: flex; align-items: center; gap: var(--admin-space-2); } +:is(.admin-density, .admin-density-dialog) .density-actions { display: flex; align-items: center; gap: var(--cc-row-action-gap, var(--admin-space-2)); } :is(.admin-density, .admin-density-dialog) .density-actions > :is(.el-button, .el-dropdown) { margin-left: 0; } .admin-density .density-detail-heading > .density-back { flex-shrink: 0; } diff --git a/src/styles/adminDensity.test.ts b/src/styles/adminDensity.test.ts index c597bcf0..8554dac0 100644 --- a/src/styles/adminDensity.test.ts +++ b/src/styles/adminDensity.test.ts @@ -692,6 +692,33 @@ describe('approved Admin density ownership', () => { expect(read(`modules/${file}`), file).toContain('density-action') } }) + it('halves text action spacing through shared rules while retaining outlined action spacing', () => { + const declarations = new Map>() + cssRoot(read('styles/adminTextActions.css')).walkRules(rule => { + const values: Record = {} + rule.walkDecls(decl => { values[decl.prop] = decl.value }) + declarations.set(rule.selector, values) + }) + expect(declarations.get('.row-actions.admin-text-actions')).toMatchObject({ + '--cc-row-action-gap': 'calc(var(--admin-space-2, 6px) / 2)', + '--cc-list-action-sibling-margin': '0px', + gap: 'var(--cc-row-action-gap)', + }) + const button = declarations.get('.row-actions.admin-text-actions .el-button.el-button')! + expect(button['padding-inline']).toBe('calc(var(--admin-space-4, 10px) / 2)') + expect(button).not.toHaveProperty('height') + expect(button).not.toHaveProperty('font-size') + const groups = new Map() + cssRoot(shared).walkRules(rule => { + if (rule.selector.endsWith(' .density-actions')) { + rule.walkDecls('gap', decl => { groups.set(rule.selector, decl.value) }) + } + }) + expect([...groups.values()]).toEqual([ + 'var(--cc-row-action-gap, var(--admin-space-2))', + 'var(--cc-row-action-gap, var(--admin-space-2))', + ]) + }) it('keeps container evidence and customs summaries compact without duplicating field styles', () => { const overview = read('modules/container-loading/components/ContainerOverviewPanel.vue') const customs = read('modules/container-loading/components/ContainerCustomsPanel.vue') diff --git a/src/styles/adminTextActions.css b/src/styles/adminTextActions.css index 009ef9cc..8d049bfe 100644 --- a/src/styles/adminTextActions.css +++ b/src/styles/adminTextActions.css @@ -3,6 +3,11 @@ --admin-text-action-color: #1677ff; --admin-text-action-danger: #dc2626; } +.row-actions.admin-text-actions { + --cc-row-action-gap: calc(var(--admin-space-2, 6px) / 2); + --cc-list-action-sibling-margin: 0px; + gap: var(--cc-row-action-gap); +} .row-actions.admin-text-actions .el-button.el-button { --text-action-color: var(--admin-text-action-color); --el-button-text-color: var(--text-action-color); @@ -16,6 +21,7 @@ --el-button-active-border-color: transparent; color: var(--text-action-color); font-weight: 400; + padding-inline: calc(var(--admin-space-4, 10px) / 2); border: 0; background: transparent; box-shadow: none;