Fix account table display on small devices

This commit is contained in:
Edgar P. Burkhart 2024-01-05 08:56:16 +01:00
parent a6e84fbc13
commit 0ff191e0a4
Signed by: edpibu
GPG key ID: 9833D3C5A25BD227
3 changed files with 35 additions and 32 deletions

View file

@ -114,7 +114,7 @@ main {
display: grid; display: grid;
column-gap: var(--gap); column-gap: var(--gap);
row-gap: var(--gap); row-gap: var(--gap);
grid-template-columns: 1fr; grid-template-columns: 100%;
@media (width > 720px) { @media (width > 720px) {
grid-template-columns: max-content 1fr; grid-template-columns: max-content 1fr;
} }

View file

@ -1,6 +1,7 @@
.table, .table,
form { form {
overflow-x: auto; overflow-x: auto;
width: 100%;
} }
table { table {
border-collapse: collapse; border-collapse: collapse;

View file

@ -11,6 +11,7 @@
<div class="split"> <div class="split">
<section class="accounts"> <section class="accounts">
<h2>{% translate "Accounts" %}</h2> <h2>{% translate "Accounts" %}</h2>
<div class="table">
<table> <table>
<thead> <thead>
<tr> <tr>
@ -45,6 +46,7 @@
</tr> </tr>
</tfoot> </tfoot>
</table> </table>
</div>
</section> </section>
<section class="categories"> <section class="categories">
<h2>{% translate "Categories" %}</h2> <h2>{% translate "Categories" %}</h2>