chore: update dpp and dfr render template on mobile UIs (#183)

uncefact · Dec 16, 2024 · 5f8c113 · 5f8c113
1 parent fb818d5
commit 5f8c113
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 24 deletions.
diff --git a/app-config.json b/app-config.json
diff --git a/packages/components/src/constants/app-config.json b/packages/components/src/constants/app-config.json
diff --git a/packages/mock-app/src/constants/app-config.json b/packages/mock-app/src/constants/app-config.json
diff --git a/packages/mock-app/src/templates/v0.5.0/dfr.hbs b/packages/mock-app/src/templates/v0.5.0/dfr.hbs
@@ -181,7 +181,7 @@
       align-items: flex-start;
       gap: 8px;
 
-      min-width: 336px;
+      min-width: 100%;
       padding: 16px 18px 16px 16px;
       position: relative;
       background-color: var(--white);
@@ -339,7 +339,8 @@
     }
 
     .facility-record .cards-traceability {
-      display: flex;
+      display: grid;
+      grid-template-columns: 1fr auto;
       align-items: center;
       justify-content: space-between;
       padding: 8px 0px;
@@ -361,7 +362,6 @@
     .facility-record .company-name-wrapper {
       display: flex;
       flex-direction: column;
-      width: 260px;
       align-items: flex-start;
       gap: 4px;
     }

diff --git a/packages/mock-app/src/templates/v0.5.0/dpp.hbs b/packages/mock-app/src/templates/v0.5.0/dpp.hbs
@@ -402,7 +402,7 @@
       flex-direction: column;
       align-items: flex-start;
       gap: 8px;
-      min-width: 336px;
+      min-width: 100%;
       padding: 16px 18px 16px 16px;
       position: relative;
       background-color: var(--white);
@@ -563,7 +563,8 @@
     }
 
     .cards-traceability {
-      display: flex;
+      display: grid;
+      grid-template-columns: 1fr auto;
       align-items: center;
       justify-content: space-between;
       padding: 8px 0px;
@@ -624,7 +625,7 @@
     .company-name-wrapper {
       display: flex;
       flex-direction: column;
-      width: 260px;
+      width: 100%;
       align-items: flex-start;
       gap: 4px;
       position: relative;