Truncate long column names in column settings buttons
This commit is contained in:
parent
7566ecfac8
commit
9047c54b03
2 changed files with 12 additions and 3 deletions
|
@ -116,8 +116,10 @@
|
||||||
{#each displayColumns as column}
|
{#each displayColumns as column}
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<Icon size="S" name={getColumnIcon(column)} />
|
<Icon size="S" name={getColumnIcon(column)} />
|
||||||
|
<div class="column-label" title={column.label}>
|
||||||
{column.label}
|
{column.label}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<ToggleActionButtonGroup
|
<ToggleActionButtonGroup
|
||||||
on:click={e => toggleColumn(column, e.detail)}
|
on:click={e => toggleColumn(column, e.detail)}
|
||||||
value={columnToPermissionOptions(column)}
|
value={columnToPermissionOptions(column)}
|
||||||
|
@ -139,7 +141,8 @@
|
||||||
display: grid;
|
display: grid;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
grid-template-columns: 1fr auto;
|
grid-template-columns: 1fr auto;
|
||||||
gap: 8px;
|
grid-row-gap: 8px;
|
||||||
|
grid-column-gap: 24px;
|
||||||
}
|
}
|
||||||
.columns :global(.spectrum-Switch) {
|
.columns :global(.spectrum-Switch) {
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
|
@ -148,4 +151,11 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
}
|
}
|
||||||
|
.column-label {
|
||||||
|
min-width: 80px;
|
||||||
|
max-width: 200px;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -29,7 +29,6 @@
|
||||||
.permissionPicker {
|
.permissionPicker {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: var(--spacing-xs);
|
gap: var(--spacing-xs);
|
||||||
padding-left: calc(var(--spacing-xl) * 2);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.permissionPicker :global(.spectrum-Icon) {
|
.permissionPicker :global(.spectrum-Icon) {
|
||||||
|
|
Loading…
Reference in a new issue