From 632d8f286580a0b79247b0596c9c8740fff205bd Mon Sep 17 00:00:00 2001
From: Alan Orth <alan.orth@gmail.com>
Date: Fri, 12 Sep 2025 09:39:15 +0300
Subject: [PATCH 1/3] src/app/item-page: adjust grid in simple item view

The Bootstrap grid is composed of 12 columns, but we are not using
the entire grid, which could lead to unexpected stacking depending
on the viewport size. This also adjusts the columns to be consist-
ent with the sizing use by the search results page (3+9).
---
 .../simple/item-types/publication/publication.component.html  | 4 ++--
 .../item-types/untyped-item/untyped-item.component.html       | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/item-page/simple/item-types/publication/publication.component.html b/src/app/item-page/simple/item-types/publication/publication.component.html
index f5769793132..309327539ab 100644
--- a/src/app/item-page/simple/item-types/publication/publication.component.html
+++ b/src/app/item-page/simple/item-types/publication/publication.component.html
@@ -18,7 +18,7 @@
   <ds-dso-edit-menu></ds-dso-edit-menu>
 </div>
 <div class="row">
-  <div class="col-12 col-md-4">
+  <div class="col-12 col-md-3">
     @if (!(mediaViewer.image || mediaViewer.video)) {
       <ds-metadata-field-wrapper [hideIfNoTextContent]="false">
         <ds-thumbnail [thumbnail]="object?.thumbnail | async"></ds-thumbnail>
@@ -61,7 +61,7 @@
       urlRegex="^https?://">
     </ds-generic-item-page-field>
   </div>
-  <div class="col-12 col-md-7">
+  <div class="col-12 col-md-9">
     @if (showDownloadLinkAsAttachment) {
       <ds-item-page-attachment-section [item]="object"></ds-item-page-attachment-section>
     }
diff --git a/src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html b/src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html
index 7141a88a8e2..463af9c4ce2 100644
--- a/src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html
+++ b/src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html
@@ -19,7 +19,7 @@
   <ds-dso-edit-menu></ds-dso-edit-menu>
 </div>
 <div class="row">
-  <div class="col-12 col-md-4">
+  <div class="col-12 col-md-3">
     @if (!(mediaViewer.image || mediaViewer.video)) {
       <ds-metadata-field-wrapper [hideIfNoTextContent]="false">
         <ds-thumbnail [thumbnail]="object?.thumbnail | async"></ds-thumbnail>
@@ -62,7 +62,7 @@
       urlRegex="^https?://">
     </ds-generic-item-page-field>
   </div>
-  <div class="col-12 col-md-6">
+  <div class="col-12 col-md-9">
     @if (showDownloadLinkAsAttachment) {
       <ds-item-page-attachment-section [item]="object"></ds-item-page-attachment-section>
     }

From d76becb6b3f419f478623239f50b1c2fd54a6bbb Mon Sep 17 00:00:00 2001
From: Alan Orth <alan.orth@gmail.com>
Date: Tue, 24 Feb 2026 19:45:10 +0300
Subject: [PATCH 2/3] src/app/entity-groups: adjust grid in entity item pages

The Bootstrap grid is composed of 12 columns, but we are not using
the entire grid, which could lead to unexpected stacking depending
on the viewport size. This also adjusts the columns to be consist-
ent with the sizing use by the search results page (3+9).
---
 .../item-pages/journal-issue/journal-issue.component.html     | 4 ++--
 .../item-pages/journal-volume/journal-volume.component.html   | 4 ++--
 .../item-pages/journal/journal.component.html                 | 4 ++--
 .../item-pages/org-unit/org-unit.component.html               | 4 ++--
 .../research-entities/item-pages/person/person.component.html | 4 ++--
 .../item-pages/project/project.component.html                 | 4 ++--
 6 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html b/src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html
index e26052285fc..9f97f7e0eda 100644
--- a/src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html
+++ b/src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html
@@ -7,7 +7,7 @@
   <ds-dso-edit-menu></ds-dso-edit-menu>
 </div>
 <div class="row">
-  <div class="col-12 col-md-4">
+  <div class="col-12 col-md-3">
     <ds-metadata-field-wrapper [hideIfNoTextContent]="false">
       <ds-thumbnail [thumbnail]="object?.thumbnail | async"></ds-thumbnail>
     </ds-metadata-field-wrapper>
@@ -32,7 +32,7 @@
       [label]="'journalissue.page.journal-issn'">
     </ds-generic-item-page-field>
   </div>
-  <div class="col-12 col-md-6">
+  <div class="col-12 col-md-9">
     <ds-related-items
       [parentItem]="object"
       [relationType]="'isJournalVolumeOfIssue'"
diff --git a/src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html b/src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html
index 6a2018d49cc..2703c651aa3 100644
--- a/src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html
+++ b/src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html
@@ -7,7 +7,7 @@
   <ds-dso-edit-menu></ds-dso-edit-menu>
 </div>
 <div class="row">
-  <div class="col-12 col-md-4">
+  <div class="col-12 col-md-3">
     <ds-metadata-field-wrapper [hideIfNoTextContent]="false">
       <ds-thumbnail [thumbnail]="object?.thumbnail | async"></ds-thumbnail>
     </ds-metadata-field-wrapper>
@@ -20,7 +20,7 @@
       [label]="'journalvolume.page.issuedate'">
     </ds-generic-item-page-field>
   </div>
-  <div class="col-12 col-md-6">
+  <div class="col-12 col-md-9">
     <ds-related-items
       [parentItem]="object"
       [relationType]="'isJournalOfVolume'"
diff --git a/src/app/entity-groups/journal-entities/item-pages/journal/journal.component.html b/src/app/entity-groups/journal-entities/item-pages/journal/journal.component.html
index 5452ddd9c40..08044372645 100644
--- a/src/app/entity-groups/journal-entities/item-pages/journal/journal.component.html
+++ b/src/app/entity-groups/journal-entities/item-pages/journal/journal.component.html
@@ -7,7 +7,7 @@
   <ds-dso-edit-menu></ds-dso-edit-menu>
 </div>
 <div class="row">
-  <div class="col-12 col-md-4">
+  <div class="col-12 col-md-3">
     <ds-metadata-field-wrapper [hideIfNoTextContent]="false">
       <ds-thumbnail [thumbnail]="object?.thumbnail | async"></ds-thumbnail>
     </ds-metadata-field-wrapper>
@@ -24,7 +24,7 @@
       [label]="'journal.page.editor'">
     </ds-generic-item-page-field>
   </div>
-  <div class="col-12 col-md-6">
+  <div class="col-12 col-md-9">
     <ds-related-items
       [parentItem]="object"
       [relationType]="'isVolumeOfJournal'"
diff --git a/src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html b/src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html
index cd990c064c4..8211d93fdb0 100644
--- a/src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html
+++ b/src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html
@@ -7,7 +7,7 @@
   <ds-dso-edit-menu></ds-dso-edit-menu>
 </div>
 <div class="row">
-  <div class="col-12 col-md-4">
+  <div class="col-12 col-md-3">
     <ds-metadata-field-wrapper [hideIfNoTextContent]="false">
       <ds-thumbnail [thumbnail]="object?.thumbnail | async"
         [defaultImage]="'assets/images/orgunit-placeholder.svg'"
@@ -33,7 +33,7 @@
       [label]="'orgunit.page.id'">
     </ds-generic-item-page-field>
   </div>
-  <div class="col-12 col-md-7">
+  <div class="col-12 col-md-9">
     <ds-item-page-img-field
       [fields]="['organization.identifier.ror']"
       [img]="{
diff --git a/src/app/entity-groups/research-entities/item-pages/person/person.component.html b/src/app/entity-groups/research-entities/item-pages/person/person.component.html
index 1b08649235d..84ff68e2a89 100644
--- a/src/app/entity-groups/research-entities/item-pages/person/person.component.html
+++ b/src/app/entity-groups/research-entities/item-pages/person/person.component.html
@@ -7,7 +7,7 @@
   <ds-dso-edit-menu></ds-dso-edit-menu>
 </div>
 <div class="row">
-  <div class="col-12 col-md-4">
+  <div class="col-12 col-md-3">
     <ds-metadata-field-wrapper [hideIfNoTextContent]="false">
       <ds-thumbnail [thumbnail]="object?.thumbnail | async"
         [defaultImage]="'assets/images/person-placeholder.svg'"
@@ -24,7 +24,7 @@
       [label]="'person.page.birthdate'">
     </ds-generic-item-page-field>
   </div>
-  <div class="col-12 col-md-7">
+  <div class="col-12 col-md-9">
     <ds-related-items
       [parentItem]="object"
       [relationType]="'isProjectOfPerson'"
diff --git a/src/app/entity-groups/research-entities/item-pages/project/project.component.html b/src/app/entity-groups/research-entities/item-pages/project/project.component.html
index 3fb2796059e..ba4f5ef4e3c 100644
--- a/src/app/entity-groups/research-entities/item-pages/project/project.component.html
+++ b/src/app/entity-groups/research-entities/item-pages/project/project.component.html
@@ -7,7 +7,7 @@
   <ds-dso-edit-menu></ds-dso-edit-menu>
 </div>
 <div class="row">
-  <div class="col-12 col-md-4">
+  <div class="col-12 col-md-3">
     <ds-metadata-field-wrapper [hideIfNoTextContent]="false">
       <ds-thumbnail
         [thumbnail]="object?.thumbnail | async"
@@ -39,7 +39,7 @@
     <!--[label]="'project.page.expectedcompletion'">-->
   <!--</ds-generic-item-page-field>-->
   </div>
-  <div class="col-12 col-md-7">
+  <div class="col-12 col-md-9">
     <ds-related-items
       [parentItem]="object"
       [relationType]="'isPersonOfProject'"

From 2aaadbbcd3deb3ec8ed360e229cb1d5b309387d9 Mon Sep 17 00:00:00 2001
From: Alan Orth <alan.orth@gmail.com>
Date: Fri, 27 Feb 2026 09:41:34 +0300
Subject: [PATCH 3/3] src/styles: set max-width on item page fields

Set max-width of item-page-field components to 75 characters. This
is in line with some best practices regarding readability, though
may need to be adjusted in the future.

See the following recommendations:
  - 50 to 75 characters: https://baymard.com/blog/line-length-readability
  - 60 to 80 characters: https://pimpmytype.com/line-length-line-height/
  - 50 to 75 characters: https://www.uxpin.com/studio/blog/optimal-line-length-for-readability/
  - 50 to 75 characters: https://medium.com/@wblekhoa/talk-aboutthe-optimal-length-of-text-in-ux-ui-525e689f0b71
  - Less than 80 characters: https://www.w3.org/WAI/WCAG21/Understanding/visual-presentation.html
---
 src/styles/_custom_variables.scss | 1 +
 src/styles/_global-styles.scss    | 4 ++++
 2 files changed, 5 insertions(+)

diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss
index 0a8a6757fb1..e8ae3549dd8 100644
--- a/src/styles/_custom_variables.scss
+++ b/src/styles/_custom_variables.scss
@@ -165,6 +165,7 @@
 
 
   --ds-item-page-img-field-default-inline-height: 24px;
+  --ds-item-page-field-max-width: 75ch;
 
   --ds-qa-logo-width: 100px;
 
diff --git a/src/styles/_global-styles.scss b/src/styles/_global-styles.scss
index 6b794f06f64..3ead2664c24 100644
--- a/src/styles/_global-styles.scss
+++ b/src/styles/_global-styles.scss
@@ -573,3 +573,7 @@ ngb-tooltip-window {
   mask-size: contain;
   background-color: currentColor;
 }
+
+.item-page-field {
+  max-width: var(--ds-item-page-field-max-width);
+}