From f1282c3128681efa2c7e71dc9cf052cd82ed4cd7 Mon Sep 17 00:00:00 2001
From: Marlene Simondant <msimondant@grandlyon.com>
Date: Wed, 31 Jul 2024 16:15:11 +0200
Subject: [PATCH 1/2] fix(accessibility): orientation recap on tiny screens
---
.../orientation-recap/orientation-recap.component.scss | 7 ++++++-
.../components/print-header/print-header.component.scss | 3 ++-
2 files changed, 8 insertions(+), 2 deletions(-)
diff --git a/src/app/form/orientation-form-view/global-components/orientation-recap/orientation-recap.component.scss b/src/app/form/orientation-form-view/global-components/orientation-recap/orientation-recap.component.scss
index 98ece5710..44c344c6f 100644
--- a/src/app/form/orientation-form-view/global-components/orientation-recap/orientation-recap.component.scss
+++ b/src/app/form/orientation-form-view/global-components/orientation-recap/orientation-recap.component.scss
@@ -14,7 +14,12 @@
flex-direction: column;
gap: 32px;
margin-top: 32px;
- width: 600px;
+ width: 100vw;
+ max-width: 600px;
+ overflow-wrap: anywhere;
+ ::ng-deep button {
+ overflow-wrap: break-word;
+ }
@media print {
gap: 24px;
margin-top: 24px;
diff --git a/src/app/shared/components/print-header/print-header.component.scss b/src/app/shared/components/print-header/print-header.component.scss
index f1759e0fa..a754f7dbe 100644
--- a/src/app/shared/components/print-header/print-header.component.scss
+++ b/src/app/shared/components/print-header/print-header.component.scss
@@ -13,7 +13,8 @@
}
.container {
- width: 600px;
+ width: 100vw;
+ max-width: 600px;
@media print {
width: 100%;
}
--
GitLab
From 72ac77f158d1611ad33379bdaf33b3443bb79b71 Mon Sep 17 00:00:00 2001
From: Marlene Simondant <msimondant@grandlyon.com>
Date: Thu, 1 Aug 2024 14:04:46 +0200
Subject: [PATCH 2/2] improve accessibility of the rest of the orientation form
---
.../orientation-form-view/orientation-form-view.component.scss | 2 +-
src/app/shared/components/textarea/textarea.component.scss | 3 ++-
2 files changed, 3 insertions(+), 2 deletions(-)
diff --git a/src/app/form/orientation-form-view/orientation-form-view.component.scss b/src/app/form/orientation-form-view/orientation-form-view.component.scss
index 5eb102d86..e59c89f0f 100644
--- a/src/app/form/orientation-form-view/orientation-form-view.component.scss
+++ b/src/app/form/orientation-form-view/orientation-form-view.component.scss
@@ -75,7 +75,7 @@ div.titleform {
display: flex;
flex-direction: column;
gap: 40px;
- width: 100%;
+ width: 100vw;
max-width: 600px;
}
diff --git a/src/app/shared/components/textarea/textarea.component.scss b/src/app/shared/components/textarea/textarea.component.scss
index 01fe84bad..9e7268b2f 100644
--- a/src/app/shared/components/textarea/textarea.component.scss
+++ b/src/app/shared/components/textarea/textarea.component.scss
@@ -4,7 +4,8 @@
.inputContainer {
display: flex;
flex-direction: column;
- width: 600px;
+ width: 100vw;
+ max-width: 600px;
&.disabled {
cursor: not-allowed;
label {
--
GitLab