Assistant dialog papercuts

src/components/AssistantTextProcessingForm.vue

@@ -695,6 +695,16 @@ export default {
 	height: 100%;
 	min-height: 0;
 	overflow: hidden;
+	container-type: inline-size;
+
+	// the assistant lives in a resizable/draggable dialog, so the task
+	// history visibility has to follow the dialog width rather than the
+	// viewport
+	@container (max-width: 900px) {
+		:deep(.app-navigation) {
+			display: none;
+		}
+	}
 
 	:deep(.app-navigation-new) {
 		padding: 0;

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">
@@ -57,6 +57,7 @@
 import PrimeDialog from 'primevue/dialog'
 
 import NcButton from '@nextcloud/vue/components/NcButton'
+import { useIsSmallMobile } from '@nextcloud/vue/composables/useIsMobile'
 
 import AssistantTextProcessingForm from './AssistantTextProcessingForm.vue'
 
@@ -70,7 +71,10 @@
 		NcButton,
 		CloseIcon,
 	},
+	setup() {
+		return { isSmallMobile: useIsSmallMobile() }
+	},
 	props: {
 		/**
 		 * If true, add the modal content to the Viewer trap elements via the event-bus
 		 */
@@ -103,7 +107,7 @@
 			default: null,
 		},
 	},
 	emits: [
 		'cancel',
 		'cancel-task',
 		'background-notify',
@@ -210,7 +214,7 @@
 	height: calc(100vh - 32px);
 	max-height: calc(100vh - 32px);
 	height: 80%;
-	width: 50%;
+	width: min(1220px, 90vw);
 	resize: both;
 	overflow: hidden;
 	filter: drop-shadow(0 0 15px rgba(77, 77, 77, 0.5));
@@ -219,6 +223,24 @@
 	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;
@@ -234,10 +256,18 @@
 		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;
 		}

src/components/ChattyLLM/ChattyLLMInputForm.vue

@@ -916,6 +916,16 @@ export default {
 	height: 100%;
 	min-height: 0;
 	overflow: hidden;
+	container-type: inline-size;
+
+	// the assistant lives in a resizable/draggable dialog, so the
+	// conversation history visibility has to follow the dialog width
+	// rather than the viewport
+	@container (max-width: 900px) {
+		:deep(.app-navigation) {
+			display: none;
+		}
+	}
 
 	:deep(.app-navigation-new) {
 		padding: 0;