From 0087452b63c4f37ab33a83d469ea1ca4c71c37e2 Mon Sep 17 00:00:00 2001
From: Marco Ambrosini <marcoambrosini@proton.me>
Date: Tue, 26 May 2026 18:48:26 +0900
Subject: [PATCH 1/4] collapse task history sidebar below 900px dialog width

Signed-off-by: Marco Ambrosini <marcoambrosini@proton.me>
---
 .../AssistantTextProcessingForm.vue           | 14 +++-
 .../ChattyLLM/ChattyLLMInputForm.vue          | 12 ++-
 src/mixins/navAutoCollapse.js                 | 75 +++++++++++++++++++
 3 files changed, 93 insertions(+), 8 deletions(-)
 create mode 100644 src/mixins/navAutoCollapse.js

diff --git a/src/components/AssistantTextProcessingForm.vue b/src/components/AssistantTextProcessingForm.vue
index 18ae18a88..ac38073f1 100644
--- a/src/components/AssistantTextProcessingForm.vue
+++ b/src/components/AssistantTextProcessingForm.vue
@@ -21,8 +21,8 @@
 				:is-assignment="mySelectedTaskTypeId === 'assignments'"
 				class="chatty-inputs"
 				@open-chat="onOpenChatFromAssignment" />
-			<div v-else class="container chatty-inputs">
-				<NcAppNavigation>
+			<div v-else ref="container" class="container chatty-inputs">
+				<NcAppNavigation ref="appNav">
 					<NcAppNavigationList>
 						<NcAppNavigationNew :text="t('assistant', 'New task')"
 							variant="secondary"
@@ -204,6 +204,8 @@ import TaskList from './TaskList.vue'
 import TaskTypeSelect from './TaskTypeSelect.vue'
 import TranslateForm from './Translate/TranslateForm.vue'
 
+import navAutoCollapse from '../mixins/navAutoCollapse.js'
+
 import { SHAPE_TYPE_NAMES, MAX_TEXT_INPUT_LENGTH, TASK_STATUS_STRING } from '../constants.js'
 
 import axios from '@nextcloud/axios'
@@ -249,6 +251,7 @@ export default {
 		ChattyLLMInputForm,
 		EditableTextField,
 	},
