From 4a8c55549af1fb9be0818d60d50088bb9afafb0a Mon Sep 17 00:00:00 2001 From: Marco Ambrosini 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 --- src/components/AssistantTextProcessingForm.vue | 10 ++++++++++ src/components/ChattyLLM/ChattyLLMInputForm.vue | 10 ++++++++++ 2 files changed, 20 insertions(+) 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/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; From b569a8eb9692abd9140a7646e734dfa74a8fb25b Mon Sep 17 00:00:00 2001 From: Marco Ambrosini Date: Tue, 26 May 2026 18:29:19 +0900 Subject: [PATCH 2/4] modal: widen to min(1220px, 90vw) Signed-off-by: Marco Ambrosini --- 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 af4825b3..1eef9da3 100644 --- a/src/components/AssistantTextProcessingModal.vue +++ b/src/components/AssistantTextProcessingModal.vue @@ -210,7 +210,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)); From 5016f0ef11562ae86e36ca18efd21fcaf47b5e89 Mon Sep 17 00:00:00 2001 From: Marco Ambrosini 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 --- .../AssistantTextProcessingModal.vue | 26 +++++++++++++++++-- 1 file changed, 24 insertions(+), 2 deletions(-) diff --git a/src/components/AssistantTextProcessingModal.vue b/src/components/AssistantTextProcessingModal.vue index 1eef9da3..ce68123f 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 @@ -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; From 57dc2b87441130351158ada0683d44f0355f64ce Mon Sep 17 00:00:00 2001 From: Marco Ambrosini 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 --- src/components/AssistantTextProcessingModal.vue | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/components/AssistantTextProcessingModal.vue b/src/components/AssistantTextProcessingModal.vue index ce68123f..0dd041dc 100644 --- a/src/components/AssistantTextProcessingModal.vue +++ b/src/components/AssistantTextProcessingModal.vue @@ -256,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; }