Skip to content

add full screen for embedding page #448

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
iceljc merged 1 commit into from
May 4, 2026
+38 −9
Merged

add full screen for embedding page #448

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 34 additions & 0 deletions src/lib/common/embedding/EmbeddingPage.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,39 @@
/** @type {string} */
let curSlug = $state('');

/** @type {boolean} */
let fullScreen = $state(false);

$effect(() => {
const footer = document.querySelector('.footer');
const pageContent = document.querySelector('.page-content');

Comment on lines +19 to +22
Copy link
Copy Markdown

@qodo-code-review qodo-code-review Bot May 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Action required

1. Ssr document access crash 🐞 Bug ☼ Reliability

EmbeddingPage.svelte calls document.querySelector(...) unconditionally inside a $effect, which
can throw ReferenceError: document is not defined when the component is rendered in
SSR/non-browser contexts. This would break rendering of embedding routes and potentially the whole
page response.
Agent Prompt 
### Issue description
`src/lib/common/embedding/EmbeddingPage.svelte` uses `document.querySelector` inside `$effect` without a browser/SSR guard. In SSR/non-browser contexts, this can throw because `document` is undefined.

### Issue Context
Elsewhere in the codebase, `$effect` blocks that depend on DOM state are gated with `browser` checks, indicating this is the expected safety pattern.

### Fix Focus Areas
- src/lib/common/embedding/EmbeddingPage.svelte[19-47]
- src/routes/VerticalLayout/Sidebar.svelte[69-73]

### Suggested change
- Import `browser` from `$app/environment` and early-return when not in the browser (or wrap the DOM access in `if (!browser) return;`).
- Alternative: move this logic into `onMount` and keep an effect only for toggling once mounted.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

if (fullScreen) {
if (footer instanceof HTMLElement) {
footer.style.display = 'none';
}
if (pageContent instanceof HTMLElement) {
pageContent.style.paddingBottom = '0';
}
} else {
if (footer instanceof HTMLElement) {
footer.style.display = '';
}
if (pageContent instanceof HTMLElement) {
pageContent.style.paddingBottom = '';
}
}

return () => {
if (footer instanceof HTMLElement) {
footer.style.display = '';
}
if (pageContent instanceof HTMLElement) {
pageContent.style.paddingBottom = '';
}
};
});

// @ts-ignore
let slug = $derived($page.params[slugName]);

Expand All @@ -34,6 +67,7 @@
found = subFound?.subMenu?.find(x => getCleanPath(x.link) === url);
label = found?.label || '';
}
fullScreen = found?.embeddingInfo?.fullScreen || false;
embed(found?.embeddingInfo || null);
});

Expand Down
1 change: 1 addition & 0 deletions src/lib/helpers/types/pluginTypes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@
* @property {string?} [htmlTag]
* @property {string?} [htmlStyle]
* @property {string?} [appendTokenName]
* @property {boolean} fullScreen
*/

/**
Expand Down
6 changes: 0 additions & 6 deletions src/routes/page/agent/[embed]/[embedType]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,6 @@
let label = $state('');
</script>

<svelte:head>
<style>
.footer { display: none !important; }
</style>
</svelte:head>

<HeadTitle title={$_(label || 'Agent')} addOn={`${capitalize(page.params.embed || '')}`} />

<EmbeddingPage
Expand Down
6 changes: 3 additions & 3 deletions src/routes/page/knowledge-base/[embed]/[embedType]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
<script>
import { _ } from 'svelte-i18n';
import { page } from '$app/stores';
import { page } from '$app/state';
import lodash from 'lodash';
import HeadTitle from "$lib/common/shared/HeadTitle.svelte";
import Breadcrumb from '$lib/common/shared/Breadcrumb.svelte';
import EmbeddingPage from '$lib/common/embedding/EmbeddingPage.svelte';

/** @type {string?} */
/** @type {string | undefined} */
let label = '';
</script>

<HeadTitle title="{$_(label || 'Knowledge Base')}" addOn={`${lodash.capitalize($page.params.embed || '')}`} />
<HeadTitle title="{$_(label || 'Knowledge Base')}" addOn={`${lodash.capitalize(page.params.embed || '')}`} />
<Breadcrumb title="{$_('Knwoledge Base')}" pagetitle="{$_(label || 'Knwoledge Base')}" />

<EmbeddingPage
Expand Down
Loading