Fix GridRep aspect ratio

This commit is contained in:
Justin Edmund 2024-04-22 23:56:50 -07:00
parent 0c50fea18b
commit 74710b5f5b
2 changed files with 10 additions and 11 deletions

View file

@ -3,9 +3,6 @@
border: 1px solid transparent; border: 1px solid transparent;
border-radius: $card-corner; border-radius: $card-corner;
box-sizing: border-box; box-sizing: border-box;
display: grid;
grid-template-rows: 1fr 1fr;
gap: $unit;
min-width: 320px; min-width: 320px;
position: relative; position: relative;
width: 100%; width: 100%;
@ -65,8 +62,8 @@
button { button {
position: absolute; position: absolute;
z-index: 2; z-index: 2;
right: $unit; right: $unit-2x;
top: $unit; top: $unit-2x;
width: 44px; width: 44px;
} }
@ -134,9 +131,9 @@
} }
.weaponGrid { .weaponGrid {
aspect-ratio: 2/0.95; aspect-ratio: 2/0.8;
display: grid; display: grid;
grid-template-columns: 1fr 3.36fr; /* left column takes up 1 fraction, right column takes up 3 fractions */ grid-template-columns: 1fr 3.6fr; /* left column takes up 1 fraction, right column takes up 3 fractions */
grid-gap: $unit; /* add a gap of 8px between grid items */ grid-gap: $unit; /* add a gap of 8px between grid items */
.weapon { .weapon {

View file

@ -561,10 +561,12 @@ const GridRep = ({ party, loading, onClick, onSave }: Props) => {
)} )}
</div> </div>
</div> </div>
{[2, 3].includes(party.visibility) && (
<div className={styles.buttonArea}> <div className={styles.buttonArea}>
{renderPrivateIcon} {renderPrivateIcon}
{renderVisibilityIcon} {renderVisibilityIcon}
</div> </div>
)}
</div> </div>
<div className={styles.attributed}> <div className={styles.attributed}>
{attribution()} {attribution()}