mirror of
https://github.com/diegosouzapw/OmniRoute.git
synced 2026-09-13 18:32:12 +03:00
fix(dashboard): prevent provider icons collapsing to zero size (#12054)
Corrige ícones de provider colapsando para tamanho zero, com teste próprio. Validado no worktree combinado. Obrigado!
This commit is contained in:
1
changelog.d/fixes/0000-provider-icon-zero-size.md
Normal file
1
changelog.d/fixes/0000-provider-icon-zero-size.md
Normal file
@@ -0,0 +1 @@
|
||||
- **fix(dashboard):** Keep local and theme-aware provider SVG icons at a definite layout size so Chromium does not collapse them to 0×0 after the v3.8.50 image-rendering change ([#12054](https://github.com/diegosouzapw/OmniRoute/pull/12054)) — thanks @ponkcore
|
||||
@@ -438,10 +438,8 @@ const ProviderIcon = memo(function ProviderIcon({
|
||||
style={{
|
||||
objectFit: "contain",
|
||||
flex: "none",
|
||||
width: "auto",
|
||||
height: "auto",
|
||||
maxWidth: size,
|
||||
maxHeight: size,
|
||||
width: size,
|
||||
height: size,
|
||||
}}
|
||||
onError={() => setFailedAssets((current) => ({ ...current, [themedKey]: true }))}
|
||||
/>
|
||||
@@ -454,10 +452,8 @@ const ProviderIcon = memo(function ProviderIcon({
|
||||
// intrinsic aspect ratio (some wordmarks are much wider than tall), and next/image's
|
||||
// dev-mode check warns whenever the layout size differs from the square
|
||||
// width/height attributes — a false positive for non-square logos rendered
|
||||
// at fixed icon sizes. We keep `width/height` attributes for layout reserve
|
||||
// but let the intrinsic ratio win on both axes (`width/height: "auto"`) so
|
||||
// wide logos render at their true aspect ratio instead of
|
||||
// being letterboxed into a 1:1 box.
|
||||
// at fixed icon sizes. Explicit CSS dimensions keep the flex item from
|
||||
// collapsing to 0×0; object-fit preserves each logo's intrinsic ratio.
|
||||
if (hasSvg && !svgFailed) {
|
||||
return (
|
||||
<span
|
||||
@@ -473,10 +469,8 @@ const ProviderIcon = memo(function ProviderIcon({
|
||||
style={{
|
||||
objectFit: "contain",
|
||||
flex: "none",
|
||||
width: "auto",
|
||||
height: "auto",
|
||||
maxWidth: size,
|
||||
maxHeight: size,
|
||||
width: size,
|
||||
height: size,
|
||||
}}
|
||||
onError={() => setFailedAssets((current) => ({ ...current, [svgKey]: true }))}
|
||||
/>
|
||||
|
||||
@@ -226,6 +226,23 @@ describe("ProviderIcon — custom remote icon URL (#2166)", () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe("ProviderIcon — local SVG dimensions", () => {
|
||||
it.each([
|
||||
["cline", "/providers/cline.svg"],
|
||||
["kimi-coding", "/providers/kimi-logomark-light.svg"],
|
||||
])("gives %s a definite square layout size", (providerId, expectedSrc) => {
|
||||
const container = renderIcon({ providerId, size: 24 });
|
||||
const img = container.querySelector(`img[src="${expectedSrc}"]`);
|
||||
|
||||
expect(img).not.toBeNull();
|
||||
expect(img?.style.width).toBe("24px");
|
||||
expect(img?.style.height).toBe("24px");
|
||||
expect(img?.style.objectFit).toBe("contain");
|
||||
expect(img?.style.maxWidth).toBe("");
|
||||
expect(img?.style.maxHeight).toBe("");
|
||||
});
|
||||
});
|
||||
|
||||
describe("ProviderIcon — unresolved local asset provenance", () => {
|
||||
it("covers the complete provider and alias inventory", () => {
|
||||
expect(PROVIDER_IDS_WITHOUT_LOCAL_ASSET_PROVENANCE).toHaveLength(79);
|
||||
|
||||
Reference in New Issue
Block a user