diff --git a/src/components/AssistantTextProcessingForm.vue b/src/components/AssistantTextProcessingForm.vue
index 7f35482b..bc6aa3e4 100644
--- a/src/components/AssistantTextProcessingForm.vue
+++ b/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;
diff --git a/src/components/AssistantTextProcessingModal.vue b/src/components/AssistantTextProcessingModal.vue
index af4825b3..0dd041dc 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 }]">
@@ -57,6 +57,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'
@@ -70,6 +71,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
@@ -210,7 +214,7 @@ export default {
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 @@ 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;
@@ -234,10 +256,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;
}
diff --git a/src/components/ChattyLLM/ChattyLLMInputForm.vue b/src/components/ChattyLLM/ChattyLLMInputForm.vue
index 7c11ef18..2d39c21f 100644
--- a/src/components/ChattyLLM/ChattyLLMInputForm.vue
+++ b/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;