From 4bcce6f4475ca6d4b97bad89b8f4ac258a8b3b63 Mon Sep 17 00:00:00 2001
From: Git'Fellow <12234510+solracsf@users.noreply.github.com>
Date: Thu, 6 Jun 2024 09:01:39 +0200
Subject: [PATCH 1/3] Make container view looks proportional on viewport

Signed-off-by: Git'Fellow <12234510+solracsf@users.noreply.github.com>
---
 src/views/ActivityAppFeed.vue | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/views/ActivityAppFeed.vue b/src/views/ActivityAppFeed.vue
index 886c9420b..9ec25d274 100644
--- a/src/views/ActivityAppFeed.vue
+++ b/src/views/ActivityAppFeed.vue
@@ -208,12 +208,10 @@ watch(props, () => {
 	&__container {
 		display: flex;
 		flex-direction: column;
-
 		height: 100%;
-		width: min(100%, 924px);
-		max-width: 924px;
-		margin: 0 auto;
-		padding-inline: 12px;
+		// Align with app navigation toggle
+		margin: var(--app-navigation-padding, 8px) 0 0 calc(2 * var(--app-navigation-padding, 8px) + 44px)
+		padding-inline: 0 44px;
 		overflow-y: scroll;
 	}
 

From 134e7d14f54e08b3af8467b5056c04597917711d Mon Sep 17 00:00:00 2001
From: Git'Fellow <12234510+solracsf@users.noreply.github.com>
Date: Thu, 6 Jun 2024 09:09:05 +0200
Subject: [PATCH 2/3] Fix lint

Signed-off-by: Git'Fellow <12234510+solracsf@users.noreply.github.com>
---
 src/views/ActivityAppFeed.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/ActivityAppFeed.vue b/src/views/ActivityAppFeed.vue
index 9ec25d274..8010ce324 100644
--- a/src/views/ActivityAppFeed.vue
+++ b/src/views/ActivityAppFeed.vue
@@ -210,7 +210,7 @@ watch(props, () => {
 		flex-direction: column;
 		height: 100%;
 		// Align with app navigation toggle
-		margin: var(--app-navigation-padding, 8px) 0 0 calc(2 * var(--app-navigation-padding, 8px) + 44px)
+		margin: var(--app-navigation-padding, 8px) 0 0 calc(2 * var(--app-navigation-padding, 8px) + 44px);
 		padding-inline: 0 44px;
 		overflow-y: scroll;
 	}

From b57ad431fbaee3d5bd67669e9577975efc5e8036 Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Mon, 10 Jun 2024 18:59:43 +0200
Subject: [PATCH 3/3] fix: move scroll bar to the page edge

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 src/components/ActivityGroup.vue | 13 ++++---------
 src/views/ActivityAppFeed.vue    | 24 +++++++++++++++++-------
 2 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/src/components/ActivityGroup.vue b/src/components/ActivityGroup.vue
index 947cdf030..1ec273e91 100644
--- a/src/components/ActivityGroup.vue
+++ b/src/components/ActivityGroup.vue
@@ -4,7 +4,7 @@
 -->
 
 <template>
-	<Fragment>
+	<div class="activity-group">
 		<h2 class="activity-group__heading" :title="fullDate">
 			{{ dateText }}
 		</h2>
@@ -14,7 +14,7 @@
 				:activity="activity"
 				:show-previews="true" />
 		</ul>
-	</Fragment>
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -24,7 +24,6 @@ import moment from '@nextcloud/moment'
 import Activity from './Activity.vue'
 
 import { translate as t } from '@nextcloud/l10n'
-import { Fragment } from 'vue-frag'
 import { computed } from 'vue'
 
 const props = defineProps<{
@@ -60,12 +59,8 @@ const fullDate = computed(() => {
 .activity-group {
 	&__heading {
 		line-height: 1.5;
-		margin-block: 30px 12px;
-
-		&:first-of-type {
-			// Already padding from h1
-			margin-block-start: 0;
-		}
+		// Left margin in line with text position
+		margin: 0 0 calc(var(--default-grid-baseline) * 3) 25px;
 	}
 }
 </style>
diff --git a/src/views/ActivityAppFeed.vue b/src/views/ActivityAppFeed.vue
index 8010ce324..0f871e59c 100644
--- a/src/views/ActivityAppFeed.vue
+++ b/src/views/ActivityAppFeed.vue
@@ -24,7 +24,9 @@
 			</template>
 		</NcEmptyContent>
 		<div ref="container" class="activity-app__container">
-			<ActivityGroup v-for="activities, date of groupedActivities" :key="date" :activities="activities" />
+			<div class="activity-app__groups-list">
+				<ActivityGroup v-for="activities, date of groupedActivities" :key="date" :activities="activities" />
+			</div>
 			<!-- Only show if not showing the inital empty content for loading -->
 			<NcLoadingIcon v-if="hasMoreActivites && allActivities.length > 0"
 				:name="t('activity', 'Loading more activities')"
@@ -194,6 +196,8 @@ watch(props, () => {
 	flex-direction: column;
 	overflow: hidden;
 
+	--app-navigation-toggle-offset: calc(2 * var(--app-navigation-padding, 8px) + var(--default-clickable-area));
+
 	&__empty-content {
 		height: 100%;
 	}
@@ -209,18 +213,24 @@ watch(props, () => {
 		display: flex;
 		flex-direction: column;
 		height: 100%;
-		// Align with app navigation toggle
-		margin: var(--app-navigation-padding, 8px) 0 0 calc(2 * var(--app-navigation-padding, 8px) + 44px);
-		padding-inline: 0 44px;
+		// Inline by headings without 25px icon
+		margin-inline-start: calc(var(--app-navigation-toggle-offset) - 25px);
+		padding-inline: 0 var(--default-clickable-area);
 		overflow-y: scroll;
 	}
 
 	&__heading {
 		font-weight: bold;
 		font-size: 20px;
-		line-height: 44px; // to align height with the app navigation toggle
-		// Align with app navigation toggle
-		margin: var(--app-navigation-padding, 8px) 0 0 calc(2 * var(--app-navigation-padding, 8px) + 44px);
+		line-height: var(--default-clickable-area);
+		margin: calc(var(--default-grid-baseline) * 2) 0 0 var(--app-navigation-toggle-offset);
+	}
+
+	&__groups-list {
+		display: flex;
+		flex-direction: column;
+		gap: 30px;
+		max-width: 924px;
 	}
 }
 </style>