From b28fe46343735d37c108015c1f2c509a377a7ed7 Mon Sep 17 00:00:00 2001
From: Volha Mardvilka <mardvilka@google.com>
Date: Wed, 27 Mar 2024 12:36:40 +0000
Subject: [PATCH] 328745809: (fix) [a11y] change styles to status card and
 device item for meet requirements dyslexia

---
 .../components/device-item/device-item.component.scss |  7 +++++--
 .../progress-status-card.component.scss               | 11 ++++++++++-
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/modules/ui/src/app/components/device-item/device-item.component.scss b/modules/ui/src/app/components/device-item/device-item.component.scss
index 2d98a38f8..be2d4980a 100644
--- a/modules/ui/src/app/components/device-item/device-item.component.scss
+++ b/modules/ui/src/app/components/device-item/device-item.component.scss
@@ -125,7 +125,7 @@ $border-radius: 12px;
 }
 
 .item-name {
-  padding: 0 16px;
+  padding: 0 2px 0 16px;
   grid-area: name;
   justify-self: start;
   color: $grey-800;
@@ -133,10 +133,13 @@ $border-radius: 12px;
   font-style: normal;
   font-weight: 400;
   line-height: 20px;
-  max-width: 100%;
+  width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  max-width: -webkit-fill-available;
+  max-width: -moz-available;
+  text-align: left;
 }
 
 .item-mac-address {
diff --git a/modules/ui/src/app/pages/testrun/components/progress-status-card/progress-status-card.component.scss b/modules/ui/src/app/pages/testrun/components/progress-status-card/progress-status-card.component.scss
index 6b2ee3835..ddf8a41b8 100644
--- a/modules/ui/src/app/pages/testrun/components/progress-status-card/progress-status-card.component.scss
+++ b/modules/ui/src/app/pages/testrun/components/progress-status-card/progress-status-card.component.scss
@@ -25,7 +25,8 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  width: 295px;
+  min-width: 295px;
+  width: fit-content;
   height: 100%;
   min-height: 152px;
   box-sizing: border-box;
@@ -59,6 +60,10 @@
     white-space: normal;
   }
 
+  .progress-card-result-title {
+    width: 295px;
+  }
+
   .progress-card-status-text,
   .progress-card-result-text {
     display: flex;
@@ -69,6 +74,10 @@
     line-height: 32px;
   }
 
+  .progress-card-status-text {
+    gap: 12px;
+  }
+
   .progress-bar {
     padding-bottom: 28px;
   }