From f975e1da897b34df0621ecd78ee11d4fc58460b4 Mon Sep 17 00:00:00 2001
From: andreaNeki <andrea.montoya@neki-it.com.br>
Date: Tue, 1 Oct 2024 14:34:43 -0300
Subject: [PATCH] Edit item - making page content more responsive and
 accessible

---
 .../item-status/item-status.component.html       | 16 ++++++++--------
 .../item-status/item-status.component.scss       |  3 +++
 .../item-status/item-status.component.ts         |  1 +
 3 files changed, 12 insertions(+), 8 deletions(-)
 create mode 100644 src/app/item-page/edit-item-page/item-status/item-status.component.scss

diff --git a/src/app/item-page/edit-item-page/item-status/item-status.component.html b/src/app/item-page/edit-item-page/item-status/item-status.component.html
index faad0e679b..30212c4a4c 100644
--- a/src/app/item-page/edit-item-page/item-status/item-status.component.html
+++ b/src/app/item-page/edit-item-page/item-status/item-status.component.html
@@ -1,28 +1,28 @@
 <p class="mt-2">{{'item.edit.tabs.status.description' | translate}}</p>
 <div class="row">
-  <div *ngFor="let statusKey of statusDataKeys" class="w-100">
-    <div class="col-3 float-left status-label">
+  <div *ngFor="let statusKey of statusDataKeys" class="w-100 pt-1">
+    <div class="col-12 col-md-3 float-left status-label">
       {{'item.edit.tabs.status.labels.' + statusKey | translate}}:
     </div>
-    <div class="col-9 float-left status-data" id="status-{{statusKey}}">
+    <div class="col-12 col-md-9 float-left status-data" id="status-{{statusKey}}">
       {{statusData[statusKey]}}
     </div>
   </div>
 
-  <div *ngFor="let identifier of (identifiers$ | async)" class="w-100">
+  <div *ngFor="let identifier of (identifiers$ | async)" class="w-100 pt-1">
     <div *ngIf="(identifier.identifierType==='doi')">
-      <div class="col-3 float-left status-label">
+      <div class="col-12 col-md-3 float-left status-label">
         {{identifier.identifierType.toLocaleUpperCase()}}
       </div>
-      <div class="col-9 float-left status-label">{{identifier.value}}
+      <div class="col-12 col-md-9 float-left status-label">{{identifier.value}}
         ({{"item.edit.identifiers.doi.status."+identifier.identifierStatus|translate}})</div>
     </div>
   </div>
 
-  <div class="col-3 float-left status-label">
+  <div class="col-12 col-md-3 float-left status-label">
     {{'item.edit.tabs.status.labels.itemPage' | translate}}:
   </div>
-  <div class="col-9 float-left status-data" id="status-itemPage">
+  <div class="col-12 col-md-9 float-left status-data" id="status-itemPage">
     <a [routerLink]="itemPageRoute$ | async">{{itemPageRoute$ | async}}</a>
   </div>
 
diff --git a/src/app/item-page/edit-item-page/item-status/item-status.component.scss b/src/app/item-page/edit-item-page/item-status/item-status.component.scss
new file mode 100644
index 0000000000..349416cd20
--- /dev/null
+++ b/src/app/item-page/edit-item-page/item-status/item-status.component.scss
@@ -0,0 +1,3 @@
+.status-label {
+  font-weight: 700;
+}
diff --git a/src/app/item-page/edit-item-page/item-status/item-status.component.ts b/src/app/item-page/edit-item-page/item-status/item-status.component.ts
index 1bb17dc77c..0ad500b56f 100644
--- a/src/app/item-page/edit-item-page/item-status/item-status.component.ts
+++ b/src/app/item-page/edit-item-page/item-status/item-status.component.ts
@@ -60,6 +60,7 @@ import { ItemOperation } from '../item-operation/itemOperation.model';
 
 @Component({
   selector: 'ds-base-item-status',
+  styleUrls: ['item-status.component.scss'],
   templateUrl: './item-status.component.html',
   changeDetection: ChangeDetectionStrategy.Default,
   animations: [