+	mixins: [navAutoCollapse],
 	provide() {
 		return {
 			providedCurrentTaskId: () => this.selectedTaskId,
@@ -473,6 +476,9 @@ export default {
 		},
 		mySelectedTaskTypeId(newVal) {
 			this.myOutputs = {}
+			// the navigation lives in a conditionally-rendered branch, so
+			// re-attach the resize observer once that branch is in the DOM
+			this.$nextTick(() => this.setupNavObserver())
 		},
 	},
 	mounted() {
@@ -790,13 +796,13 @@ export default {
 		}
 	}
 
-	:deep(.app-navigation--close) {
+	:deep(.app-navigation--closed) {
 		.app-navigation-toggle-wrapper {
 			margin-right: -33px !important;
 		}
 	}
 
-	:deep(.app-navigation--close ~ .session-area) {
+	:deep(.app-navigation--closed ~ .session-area) {
 		.session-area__chat-area, .session-area__input-area {
 			padding-left: 0 !important;
 		}
diff --git a/src/components/ChattyLLM/ChattyLLMInputForm.vue b/src/components/ChattyLLM/ChattyLLMInputForm.vue
index d407e703d..bc23841d8 100644
--- a/src/components/ChattyLLM/ChattyLLMInputForm.vue
+++ b/src/components/ChattyLLM/ChattyLLMInputForm.vue
@@ -3,8 +3,8 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
   -->
 <template>
-	<div class="container">
-		<NcAppNavigation>
+	<div ref="container" class="container">
+		<NcAppNavigation ref="appNav">
 			<NcAppNavigationList>
 				<NcAppNavigationNew v-if="!isAssignment"
 					:text="t('assistant', 'New conversation')"
@@ -260,6 +260,8 @@ import ICAL from 'ical.js'
 import formatRecurrenceRule from './recurrenceRule.js'
 import { getLanguage } from '@nextcloud/l10n'
 
+import navAutoCollapse from '../../mixins/navAutoCollapse.js'
+
 // future: type (text, image, file, etc), attachments, etc support
 
 const getChatURL = (endpoint) => generateOcsUrl('/apps/assistant/chat' + endpoint)
@@ -300,6 +302,8 @@ export default {
 		NoSession,
 	},
 
+	mixins: [navAutoCollapse],
+
 	props: {
 		isAssignment: {
 			type: Boolean,
@@ -1227,13 +1231,13 @@ export default {
 		}
 	}
 
-	:deep(.app-navigation--close) {
+	:deep(.app-navigation--closed) {
 		.app-navigation-toggle-wrapper {
 			margin-right: -33px !important;
 		}
 	}
 
-	:deep(.app-navigation--close ~ .session-area) {
+	:deep(.app-navigation--closed ~ .session-area) {
 		.session-area__chat-area, .session-area__input-area {
 			padding-left: 0 !important;
 		}
diff --git a/src/mixins/navAutoCollapse.js b/src/mixins/navAutoCollapse.js
new file mode 100644
index 000000000..158a175cd
--- /dev/null
+++ b/src/mixins/navAutoCollapse.js
@@ -0,0 +1,75 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+// The assistant lives in a resizable/draggable dialog, so the navigation
+// visibility follows the dialog/container width rather than the viewport.
+const NAV_COLLAPSE_BREAKPOINT = 900
+
+/**
+ * Collapses the `NcAppNavigation` sidebar when the surrounding container gets
+ * narrower than NAV_COLLAPSE_BREAKPOINT and reopens it when it grows back.
+ *
+ * Unlike hiding the navigation, this drives the component's built-in open/close
+ * (by clicking its own toggle button) so the toggle stays visible and the
+ * sidebar remains reachable on a narrow dialog.
+ *
+ * The consuming component must set `ref="container"` on the observed element
+ * and `ref="appNav"` on its `<NcAppNavigation>`. If the container is rendered
+ * conditionally, call `setupNavObserver()` again once it appears.
+ */
+export default {
+	mounted() {
+		this.setupNavObserver()
+	},
+	beforeUnmount() {
+		this.teardownNavObserver()
+	},
+	methods: {
+		setupNavObserver() {
+			this.teardownNavObserver()
+			const container = this.$refs.container
+			if (!container || typeof ResizeObserver === 'undefined') {
+				return
+			}
+			// null = not evaluated yet, so the first observation always applies
+			this.navCollapsed = null
+			this.navResizeObserver = new ResizeObserver(this.onNavContainerResize)
+			this.navResizeObserver.observe(container)
+		},
+		teardownNavObserver() {
+			this.navResizeObserver?.disconnect()
+			this.navResizeObserver = null
+		},
+		onNavContainerResize(entries) {
+			const width = entries[0]?.contentRect.width
+			if (width === undefined) {
+				return
+			}
+			const shouldCollapse = width < NAV_COLLAPSE_BREAKPOINT
+			if (shouldCollapse === this.navCollapsed) {
+				return
+			}
+			this.navCollapsed = shouldCollapse
+			// defer to the next frame to avoid "ResizeObserver loop" warnings
+			window.requestAnimationFrame(() => this.setNavOpen(!shouldCollapse))
+		},
+		setNavOpen(open) {
+			// We deliberately drive NcAppNavigation through its own toggle button
+			// rather than emit('toggle-navigation') from @nextcloud/event-bus: that
+			// bus is global, so it would also collapse the host app's sidebar when
+			// resizing the assistant modal. NcAppNavigation exposes no `open` prop
+			// and doesn't expose toggleNavigation(), so its toggle button is the
+			// only instance-scoped lever.
+			const toggle = this.$refs.appNav?.$el?.querySelector('button.app-navigation-toggle')
+			if (!toggle) {
+				return
+			}
+			const isOpen = toggle.getAttribute('aria-expanded') === 'true'
+			if (isOpen !== open) {
+				toggle.click()
+			}
+		},
+	},
+}

From dd36134d3c53a7e4888f4e611418a439a1e3956f Mon Sep 17 00:00:00 2001
From: Marco Ambrosini <marcoambrosini@proton.me>
Date: Tue, 26 May 2026 18:29:19 +0900
Subject: [PATCH 2/4] modal: widen to min(1220px, 90vw)

Signed-off-by: Marco Ambrosini <marcoambrosini@proton.me>
---
 src/components/AssistantTextProcessingModal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/AssistantTextProcessingModal.vue b/src/components/AssistantTextProcessingModal.vue
index 3b05f661f..9370c4fc5 100644
--- a/src/components/AssistantTextProcessingModal.vue
+++ b/src/components/AssistantTextProcessingModal.vue
@@ -221,7 +221,7 @@ export default {
 	height: calc(100vh - 32px);
 	max-height: calc(100vh - 32px);
 	height: 80%;
-	width: 70%;
+	width: min(1220px, 90vw);
 	resize: both;
 	overflow: hidden;
 	filter: drop-shadow(0 0 15px rgba(77, 77, 77, 0.5));

From 86a2e07176e7d81caa092ced14314d7ae73f088a Mon Sep 17 00:00:00 2001
From: Marco Ambrosini <marcoambrosini@proton.me>
Date: Tue, 26 May 2026 18:29:47 +0900
Subject: [PATCH 3/4] modal: fullscreen on small mobile and when maximized

Signed-off-by: Marco Ambrosini <marcoambrosini@proton.me>
---
 .../AssistantTextProcessingModal.vue          | 26 +++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/components/AssistantTextProcessingModal.vue b/src/components/AssistantTextProcessingModal.vue
index 9370c4fc5..82c6f1e9b 100644
--- a/src/components/AssistantTextProcessingModal.vue
+++ b/src/components/AssistantTextProcessingModal.vue
@@ -8,10 +8,10 @@
 		:closable="false"
 		:dismissable-mask="false"
 		:close-on-escape="false"
-		:draggable="true"
+		:draggable="!isSmallMobile"
 		append-to="self"
 		:base-z-index="isInsideViewer ? 9998 : 5000"
-		class="assistant-modal">
+		:class="['assistant-modal', { 'assistant-modal--fullscreen': isSmallMobile }]">
 		<div ref="modal_content"
 			class="assistant-modal--wrapper">
 			<div class="assistant-modal--content">
@@ -59,6 +59,7 @@ import CloseIcon from 'vue-material-design-icons/Close.vue'
 import PrimeDialog from 'primevue/dialog'
 
 import NcButton from '@nextcloud/vue/components/NcButton'
+import { useIsSmallMobile } from '@nextcloud/vue/composables/useIsMobile'
 
 import AssistantTextProcessingForm from './AssistantTextProcessingForm.vue'
 
@@ -72,6 +73,9 @@ export default {
 		NcButton,
 		CloseIcon,
 	},
+	setup() {
+		return { isSmallMobile: useIsSmallMobile() }
+	},
 	props: {
 		/**
 		 * If true, add the modal content to the Viewer trap elements via the event-bus
@@ -230,6 +234,24 @@ export default {
 	border: 0;
 }
 
+.assistant-modal.p-dialog.assistant-modal--fullscreen,
+.assistant-modal.p-dialog.p-dialog-maximized {
+	inset: 0;
+	width: 100vw;
+	max-width: none;
+	height: 100vh;
+	max-height: none;
+	margin: 0;
+	border-radius: 0;
+	resize: none;
+	filter: none;
+	transform: none;
+}
+
+.assistant-modal.p-dialog.assistant-modal--fullscreen .p-dialog-header .p-dialog-maximize-button {
+	display: none;
+}
+
 .assistant-modal .p-dialog-header {
 	position: absolute;
 	top: 0;

From 777def43fc39c09f2458dcb804fac003222484b8 Mon Sep 17 00:00:00 2001
From: Marco Ambrosini <marcoambrosini@proton.me>
Date: Tue, 26 May 2026 18:30:02 +0900
Subject: [PATCH 4/4] modal: align maximize button with close button

Signed-off-by: Marco Ambrosini <marcoambrosini@proton.me>
---
 src/components/AssistantTextProcessingModal.vue | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/components/AssistantTextProcessingModal.vue b/src/components/AssistantTextProcessingModal.vue
index 82c6f1e9b..46c45ad60 100644
--- a/src/components/AssistantTextProcessingModal.vue
+++ b/src/components/AssistantTextProcessingModal.vue
@@ -267,10 +267,18 @@ export default {
 		cursor: grabbing;
 	}
 	.p-dialog-maximize-button {
+		position: absolute;
+		top: 10px;
+		left: 10px;
+		z-index: 3;
+		margin: 0 !important;
+		color: var(--color-main-text);
+		background-color: var(--color-main-background);
 		border-radius: var(--border-radius-element);
 		width: var(--default-clickable-area);
 		height: var(--default-clickable-area);
 		&:hover {
+			color: var(--color-main-text) !important;
 			background-color: var(--color-background-hover) !important;
 			border: none !important;
 		}