Main page (transactions) is now responsive

src/components/Transactions/Table.tsx

@@ -49,9 +49,9 @@ export default () => {
                             <TableCell component="th" scope="row">
                                 {row.date.toLocaleDateString()}
                             </TableCell>
-                            <TableCell>{row.description}</TableCell>
+                            <TableCell className="description">{row.description}</TableCell>
                             <TableCell align="right" className={"amount " + (row.amount < 0 ? "negative" : "positive")}>{CHF_currency(row.amount)}</TableCell>
-                            <TableCell align="right">{CHF_currency(row.total)}</TableCell>
+                            <TableCell align="right" className="total">{CHF_currency(row.total)}</TableCell>
                         </TableRow>
                     ))}
                 </TableBody>

src/scss/transactions.scss

@@ -1,6 +1,7 @@
 @use "style.scss";
 @import "variables.module.scss";
 
+
 body.transactions {
     background-image: url("/public/backgroundCurvyLines.png");
 
@@ -67,6 +68,15 @@ body.transactions {
             // justify-content: center;
             align-items: center;
 
+            .description {
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                // overflow: hidden;
+            }
+            .amount, .total{ 
+                min-width: 6em;
+            }
+
             .amount.positive {
                 color: $fg-green;
             }
@@ -79,13 +89,14 @@ body.transactions {
         aside {
             grid-column: 1;
             grid-row: 2;
+            min-width: 173px;
 
             form {
                 display: flex;
                 padding: 7px;
                 justify-content: space-evenly;
                 flex-direction: column;
-                padding-top:1em;
+                padding-top: 1em;
 
                 .input {
                     margin: .4em 0;
@@ -95,4 +106,64 @@ body.transactions {
             }
         }
     }
+
+    @media only screen and (max-width: 1044px) {
+        div#tablePage {
+            grid-template-columns: 1fr;
+            grid-template-rows: 1fr 1fr 10fr 1fr;
+
+            header,
+            main,
+            aside,
+            footer {
+                grid-column: 1;
+            }
+
+            header {
+                grid-row: 1;
+                position: sticky;
+                .box.left {
+                    display: none;
+                }
+            }
+
+            aside {
+                grid-row: 2;
+
+                min-width: 0;
+                form {
+                    flex-direction: row;
+
+                    h3 {
+                        display: none;
+                    }
+
+                    h2 {
+                        text-align: center;
+                    }
+
+                    .inputs-box {
+                        // background: red;
+                        width: 50vw;
+                        display: flex;
+                        flex-direction: row;
+                        justify-content: space-evenly;
+
+                        .input {
+                            // background: blue;
+                            width: 10em;
+                        }
+                    }
+                }
+            }
+
+            main {
+                grid-row: 3;
+            }
+
+            footer {
+                grid-row: 4;
+            }
+        }
+    }
 }