Add small horiztonal padding to app list table view to improve text overflow

This commit is contained in:
Andrew Kingston 2021-05-07 13:17:49 +01:00
parent 35b9ab353e
commit be28fc2fb8
1 changed files with 5 additions and 4 deletions

View File

@ -44,7 +44,7 @@
Locked by you Locked by you
{/if} {/if}
</div> </div>
<div class="actions"> <div>
<Button on:click={() => openApp(app)} size="S" secondary>Open</Button> <Button on:click={() => openApp(app)} size="S" secondary>Open</Button>
<ActionMenu align="right"> <ActionMenu align="right">
<Icon hoverable slot="control" name="More" /> <Icon hoverable slot="control" name="More" />
@ -71,6 +71,10 @@
align-items: center; align-items: center;
gap: var(--spacing-xl); gap: var(--spacing-xl);
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 5px;
} }
.preview { .preview {
height: 40px; height: 40px;
@ -99,7 +103,4 @@
.status--open { .status--open {
background-color: var(--spectrum-global-color-green-600); background-color: var(--spectrum-global-color-green-600);
} }
.actions {
padding-right: 10px;
}
</style> </style>