Skip to content

Fix ArticleMeta for wide views in the app #15087

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
vlbee wants to merge 7 commits into
base: main
Choose a base branch
from
+474 −527
Open

Fix ArticleMeta for wide views in the app #15087

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
9567109
Fix byline for tablet landscape views
vlbee Jan 6, 2026
70245e7
Fix StandardLayout
vlbee Jan 6, 2026
c890d0a
Fix CommentLayout
vlbee Jan 6, 2026
3771cbc
Fix Immersive Layout
vlbee Jan 6, 2026
0c9bb2b
Fix Showcase Layout
vlbee Jan 6, 2026
26c6902
fix linting
vlbee Jan 6, 2026
c7ccbb7
Merge remote-tracking branch 'origin/main' into vb/fix-wide-take2
vlbee Jan 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions dotcom-rendering/src/components/ArticleMeta.apps.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ const MetaGridByline = ({
children: ReactNode;
isComment: boolean;
}) => (
// address > div > span > div:first-of-type - spacing for the Follow Tag buttons in follow wrapper,
// address > div > div:first-of-type - spacing for the Follow Tag buttons in follow wrapper,
// which is contextual of the meta by layout type
<div
css={css`
Expand All @@ -111,7 +111,7 @@ const MetaGridByline = ({
padding-bottom: 0px;
}

address > div > span > div:first-of-type {
address > div > div:first-of-type {
display: block;
margin-top: ${space[2]}px;
${!isComment && `margin-bottom: ${space[2]}px;`}
Expand Down
5 changes: 2 additions & 3 deletions dotcom-rendering/src/components/BylineLink.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { isString } from '@guardian/libs';
import { Hide } from '@guardian/source/react-components';
import { DottedLines } from '@guardian/source-development-kitchen/react-components';
import { ArticleDesign, type ArticleFormat } from '../lib/articleFormat';
import {
Expand Down Expand Up @@ -191,7 +190,7 @@ export const BylineLink = ({
<>
{renderedTokens}
{isApps && !isLiveBlog && !isHeadline && hasSoleContributor ? (
<Hide from="leftCol">
<>
<DottedLines
count={1}
color={themePalette('--article-meta-lines')}
Expand All @@ -202,7 +201,7 @@ export const BylineLink = ({
id={soleContributor.id}
/>
</Island>
</Hide>
</>
) : null}
</>
);
Expand Down
148 changes: 67 additions & 81 deletions dotcom-rendering/src/layouts/CommentLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,9 +56,11 @@ import { BannerWrapper, Stuck } from './lib/stickiness';
const StandardGrid = ({
children,
display,
renderingTarget,
}: {
children: React.ReactNode;
display: ArticleDisplay;
renderingTarget: RenderingTarget;
}) => (
<div
css={css`
Expand All @@ -79,6 +81,12 @@ const StandardGrid = ({
display: grid;
width: 100%;
margin-left: 0;
${renderingTarget === 'Apps' &&
css`
${from.leftCol} {
margin-left: 230px;
}
`}

grid-column-gap: 10px;

Expand Down Expand Up @@ -145,7 +153,21 @@ const StandardGrid = ({
'. border . right-column';
`}
}

/* Apply until.leftCol layout from leftCol for Apps targets */
${renderingTarget === 'Apps' &&
css`
${from.leftCol} {
grid-template-columns: 620px 300px;
grid-template-areas:
'title right-column'
'headline right-column'
'standfirst right-column'
'meta right-column'
'media right-column'
'body right-column'
'. right-column';
}
`}
/*
Explanation of each unit of grid-template-columns

Expand Down Expand Up @@ -350,7 +372,10 @@ export const CommentLayout = (props: WebProps | AppsProps) => {
backgroundColour={themePalette('--article-background')}
element="article"
>
<StandardGrid display={format.display}>
<StandardGrid
display={format.display}
renderingTarget={renderingTarget}
>
<GridItem area="media">
<div
css={
Expand Down Expand Up @@ -460,85 +485,44 @@ export const CommentLayout = (props: WebProps | AppsProps) => {
<GridItem area="meta" element="aside">
<div css={maxWidth}>
{isApps ? (
<>
<Hide when="above" breakpoint="leftCol">
<ArticleMetaApps
branding={branding}
format={format}
byline={article.byline}
tags={article.tags}
primaryDateline={
article.webPublicationDateDisplay
}
secondaryDateline={
article.webPublicationSecondaryDateDisplay
}
isCommentable={
article.isCommentable
}
discussionApiUrl={
article.config
.discussionApiUrl
}
shortUrlId={
article.config.shortUrlId
}
pageId={article.config.pageId}
></ArticleMetaApps>
</Hide>
<Hide when="below" breakpoint="leftCol">
<ArticleMeta
branding={branding}
format={format}
pageId={article.pageId}
webTitle={article.webTitle}
byline={article.byline}
tags={article.tags}
primaryDateline={
article.webPublicationDateDisplay
}
secondaryDateline={
article.webPublicationSecondaryDateDisplay
}
isCommentable={
article.isCommentable
}
discussionApiUrl={
article.config
.discussionApiUrl
}
shortUrlId={
article.config.shortUrlId
}
/>
</Hide>
</>
<ArticleMetaApps
branding={branding}
format={format}
byline={article.byline}
tags={article.tags}
primaryDateline={
article.webPublicationDateDisplay
}
secondaryDateline={
article.webPublicationSecondaryDateDisplay
}
isCommentable={article.isCommentable}
discussionApiUrl={
article.config.discussionApiUrl
}
shortUrlId={article.config.shortUrlId}
pageId={article.config.pageId}
></ArticleMetaApps>
) : (
<>
<ArticleMeta
branding={branding}
format={format}
pageId={article.pageId}
webTitle={article.webTitle}
byline={article.byline}
tags={article.tags}
primaryDateline={
article.webPublicationDateDisplay
}
secondaryDateline={
article.webPublicationSecondaryDateDisplay
}
isCommentable={
article.isCommentable
}
discussionApiUrl={
article.config.discussionApiUrl
}
shortUrlId={
article.config.shortUrlId
}
/>
</>
<ArticleMeta
branding={branding}
format={format}
pageId={article.pageId}
webTitle={article.webTitle}
byline={article.byline}
tags={article.tags}
primaryDateline={
article.webPublicationDateDisplay
}
secondaryDateline={
article.webPublicationSecondaryDateDisplay
}
isCommentable={article.isCommentable}
discussionApiUrl={
article.config.discussionApiUrl
}
shortUrlId={article.config.shortUrlId}
/>
)}
</div>
</GridItem>
Expand Down Expand Up @@ -659,7 +643,9 @@ export const CommentLayout = (props: WebProps | AppsProps) => {
margin-left: 20px;
margin-right: -20px;
}
${from.leftCol} {

${renderingTarget !== 'Apps' &&
from.leftCol} {
/* above 1140 */
margin-left: 0px;
margin-right: 0px;
Expand Down
108 changes: 49 additions & 59 deletions dotcom-rendering/src/layouts/ImmersiveLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,9 +57,16 @@ import { parse } from '../lib/slot-machine-flags';
import type { NavType } from '../model/extract-nav';
import { palette as themePalette } from '../palette';
import type { ArticleDeprecated } from '../types/article';
import type { RenderingTarget } from '../types/renderingTarget';
import { BannerWrapper, Stuck } from './lib/stickiness';

const ImmersiveGrid = ({ children }: { children: React.ReactNode }) => (
const ImmersiveGrid = ({
children,
renderingTarget,
}: {
children: React.ReactNode;
renderingTarget: RenderingTarget;
}) => (
<div
css={css`
/* IE Fallback */
Expand All @@ -79,7 +86,12 @@ const ImmersiveGrid = ({ children }: { children: React.ReactNode }) => (
display: grid;
width: 100%;
margin-left: 0;

${renderingTarget === 'Apps' &&
css`
${from.leftCol} {
margin-left: 230px;
}
`}
/*
Explanation of each unit of grid-template-columns

Expand Down Expand Up @@ -122,6 +134,22 @@ const ImmersiveGrid = ({ children }: { children: React.ReactNode }) => (
'. border . right-column';
}

/* Apply until.leftCol layout from leftCol for Apps targets */
${renderingTarget === 'Apps' &&
css`
${from.leftCol} {
grid-template-columns: 620px 300px;
grid-column-gap: 20px;
grid-template-areas:
'title right-column'
'headline right-column'
'standfirst right-column'
'byline right-column'
'caption right-column'
'meta right-column'
'body right-column';
}
`}
/*
Explanation of each unit of grid-template-columns

Expand Down Expand Up @@ -449,7 +477,7 @@ export const ImmersiveLayout = (props: WebProps | AppProps) => {
backgroundColour={themePalette('--article-background')}
element="article"
>
<ImmersiveGrid>
<ImmersiveGrid renderingTarget={renderingTarget}>
{/* Above leftCol, the Caption is controlled by Section ^^ */}
<GridItem area="caption">
<Hide when="above" breakpoint="leftCol">
Expand Down Expand Up @@ -549,62 +577,24 @@ export const ImmersiveLayout = (props: WebProps | AppProps) => {
)}
<div css={maxWidth}>
{isApps ? (
<>
<Hide when="above" breakpoint="leftCol">
<ArticleMetaApps
branding={branding}
format={format}
byline={article.byline}
tags={article.tags}
primaryDateline={
article.webPublicationDateDisplay
}
secondaryDateline={
article.webPublicationSecondaryDateDisplay
}
isCommentable={
article.isCommentable
}
discussionApiUrl={
article.config
.discussionApiUrl
}
shortUrlId={
article.config.shortUrlId
}
pageId={article.config.pageId}
></ArticleMetaApps>
</Hide>
<Hide when="below" breakpoint="leftCol">
<ArticleMeta
branding={branding}
format={format}
pageId={article.pageId}
webTitle={article.webTitle}
byline={article.byline}
tags={article.tags}
primaryDateline={
article.webPublicationDateDisplay
}
secondaryDateline={
article.webPublicationSecondaryDateDisplay
}
isCommentable={
article.isCommentable
}
discussionApiUrl={
article.config
.discussionApiUrl
}
shortUrlId={
article.config.shortUrlId
}
/>
{!!article.affiliateLinksDisclaimer && (
<AffiliateDisclaimer />
)}
</Hide>
</>
<ArticleMetaApps
branding={branding}
format={format}
byline={article.byline}
tags={article.tags}
primaryDateline={
article.webPublicationDateDisplay
}
secondaryDateline={
article.webPublicationSecondaryDateDisplay
}
isCommentable={article.isCommentable}
discussionApiUrl={
article.config.discussionApiUrl
}
shortUrlId={article.config.shortUrlId}
pageId={article.config.pageId}
></ArticleMetaApps>
) : (
<>
<ArticleMeta
Expand Down
Loading
Loading