Fix multiple issues with long text overflow
This commit is contained in:
parent
a4aea23bf9
commit
d684ab95f2
6 changed files with 42 additions and 33 deletions
|
@ -19,6 +19,7 @@
|
|||
.icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
flex: 0 0 28px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 50%;
|
||||
|
@ -34,6 +35,7 @@
|
|||
.icon.size--S {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
flex: 0 0 22px;
|
||||
}
|
||||
.icon.size--S :global(.spectrum-Icon) {
|
||||
width: 16px;
|
||||
|
@ -46,6 +48,7 @@
|
|||
.icon.size--L {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
flex: 0 0 40px;
|
||||
}
|
||||
.icon.size--L :global(.spectrum-Icon) {
|
||||
width: 28px;
|
||||
|
|
|
@ -30,9 +30,11 @@
|
|||
<Label>{subtitle}</Label>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="right">
|
||||
<slot />
|
||||
</div>
|
||||
{#if $$slots.default}
|
||||
<div class="right">
|
||||
<slot />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
@ -45,6 +47,7 @@
|
|||
justify-content: space-between;
|
||||
border: 1px solid var(--spectrum-global-color-gray-300);
|
||||
transition: background 130ms ease-out;
|
||||
gap: var(--spacing-m);
|
||||
}
|
||||
.list-item:not(:first-child) {
|
||||
border-top: none;
|
||||
|
|
|
@ -111,25 +111,19 @@
|
|||
</Breadcrumbs>
|
||||
|
||||
<div class="header">
|
||||
<div class="title">
|
||||
<GroupIcon {group} size="L" />
|
||||
<div class="text-padding">
|
||||
<Heading>{group?.name}</Heading>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<ActionMenu align="right">
|
||||
<span slot="control">
|
||||
<Icon hoverable name="More" />
|
||||
</span>
|
||||
<MenuItem icon="Refresh" on:click={() => editModal.show()}>
|
||||
Edit
|
||||
</MenuItem>
|
||||
<MenuItem icon="Delete" on:click={() => deleteModal.show()}>
|
||||
Delete
|
||||
</MenuItem>
|
||||
</ActionMenu>
|
||||
</div>
|
||||
<GroupIcon {group} size="L" />
|
||||
<Heading>{group?.name}</Heading>
|
||||
<ActionMenu align="right">
|
||||
<span slot="control">
|
||||
<Icon hoverable name="More" />
|
||||
</span>
|
||||
<MenuItem icon="Refresh" on:click={() => editModal.show()}>
|
||||
Edit
|
||||
</MenuItem>
|
||||
<MenuItem icon="Delete" on:click={() => deleteModal.show()}>
|
||||
Delete
|
||||
</MenuItem>
|
||||
</ActionMenu>
|
||||
</div>
|
||||
|
||||
<Layout noPadding gap="S">
|
||||
|
@ -243,13 +237,12 @@
|
|||
<style>
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: var(--spacing-m);
|
||||
}
|
||||
.header :global(.spectrum-Heading) {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -8,7 +8,9 @@
|
|||
<div class="align">
|
||||
{#if value}
|
||||
<GroupIcon group={row} />
|
||||
{value}
|
||||
<div class="text">
|
||||
{value}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="text">-</div>
|
||||
{/if}
|
||||
|
@ -20,8 +22,13 @@
|
|||
align-items: center;
|
||||
overflow: hidden;
|
||||
gap: var(--spacing-m);
|
||||
max-width: var(--max-cell-width);
|
||||
flex: 1 1 auto;
|
||||
width: 0;
|
||||
}
|
||||
.text {
|
||||
opacity: 0.8;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -40,9 +40,9 @@
|
|||
]
|
||||
|
||||
$: schema = {
|
||||
name: { displayName: "Group" },
|
||||
users: { sortable: false },
|
||||
roles: { sortable: false, displayName: "Apps" },
|
||||
name: { displayName: "Group", width: "2fr" },
|
||||
users: { sortable: false, width: "1fr" },
|
||||
roles: { sortable: false, displayName: "Apps", width: "1fr" },
|
||||
}
|
||||
$: filteredGroups = filterGroups($groups, searchString)
|
||||
|
||||
|
|
|
@ -56,15 +56,18 @@
|
|||
$: schema = {
|
||||
email: {
|
||||
sortable: false,
|
||||
width: "2fr",
|
||||
},
|
||||
role: {
|
||||
sortable: false,
|
||||
width: "1fr",
|
||||
},
|
||||
...($licensing.groupsEnabled && {
|
||||
userGroups: { sortable: false, displayName: "Groups" },
|
||||
userGroups: { sortable: false, displayName: "Groups", width: "1fr" },
|
||||
}),
|
||||
apps: {
|
||||
sortable: false,
|
||||
width: "1fr",
|
||||
},
|
||||
}
|
||||
$: userData = []
|
||||
|
|
Loading…
Reference in a new issue