fix: rewards table style on small screens

This commit is contained in:
Sean Yesmunt 2019-01-16 11:16:38 -05:00
parent 3303f02ad3
commit a5f790d1d7
2 changed files with 21 additions and 3 deletions
src/renderer
component/rewardListClaimed
scss/component

View file

@ -28,7 +28,7 @@ const RewardListClaimed = (props: Props) => {
<h2 className="card__title">Claimed Rewards</h2> <h2 className="card__title">Claimed Rewards</h2>
</header> </header>
<table className="card__content table table--stretch"> <table className="table table--rewards table--stretch">
<thead> <thead>
<tr> <tr>
<th>{__('Title')}</th> <th>{__('Title')}</th>

View file

@ -27,8 +27,8 @@
color: inherit; color: inherit;
} }
&:not(:first-of-type) { &:not(:last-of-type) {
padding-right: var(--spacing-vertical-medium); padding-right: var(--spacing-vertical-large);
} }
.btn:not(.btn--link) { .btn:not(.btn--link) {
@ -122,3 +122,21 @@
width: 15%; width: 15%;
} }
} }
.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%;
}
}