Improve activity feed design by jancborchardt · Pull Request #2634 · nextcloud/activity

jancborchardt · 2026-06-02T00:16:05Z

Improve overall design of activity feed:

Remove unnecessary h1 heading which duplicated the active nav entry. Keep it in the code for semantics/accessibility
Make app-content the scroll container so the scrollbar isn't floating (this was just a bit unelegant)
Make activity date headings sticky on scroll (with logic to look nice at the breakpoints)
Add bottom whitespace below the end-of-feed message so it’s not stuck to the bottom

Before

Screencast.From.2026-06-02.02-09-05.webm

After

Screencast.From.2026-06-02.01-59-25.webm

Breakpoint example:

Screencast.From.2026-06-02.02-01-05.webm

AI-assisted: Claude Code (Opus 4.8)

codecov · 2026-06-02T00:17:40Z

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

jancborchardt · 2026-06-03T10:30:41Z

@artonge @miaulalala any comments or feedback? :)

The <h1> showed the active filter's name, which the app navigation already indicates, so it only added visual noise. Keep it in the DOM for document semantics and screen readers but hide it with hidden-visually, and drop its now-unused visual styling so it cannot affect layout. Adjust the stream e2e tests to assert the heading's content rather than its visibility. AI-assisted: Claude Code (Opus 4.8) Signed-off-by: Jan C. Borchardt <925062+jancborchardt@users.noreply.github.com>

The scroll container was the centred, max-width content column, so its scrollbar floated in the middle of the viewport. Move scrolling to the full-width container and clamp the readable column in an inner wrapper, so the scrollbar sits at the edge of app-content while the content stays readable. The column width becomes a shared --activity-feed-max-width. AI-assisted: Claude Code (Opus 4.8) Signed-off-by: Jan C. Borchardt <925062+jancborchardt@users.noreply.github.com>

Group each day's activities in a section whose date heading sticks to the top while that day is in view, with the next day pushing the previous one up. The heading fades feed items out beneath it and is sized/aligned to the app navigation toggle. Its indent to clear the toggle eases in from the content-area width (a query container), so it accounts for the space the open navigation takes rather than the raw viewport. Add unit tests for the heading's Today/Yesterday/full-date labels. AI-assisted: Claude Code (Opus 4.8) Signed-off-by: Jan C. Borchardt <925062+jancborchardt@users.noreply.github.com>

Give the "No more activities." message generous, viewport-scaled space below it so the end of the feed isn't cramped against the bottom edge. AI-assisted: Claude Code (Opus 4.8) Signed-off-by: Jan C. Borchardt <925062+jancborchardt@users.noreply.github.com>

jancborchardt · 2026-06-03T14:10:54Z

Rebased again :)

miaulalala · 2026-06-04T08:21:26Z

@artonge @miaulalala any comments or feedback? :)

I'll check it out and test it Monday. From the screencasts it looks like a nice refinement, thanks!

artonge · 2026-06-04T10:44:18Z

 	<NcAppContent class="activity-app">
-		<h1 class="activity-app__heading">
+		<!-- Kept for document semantics / screen readers, but visually hidden -->
+		<h1 class="activity-app__heading hidden-visually">


Let's not depend on a global class and have all the needed css here in this file :).

artonge · 2026-06-04T10:44:46Z

No need to compile the assets in every commits.

artonge · 2026-06-04T10:46:37Z

 <style scoped lang="scss">
 .activity-app {
+	// Max width of the readable content column
+	--activity-feed-max-width: 924px;


Can you move the var declaration close its usage?
Also, why 924px?

Ah, I see that 924 is from before 👍

artonge · 2026-06-04T10:47:15Z

+		// Full width so the scrollbar sits at the edge of app-content
+		height: 100%;


"Full width", but sets the height, is the comment correct and code?

artonge · 2026-06-04T10:58:08Z

+	// Separate consecutive groups. Inside the <section> (not a margin between them)
+	// so the date stays pinned across the gap and the next date docks right as the
+	// group ends, instead of the push feeling early.


The comment is weirdly written, can you double-check it?

artonge · 2026-06-04T11:03:51Z

+		// once the gutter clears the toggle.
+		padding-inline-start: calc(max(
+			0px,
+			var(--app-navigation-padding, 8px) + var(--default-clickable-area)


Do we really need default values for the var()? I think we can assume that they are always available.

artonge · 2026-06-04T11:08:41Z

+		padding-inline-start: calc(max(
+			0px,
+			var(--app-navigation-padding, 8px) + var(--default-clickable-area)
+				- var(--default-grid-baseline, 4px)
+				- max(0px, (100cqi - var(--activity-feed-max-width)) / 2)
+		));


Can't we come up with something simpler? I look quite complex for what we are trying to achieve.

artonge · 2026-06-04T11:10:24Z

 		text-align: center;
 	}

+	&__loading-indicator--end {


Is the new class necessary? Can't we add that to the existing class?

kra-mo

Cool, but we should actually standardize floating toolbars/headers as this stuff is a common headache.

artonge

Blocking until other comments are resolved :)

jancborchardt added this to the Nextcloud 35 milestone Jun 2, 2026

jancborchardt requested review from artonge and miaulalala June 2, 2026 00:16

jancborchardt self-assigned this Jun 2, 2026

jancborchardt added enhancement design labels Jun 2, 2026

jancborchardt added this to 🖍 Design team Jun 2, 2026

jancborchardt added 3. to review papercut labels Jun 2, 2026

jancborchardt moved this to 🏗️ At engineering in 🖍 Design team Jun 2, 2026

jancborchardt force-pushed the feat/activity-stream-layout branch 4 times, most recently from e8f2b72 to 1956162 Compare June 2, 2026 09:52

jancborchardt requested a review from kra-mo June 3, 2026 10:30

jancborchardt added 4 commits June 3, 2026 15:44

jancborchardt force-pushed the feat/activity-stream-layout branch from 1956162 to 7ff0f18 Compare June 3, 2026 13:45

jancborchardt requested a review from AndyScherzinger June 3, 2026 14:10

artonge reviewed Jun 4, 2026

View reviewed changes

kra-mo approved these changes Jun 4, 2026

View reviewed changes

artonge requested changes Jun 4, 2026

View reviewed changes

		// Full width so the scrollbar sits at the edge of app-content
		height: 100%;

Conversation

jancborchardt commented Jun 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Before

After

Uh oh!

codecov Bot commented Jun 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

jancborchardt commented Jun 3, 2026

Uh oh!

jancborchardt commented Jun 3, 2026

Uh oh!

miaulalala commented Jun 4, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kra-mo left a comment

Choose a reason for hiding this comment

Uh oh!

artonge left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

jancborchardt commented Jun 2, 2026 •

edited

Loading

codecov Bot commented Jun 2, 2026 •

edited

Loading