Skip to content

Commit 2fdb04d

Browse files
committed
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
1 parent 4c70f47 commit 2fdb04d

2 files changed

Lines changed: 5 additions & 0 deletions

File tree

src/styles/_custom_variables.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,7 @@
140140

141141

142142
--ds-item-page-img-field-default-inline-height: 24px;
143+
--ds-item-page-field-max-width: 75ch;
143144

144145
--ds-qa-logo-width: 100px;
145146

src/styles/_global-styles.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -573,3 +573,7 @@ ngb-tooltip-window {
573573
mask-size: contain;
574574
background-color: currentColor;
575575
}
576+
577+
.item-page-field {
578+
max-width: var(--ds-item-page-field-max-width);
579+
}

0 commit comments

Comments
 (0)