.table__wrapper { overflow-x: auto; } .table__header { display: flex; justify-content: space-between; border-bottom: 1px solid var(--color-border); .section__subtitle { margin-bottom: 0; } } .table__header-text { width: 100%; margin: var(--spacing-medium) var(--spacing-large); } .table__header-text--between { @extend .table__header-text; display: flex; justify-content: space-between; @media (max-width: $breakpoint-small) { flex-wrap: wrap; } } .table--help { td:nth-of-type(1) { min-width: 130px; } td:nth-of-type(2) { @include constrict(20vw); } } .table--transactions { td:nth-of-type(3) { // Only add ellipsis to the links in the table // We still want to show the entire message if a TX includes one a, button { @include constrict(10rem); vertical-align: bottom; display: inline-block; } } } .table--rewards { td:nth-of-type(1) { width: 40%; } td:nth-of-type(2) { width: 17.5%; } td:nth-of-type(3) { width: 17.5%; } td:nth-of-type(4) { width: 25%; } } .table--invites { svg { margin-bottom: -2px; margin-left: var(--spacing-small); } } .table--file-details { td:nth-of-type(1) { width: 30%; } td:nth-of-type(2) { width: 70%; } } .table__item--actionable { vertical-align: middle; white-space: nowrap; .button { height: 1.5rem; padding: var(--spacing-s); margin-left: var(--spacing-m); } }