<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Added real-time embedding status tracking and progress messages to the AI chat composer, with automatic updates every 10 seconds.
- **Refactor**
- Simplified the embedding status tooltip to display a static message, removing dynamic status updates and hover-based refresh.
- **Tests**
- Enhanced embedding status tooltip test by creating sample documents and extending visibility timeout to 50 seconds.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
### TL;DR
refactor(core): add to edgeless as note icon
> CLOSE AI-152
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **Style**
- Updated the icon for the "Add to Edgeless as Note" chat action to improve visual representation.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
### TL;DR
* fix: ai message copy bug
* Select a section of content in the Page
* Choose the user's question from the AI chat conversation history and copy it
* The copied (pasted) content will be the selected section from the Page
* fix: ai message paste bug
* Select a section of content in the Page
* Choose the user's question from the AI chat conversation history and copy it
* Paste it into the AI Input, and the content will be pasted back into the original Page text
> CLOSE AF-2683
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **Bug Fixes**
- Improved handling of copy and paste events in chat components to prevent unintended interactions with surrounding elements.
- Enhanced test stability by adding error handling during embedding progress checks.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **Tests**
- Improved test stability by handling potential errors during embedding progress checks in end-to-end tests.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
### TL;DR
* fix(core): prevent ai input tip loop-play
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Added an option to control whether tips in the AI chat composer scroll continuously or stop after the last tip.
- **Style**
- Improved layout and spacing in the embedding status tooltip for better readability and alignment.
- **Refactor**
- Updated the structure of elements in the embedding status tooltip for more consistent formatting.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **Style**
- Updated the icon for the embedding workspace setting to a new design for improved visual clarity.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## TL;DR
Workspace embedding settings opt:
* **local workspace**: show enable cloud panel
* **no-access workspace**: disable settings panel
> CLOSE AI-155
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Embedding settings UI now displays a tooltip indicating that only workspace owners can enable Workspace Embedding.
- Embedding settings are modularized for local and cloud workspaces, with clear separation and appropriate enablement controls.
- Attachments in embedding settings cannot be deleted when the settings are disabled.
- **Accessibility**
- Settings wrapper now includes an aria-disabled attribute for improved assistive technology support.
- **Localization**
- Added a new tooltip message: "Only the workspace owner can enable Workspace Embedding."
- **Tests**
- Added end-to-end tests for local workspace UI and disabled state when not the workspace owner.
- **UI Improvements**
- Updated settings panel to better reflect disabled states with tooltips and conditional controls.
- Improved synchronization when opening the embedding settings panel for a smoother user experience.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
> CLOSE AI-134
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **Style**
- Improved alignment and layout of the chat panel send button for a more visually balanced appearance.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
> CLOSE AI-137
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **Bug Fixes**
- Improved input field behavior in context menus by preventing unintended actions caused by keypress events.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
### TL;DR
fix: workspace embedding ui optimization
> CLOSE BS-3531
> CLOSE BS-3532
> CLOSE BS-3533
> CLOSE BS-3534
> CLOSE BS-3535
> CLOSE BS-3536
> CLOSE BS-3553
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Added a localized "Upload file" label for improved internationalization in embedding settings.
- **Style**
- Improved layout and text overflow handling for attachments and ignored documents.
- Enhanced visual alignment and consistency across embedding-related components.
- Updated progress indicator color for better theme integration.
- **Bug Fixes**
- Adjusted text truncation and spacing to prevent layout issues with long filenames and document titles.
- **Chores**
- Updated translation completeness percentage for the "es-CL" locale.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## TL;DR
refactor workspace embedding:
* using computed data
* optimizing data fetching timing(constructor -> component mounted)
* set loading initial values to `true`
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Improved loading indicators and state handling for embedding settings, including a more accurate loading state for the embedding toggle.
- **Bug Fixes**
- The embedding toggle now safely handles unknown or loading states and is disabled while loading, preventing unintended interactions.
- **Refactor**
- Simplified pagination logic and optimized initial data fetching for a smoother user experience.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
### TL;DR
fix: in edgeless mode, an error occurs when asking AI questions without selecting any content
> CLOSE AI-133
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Added support for asking AI input in edgeless mode when no content is selected.
- Enhanced AI panel behavior with improved input handling and chat message sending in edgeless mode.
- **Bug Fixes**
- Improved handling of AI chat input visibility and context extraction in edgeless mode.
- **Tests**
- Introduced new end-to-end tests to verify chat interactions with AI in edgeless mode.
- Centralized editor content removal logic in test utilities for better maintainability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Added a tooltip to the delete icon for attachments, displaying a localized description when hovered.
- **Documentation**
- Updated English localization to include a tooltip label for deleting attachments.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
### TL;DR
feat: optimize workspace attachment uploading & error display
### What Changes
####
Support for Workspace Attachment Uploading & Error Handling
* Added support for three attachment states: uploading (local), upload failed (local error), and uploaded (persisted). The frontend UI now displays real-time upload progress and error messages.
* Attachments that fail to upload can be deleted directly without confirmation.
* Merged display of uploading and uploaded attachments for a smoother user experience.
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Attachments now show real-time upload status including uploading, error, and uploaded states.
- Users can remove failed (error) attachments instantly without confirmation.
- Attachment list merges uploading and uploaded files, displaying up to 10 items.
- **Bug Fixes**
- Improved error handling and messaging for failed attachment uploads.
- **Style**
- Enhanced visual styling for error attachments with distinct colors and backgrounds.
- **Tests**
- Added tests simulating slow network uploads, upload failures, and direct removal of error attachments.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
### TL;DR
* refactor: use horizontal scrolling to display images
* refactor: change max images to 9
* test: add test cases for validating the maximum number of uploadable images
> CLOSE AI-6
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Added a notification to inform users when attempting to upload more images than allowed in the AI chat input.
- **Bug Fixes**
- Prevented uploading more than 9 images at once in the AI chat input.
- **Style**
- Improved image preview grid layout to display images in a single horizontally scrollable row.
- **Tests**
- Added an end-to-end test to verify that an error message appears when too many images are uploaded.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Added event tracking for workspace embedding settings, including toggling embedding, uploading attachments, and selecting ignored documents. This enhances visibility into user interactions within the embedding settings panel.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
### TL;DR
feat: show embedding progress in settings panel
### What changed
* show embedding progress in settings panel
* polling embedding status based on RxJS
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Added real-time embedding progress tracking and display in embedding settings, including a visual progress bar and status messages.
- Introduced localized text for embedding progress statuses.
- Added an optional test ID attribute to the progress bar component for improved testing.
- **Style**
- Added new styles for embedding progress UI elements.
- **Tests**
- Added an end-to-end test to verify embedding progress is displayed correctly in the settings UI.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
### TL;DR
refactor: rename settings, indexer embedding -> embedding
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **Refactor**
- Unified naming in workspace settings from "Indexer & Embedding" to "Embedding" for improved clarity.
- Updated sidebar labels, tab keys, and test IDs to reflect the new naming convention.
- Streamlined the layout and organization of the embedding settings interface for a more consistent user experience.
- Simplified the export and component structure for embedding settings.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
### TL;DR
feat: display embedding tip for ai chat
> CLOSE BS-3051
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Introduced an embedding status tooltip in the AI chat interface, providing real-time feedback on embedding progress for your workspace.
- Added support for embedding status tracking within the AI provider and client services.
- **Style**
- Updated the AI chat footer layout for improved clarity and usability.
- **Tests**
- Added an end-to-end test to ensure the embedding status tooltip displays correctly.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Introduced "Indexer & Embedding" workspace settings to manage AI embedding for local content, including document ignoring and attachment uploads.
- Added UI components for embedding settings, attachments, and ignored documents with pagination and deletion capabilities.
- Provided comprehensive file-type icons for attachments.
- **Improvements**
- Added a new tab for indexing and embedding in workspace settings navigation.
- Included test identifiers on key UI elements to enhance automated testing.
- **Localization**
- Added English localization strings covering all embedding-related UI text and actions.
- **Bug Fixes**
- Enabled previously skipped end-to-end tests for embedding settings to improve reliability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
### TL;DR
tests: workspace embedding e2e
> CLOSE BS-3052
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Introduced comprehensive end-to-end tests for workspace embedding settings, including toggling embedding, uploading and managing attachments, pagination, and ignoring documents.
- Added utilities for automated interaction with the settings panel and document creation in tests.
- **Tests**
- Implemented detailed scenarios to verify workspace embedding functionality and user interactions within the settings panel.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
### TL;DR
feat: show stop model if click-outside during ai generating
>CLOSE AI-89
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Added a confirmation dialog when attempting to stop AI content generation by clicking outside the panel, ensuring users can confirm or cancel the stop action.
- **Tests**
- Introduced an end-to-end test to verify the confirmation dialog appears and AI generation stops as expected when clicking outside during generation.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **Tests**
- Updated test assertions to use case-insensitive matching for verifying displayed text, improving test reliability across different text casing scenarios.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
> Close AF-2616
### TL;DR
fix: ai chat input cannot scroll
> CLOSE AI-115
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **Style**
- Improved the appearance of the vertical scrollbar in the chat input area, making it visible and styled with custom colors and rounded corners.
- **Bug Fixes**
- The vertical scrollbar in the chat input now appears when needed, instead of being hidden.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
> CLOSE AI-114
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Temporarily disabled the AI onboarding feature in workspace detail and layout pages.
- **Chores**
- Added placeholders indicating the suspension of the AI onboarding feature pending future improvements.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
### TL;DR
* Fix the issue of inaccurate content replacement in AI Replace Selection
* Optimize unit Tests utils
### What Changed
1. Fixed the issue of inaccurate content replacement in AI Replace Selection:
- Convert the AI Answer into a Snapshot, then transform it into a sequence of Blocks ready for insertion.
- Invoke the `replaceSelectedTextWithBlocks` command to replace the current selection with blocks (given the complexity of block combinations, this command uses [ts-pattern](https://github.com/gvergnaud/ts-pattern) implementation to ensure compile-time prevention of pattern handling omissions).
2. Optimized unit test assertions for commands, now allowing direct document content comparison using `toEqualDoc`.
```ts
const host = affine`
<affine-page id="page">
<affine-note id="note">
<affine-paragraph id="paragraph-1">Hel<anchor />lo</affine-paragraph>
<affine-paragraph id="paragraph-2">Wor<focus />ld</affine-paragraph>
</affine-note>
</affine-page>
`;
// ....
const expected = affine`
<affine-page id="page">
<affine-note id="note">
<affine-paragraph id="paragraph-1">Hel111</affine-paragraph>
<affine-code id="code"></affine-code>
<affine-paragraph id="paragraph-2">222ld</affine-paragraph>
</affine-note>
</affine-page>
`;
expect(host.doc).toEqualDoc(expected.doc);
```
3. Added support for text cursors in unit test template syntax.
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
> CLOSE BS-3278
- **New Features**
- Introduced the ability to replace selected text in documents with blocks, supporting advanced merging and insertion scenarios for various block types.
- **Bug Fixes**
- Improved handling of text selection and cursor placement in document templates used for testing.
- **Tests**
- Added comprehensive tests for replacing selected text with blocks, including edge cases and complex selection scenarios.
- Enhanced test utilities for document structure comparison and selection handling.
- Updated end-to-end tests to verify correct replacement of selected text via AI-driven actions.
- **Chores**
- Added and updated dependencies to support new features.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
### TL:DR
fix: cannot input space at the beginning of a blank paragraph
> CLOSE BS-3427
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Improved space key handling in the editor: pressing space on an empty AI input now hides the AI panel and inserts a space character back into the editor.
- **Bug Fixes**
- Prevented the AI panel from processing empty input when space is pressed, ensuring smoother user experience.
- **Tests**
- Added an end-to-end test verifying that pressing space on an empty AI input hides the AI panel and inserts a space.
- **Refactor**
- Streamlined event handling logic for space key detection in the editor.
- **Chores**
- Enhanced editor content retrieval to optionally preserve whitespace while removing invisible characters.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
### TL;DR
Refactor space-triggered AI Widget activation logic from `keydown` to `keypress` event listeners
### Background
The `keydown` event triggered by a space may originate from:
1. Normal space insertion
2. Space triggered by input method confirming candidate words
In scenarios like (2), some browsers (see [ISSUE](https://github.com/toeverything/AFFiNE/issues/11541)) and input method callbacks produce events identical to scenario (1),making it impossible to distinguish between the two.
To fix this, the space-activated AI listener uses the `keypress` event:
In scenario 2, `event.which !== 32` (may be `30430` or other values) can be used to differentiate from scenario 1.
> CLOSE BS-3081
### TL:DR
By sharing initialization logic, accelerate test case execution.
### What Changed
* Global setup for copilot e2e
* Login
* Create Workspace
* Enable fully parallel for ci
### Optimization Comparison
Comparing with PR [fix(core): ask AI input box in the whiteboard is blocked by the menu …](https://github.com/toeverything/AFFiNE/pull/11634)：
| | Shard 1 |2|3|4|5|6|7|8|
| ------|----|----|----|----|----|---|---|--|
|Before|15min|14min|14min|14min|14min|13min|15min|10min|
|After|8min|11min|8min|8min|8min|8min|8min|7min|
### Trade-Off
Since all copilot use cases currently share a single user and workspace, some test cases need to focus on **isolation** and **independence**.
For example, when testing Embedding-related workflows：
* Different document contents should be used to avoid interference.
* After each test case execution, **cleanup** operations are also required.
* Some tests should be configured to **serial** mode.
```ts
test.describe.configure({ mode: 'serial' });
test.describe('AIChatWith/Collections', () => {
test.beforeEach(async ({ loggedInPage: page, utils }) => {
await utils.testUtils.setupTestEnvironment(page);
await utils.chatPanel.openChatPanel(page);
await utils.editor.clearAllCollections(page);
await utils.testUtils.createNewPage(page);
});
test.afterEach(async ({ loggedInPage: page, utils }) => {
// clear all collections
await utils.editor.clearAllCollections(page);
});
test('should support chat with collection', async ({
loggedInPage: page,
utils,
}) => {
// Create two collections
await utils.editor.createCollectionAndDoc(
page,
'Collection 1',
'CollectionAAaa is a cute dog'
);
await utils.chatPanel.chatWithCollections(page, ['Collection 1']);
await utils.chatPanel.makeChat(page, 'What is CollectionAAaa(Use English)');
// ...
});
test('should support chat with multiple collections', async ({
loggedInPage: page,
utils,
}) => {
// Create two collections
await utils.editor.createCollectionAndDoc(
page,
'Collection 2',
'CollectionEEee is a cute cat'
);
await utils.editor.createCollectionAndDoc(
page,
'Collection 3',
'CollectionFFff is a cute dog'
);
await utils.chatPanel.chatWithCollections(page, [
'Collection 2',
'Collection 3',
]);
await utils.chatPanel.makeChat(
page,
'What is CollectionEEee? What is CollectionFFff?(Use English)'
);
// ...
});
});
```
> CLOSE AI-51
### TL;DR
Split and enhance copilot e2e tests.
### What Changed
#### Tests Structure
The e2e tests are organized into the following categories:
1. **Basic Tests (`/basic`)**: Tests for verifying core AI capabilities including feature onboarding, authorization workflows, and basic chat interactions.
2. **Chat Interaction Tests (`/chat-with`)**: Tests for verifying the AI's interaction with various object types, such as attachments, images, text content, Edgeless elements, etc.
3. **AI Action Tests (`/ai-action`)**: Tests for verifying the AI's actions, such as text translation, gramma correction, etc.
4. **Insertion Tests (`/insertion`)**: Tests for verifying answer insertion functionality.
#### Tests Writing
Writing a copilot test cases is easier and clear
e.g.
```ts
test('support chat with specified doc', async ({ page, utils }) => {
// Initialize the doc
await focusDocTitle(page);
await page.keyboard.insertText('Test Doc');
await page.keyboard.press('Enter');
await page.keyboard.insertText('EEee is a cute cat');
await utils.chatPanel.chatWithDoc(page, 'Test Doc');
await utils.chatPanel.makeChat(page, 'What is EEee?');
await utils.chatPanel.waitForHistory(page, [
{
role: 'user',
content: 'What is EEee?',
},
{
role: 'assistant',
status: 'success',
},
]);
const { content } = await utils.chatPanel.getLatestAssistantMessage(page);
expect(content).toMatch(/EEee/);
});
```
#### Summary
||Cases|
|------|----|
|Before|19||
|After|151||
> Close BS-2769
### TL;DR
Refactor style of user chat message
> CLOSE AF-2323 AF-2324 AF-2325
### What Changed
* Refactor style of user message.
* Refactor style of image message.
### TL;DR
Separate rendering logic for user and assistant messages.
> CLOSE AF-2323
### What Changed
- Rendering user message with `<chat-panel-message-user />` component.
- Rendering assistant message with `<chat-panel-message-assistant />` Component
### TL;DR
Added "Save as doc" option to Edgeless editor actions.
### What changed?
- Renamed `SAVE_CHAT_TO_BLOCK_ACTION` to `SAVE_AS_BLOCK` and updated its title from "Save chat to block" to "Save as block"
- Renamed `CREATE_AS_DOC` to `SAVE_AS_DOC` and updated its title from "Create as a doc" to "Save as doc"
- Added `SAVE_AS_DOC` to the `EdgelessEditorActions` array, making this option available in the Edgeless editor
### TL;DR
Refactor the insert below functionality to work with page mode and edgeless mode
* Page Mode
- Insert content below the current selection
- If nothing selected, insert content below the last block
* EdgeLess Mode
- If no note block is currently selected, create the content as a new note block.
- Otherwise, insert content into the selected note
Close BS-2760
### What changed?
- Created separate insert handlers for page and edgeless modes with context-aware behavior
- Added support for inserting content when nothing is selected by targeting the last content block
- Added special handling for edgeless mode to support inserting below selected note blocks
- Removed the "Replace selection" action and consolidated insert functionality
- Optimized the clickable area of the action button
### TL;DR
Added unit tests for block and selection commands, along with a new test helper system for creating test documents.
### What changed?
- Added unit tests for several commands:
- `getFirstContentBlockCommand`
- `getLastContentBlockCommand`
- `isNothingSelectedCommand`
- Created a new test helpers make it easier to create structured test documents with a html-like syntax:
```typescript
import { describe, expect, it } from 'vitest';
import { affine } from '../__tests__/utils/affine-template';
describe('My Test', () => {
it('should correctly handle document structure', () => {
const doc = affine`
<affine-page>
<affine-note>
<affine-paragraph>Test content</affine-paragraph>
</affine-note>
</affine-page>
`;
// Get blocks
const pages = doc.getBlocksByFlavour('affine:page');
const notes = doc.getBlocksByFlavour('affine:note');
const paragraphs = doc.getBlocksByFlavour('affine:paragraph');
expect(pages.length).toBe(1);
expect(notes.length).toBe(1);
expect(paragraphs.length).toBe(1);
// Perform more tests here...
});
});
```
### TL;DR
Added a new command to check if nothing is currently selected in the editor.
### What changed?
- Created new `isNothingSelectedCommand` to determine if there are no active selections
### TL;DR
Added new commands to retrieve the first and last content blocks in a document.
### What changed?
- Created `getFirstContentBlockCommand` to find the first content block in a document
- Created `getLastContentBlockCommand` to find the last content block in a document
- Added `getFirstNoteBlock` utility function to find the first note block in a document
Issue：Close [BS-2150](https://linear.app/affine-design/issue/BS-2150/图片-filterprocessing-二级菜单时而不出现)
In the AI image menu (based on floating-ui):
- **Floating element**: Submenu items (e.g., "image filter/image processing")
- **Reference element**: Menu item
- **Positioning strategy**: `fixed`
- **Issue**: Specifying the `container` parameter caused the floating element (submenu) to be mounted to the reference element (menu item), leading to incorrect position calculations when floating-ui updated.
```jsx
<menu-item>
<submenu-item style={{ position: 'fixed' }}/>
</menu-item>
```
- **Fix**: Remove the `container` configuration and mount the `fixed`-positioned floating element to the `body` instead.
yoyoyohamapi
