Merge pull request #40 from ArielMAJ/fix/adjust-css-to-consider-dynamic-view

Fix/adjust css to consider dynamic view

Author: ArielMAJ

package-lock.json

@@ -1,9 +1,9 @@
 {
   "name": "finances-manager",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
+    "start": "ng serve --host 0.0.0.0",
     "start:prod": "ng serve --configuration production",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",

package.json

@@ -1,6 +1,6 @@
 .modal-container {
   overflow-y: scroll;
-  max-height: 90vh;
+  max-height: 90dvh;
 }
 
 .modal-container::-webkit-scrollbar {
@@ -30,7 +30,7 @@
 .modal-body {
   display: flex;
   flex-wrap: wrap;
-  gap: 24px;
+  gap: 8px;
 }
 
 .modal-form {
@@ -57,7 +57,7 @@
 .button-group {
   display: flex;
   justify-content: space-between;
-  gap: 16px;
+  gap: 8px;
 }
 
 .button-group button {
@@ -70,7 +70,7 @@ button {
 
 @media (max-width: 768px) {
   .modal-card {
-    gap: 16px;
+    gap: 0px;
     padding: 16px;
   }
 

src/app/components/financial-transaction/financial-transaction.component.css

@@ -5,8 +5,8 @@
 }
 
 .outer {
-  padding-bottom: 5vw;
-  width: 100vw;
+  padding-bottom: 5dvw;
+  width: 100dvw;
 }
 
 h1 {
@@ -83,7 +83,7 @@ mat-card,
 
 .transaction-cell {
   text-align: right;
-  padding-right: 4vw;
+  padding-right: 4dvw;
   max-width: 80px;
   text-wrap: nowrap;
 }
@@ -110,7 +110,7 @@ th,
 
 .description-cell {
   width: auto;
-  max-width: 40vw;
+  max-width: 40dvw;
   overflow-wrap: break-word;
 }
 
@@ -152,14 +152,14 @@ th,
   }
 
   .description-cell {
-    max-width: 26vw;
+    max-width: 26dvw;
   }
 }
 
 @media (max-width: 432px) {
   mat-card,
   table {
-    width: 90vw;
+    width: 90dvw;
     margin: auto;
     padding: 0;
   }
@@ -171,6 +171,6 @@ th,
   }
 
   .description-cell {
-    max-width: 23vw;
+    max-width: 23dvw;
   }
 }

src/app/pages/dashboard/dashboard.component.css

@@ -2,7 +2,7 @@
   font-family: "Roboto", sans-serif;
   background-color: #f4f6f8;
   display: flex;
-  min-height: 98vh;
+  min-height: 98dvh;
   padding: 1vh 0;
 }
 
@@ -111,7 +111,7 @@ mat-icon {
 
 @media (max-width: 480px) {
   .login-content {
-    max-width: 83vw;
+    max-width: 83dvw;
     padding: 15px;
   }
 

src/app/pages/login/login.component.scss

@@ -1,13 +1,13 @@
 .outer {
   font-family: Arial, sans-serif;
   display: flex;
-  min-height: 100vh;
+  min-height: 100dvh;
   background: linear-gradient(135deg, #cc092f 10%, #fdfdfd 60%);
 }
 
 .container {
   width: 800px;
-  max-width: 98vw;
+  max-width: 98dvw;
   padding: 20px;
   box-sizing: border-box;
   margin: auto;

src/app/pages/register/register.component.scss

@@ -2,13 +2,13 @@
   font-family: Arial, sans-serif;
   display: flex;
   flex-direction: column;
-  min-height: 100vh;
+  min-height: 100dvh;
   background: #cc092f;
 }
 
 .container {
   width: 800px;
-  max-width: 98vw;
+  max-width: 98dvw;
   padding: 20px;
   box-sizing: border-box;
   margin: auto;