diff --git a/front/src/features/app/App.css b/front/src/features/app/App.css
index 7ce552c9..5b32ce7f 100644
--- a/front/src/features/app/App.css
+++ b/front/src/features/app/App.css
@@ -11,24 +11,54 @@
gap: 16px;
padding: 24px;
- & > *:nth-child(odd) {
- justify-self: end;
- }
-
- & > *:nth-child(even) {
- justify-self: start;
- }
-
@media (max-width: 576px) {
grid-template:
'outcome'
'income'
'history'
'stats';
+ }
+}
+
+.income {
+ grid-area: income;
+ justify-self: start;
+
+ max-width: 500px;
+
+ @media (max-width: 768px) {
+ width: 100%;
+ }
+ @media (max-width: 576px) {
+ justify-self: stretch;
+ }
+}
- & > *:nth-child(even),
- & > *:nth-child(odd) {
- justify-self: stretch;
- }
+.outcome {
+ grid-area: outcome;
+
+ justify-self: end;
+ max-width: 500px;
+
+ @media (max-width: 768px) {
+ width: 100%;
+ }
+ @media (max-width: 576px) {
+ justify-self: stretch;
+ }
+}
+
+.history {
+ grid-area: history;
+ justify-self: center;
+
+ min-width: 1016px;
+
+ @media (max-width: 1064px) {
+ min-width: 100%;
+ }
+
+ @media (max-width: 576px) {
+ justify-self: stretch;
}
}
diff --git a/front/src/features/app/App.tsx b/front/src/features/app/App.tsx
index 89fca411..16bbd4b9 100644
--- a/front/src/features/app/App.tsx
+++ b/front/src/features/app/App.tsx
@@ -7,10 +7,10 @@ import { Stats } from './features/stats'
export const App = () => (
<>