mirror of
https://github.com/element-hq/element-call.git
synced 2026-10-07 23:08:14 +00:00
fkwpandClaude Opus 5.5
f8080bf8c3
- Compound 10.3.0 bounds a menu by the space it has and scrolls what doesn't fit, within a boundary the app passes. The menus pass the call area, 16px in from its sides, rather than measuring its width. - The 296px width is the menu's own style. Compound gives that style only to the dropdown, so menuIsDrawer, which copied its phone rule, goes. - Compound draws the menu's frame over its content, so nothing that scrolls can hide it in Safari: the list, headings and meter no longer keep a border width clear of it, and the checks that they did go. - The device list is Compound's scroll area, so it fades out at the foot with Compound's chevron while there is more below. - The microphone menu's meter sticks at that foot, with rows scrolling under it as before, so the list has no fade above it: Compound's is a mask fixed to the list's edge, while a bounce at the top carries the meter with the rows. The band under the meter is filled, or rows would show there. The edge fades from where the chevron starts, so a bounce fades the meter out before it reaches the chevron. A row reached by keyboard stays above the meter. - The list's height is still its share of the call. - The component harness leaves the host's stylesheets unscoped, Compound's among them, as a host does: scoped, they never reached the menu, which is portalled out of Element Call's root. - Its specs check only Element Call's own document styles on the host page, and find the device list within Compound's scroll area. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
95 lines
3.4 KiB
TypeScript
95 lines
3.4 KiB
TypeScript
/*
|
|
Copyright 2026 Element Creations Ltd.
|
|
|
|
SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
|
|
Please see LICENSE in the repository root for full details.
|
|
*/
|
|
|
|
import { defineConfig, searchForWorkspaceRoot } from "vite";
|
|
import { realpathSync } from "node:fs";
|
|
import * as fs from "node:fs";
|
|
|
|
import { vitePluginsConfig } from "./vite.config.ts";
|
|
import { scopeStylesToRoot } from "./component/build/scopeStylesToRoot";
|
|
|
|
// Serves the harness under `component/dev`, which embeds Element Call as a
|
|
// component the way a host application would. Development only: this is not
|
|
// something we build or ship.
|
|
//
|
|
// It shares the plugins with the standalone app but not its HTML entry point,
|
|
// since the harness has a page of its own — and it deliberately does not build
|
|
// on the app's config, which would also bring the app's build output along.
|
|
export default defineConfig(({ mode }) => {
|
|
// The crypto WASM module is imported dynamically, so Vite has to be told
|
|
// that reading it is legitimate — including from a linked copy, which is why
|
|
// the paths are resolved rather than assumed. Same as the standalone app.
|
|
const allow = [searchForWorkspaceRoot(process.cwd())];
|
|
for (const path of [
|
|
"node_modules/matrix-js-sdk/node_modules/@matrix-org/matrix-sdk-crypto-wasm",
|
|
"node_modules/@matrix-org/matrix-sdk-crypto-wasm",
|
|
]) {
|
|
try {
|
|
allow.push(realpathSync(path));
|
|
} catch {}
|
|
}
|
|
|
|
return {
|
|
...vitePluginsConfig({ mode, html: false }),
|
|
root: "component/dev",
|
|
// The same scoping the library build applies, so the harness shows what a
|
|
// host will get — including whether its own page is left alone. The host's
|
|
// own stylesheets, Compound's among them, stay unscoped, as on a real host.
|
|
css: {
|
|
postcss: {
|
|
plugins: [
|
|
scopeStylesToRoot({
|
|
exclude: [
|
|
/component[\\/]dev[\\/]/,
|
|
/@vector-im[\\/]compound-/,
|
|
/@fontsource[\\/]/,
|
|
],
|
|
}),
|
|
],
|
|
},
|
|
},
|
|
// So that the harness can read the same config.json the standalone app
|
|
// does, if the developer has written one
|
|
publicDir: "../../public",
|
|
server: {
|
|
host: true,
|
|
// One up from the standalone app's, so both can run at once — the point
|
|
// of the harness is to compare them
|
|
port: 3001,
|
|
fs: { allow },
|
|
// The same certificate the app uses, so that the harness is served from
|
|
// a `m.localhost` name the development homeserver's certificate covers
|
|
https: {
|
|
key: fs.readFileSync("./backend/dev_tls_m.localhost.key"),
|
|
cert: fs.readFileSync("./backend/dev_tls_m.localhost.crt"),
|
|
},
|
|
},
|
|
worker: {
|
|
format: "es",
|
|
},
|
|
resolve: {
|
|
alias: {
|
|
// matrix-widget-api has its transpiled lib/index.js as its entry point,
|
|
// which Vite for some reason refuses to work with, so we point it to
|
|
// src/index.ts instead
|
|
"matrix-widget-api": "matrix-widget-api/src/index.ts",
|
|
},
|
|
dedupe: [
|
|
"react",
|
|
"react-dom",
|
|
"matrix-js-sdk",
|
|
"react-use-measure",
|
|
// These packages modify the document based on some module-level global
|
|
// state, and don't play nicely with duplicate copies of themselves
|
|
// https://github.com/radix-ui/primitives/issues/1241#issuecomment-1847837850
|
|
"@radix-ui/react-focus-guards",
|
|
"@radix-ui/react-dismissable-layer",
|
|
],
|
|
},
|
|
};
|
|
});
|