Das TradingView-Widget ist trotz der Rastergröße breiter als andere Komponenten in derselben Spalte ⇐ JavaScript

[Anonymous]

Ich erstelle eine Next.js-App mit einem Rasterlayout. Ich habe mehrere Komponenten in derselben Spalte, aber mein TradingView-Widget „Top Stories“ ist breiter als die anderen, obwohl sie dieselbe Spalte teilen.
Hier ist der relevante Teil meiner Home-Komponente:

Code: Select all

"use client";
import PriceCards from "./components/Price-Cards";
import { CryptoChart } from "./components/Crypto-Chart";
import TradingViewWidget from "./components/TradingViewWidget";
import {
MARKET_OVERVIEW_WIDGET_CONFIG,
TOP_STORIES_WIDGET_CONFIG,
} from "@/lib/constants";

export default function Home() {
return (












);
}

Die TradingView-Widget-Komponente sieht folgendermaßen aus:

Code: Select all

"use client";
import React, { memo } from "react";
import useTradingViewWidget from "@/hooks/useTradingViewWidget";
import { cn } from "@/lib/utils";
import { useTheme } from "next-themes";

interface TradingViewWidgetProps {
title?: string;
scriptUrl: string;
config: Record;
height?: number;
className?: string;
}

const TradingViewWidget = ({
title,
scriptUrl,
config,
height = 600,
className,
}: TradingViewWidgetProps) => {
const { theme } = useTheme();

const themedConfig = {
...config,
colorTheme: theme === "light" ? "light" : "dark",
isTransparent: false,
};
const containerRef = useTradingViewWidget(scriptUrl, themedConfig, height);

return (

{title && {title}}




);
};

export default memo(TradingViewWidget);

Und der benutzerdefinierte Hook:

Code: Select all

"use client";
import { useEffect, useRef } from "react";

const useTradingViewWidget = (
scriptUrl: string,
config: Record,
height = 600
) => {
const containerRef = useRef(null);

useEffect(() => {
if (!containerRef.current) return;
if (containerRef.current.dataset.loaded) return;

containerRef.current.innerHTML = ``;

const script = document.createElement("script");
script.src = scriptUrl;
script.async = true;
script.innerHTML = JSON.stringify(config);

containerRef.current.appendChild(script);
containerRef.current.dataset.loaded = "true";

return () =>  {
if (containerRef.current) {
containerRef.current.innerHTML = "";
delete containerRef.current.dataset.loaded;
}
};
}, [scriptUrl, JSON.stringify(config), height]);

return containerRef;
};
export default useTradingViewWidget;

Und die Konfiguration lautet:

Code: Select all

export const TOP_STORIES_WIDGET_CONFIG = {
displayMode: "regular",
feedMode: "market",
isTransparent: true,
locale: "en",
market: "stock",
width: "100%",
height: "625",
};

Benutzerdefinierte CSS-Stile:

Code: Select all

    /* TradingView Advanced Chart Widget Styles */
.tradingview-widget-container {
padding: 10px;
background-color: var(--card) !important;
border-radius: 16px !important;
overflow: hidden !important;
}
.tradingview-widget-container__widget {
background-color: var(--card) !important;
height: 100% !important;
}

Obwohl die Spalte als 2fr definiert ist und das übergeordnete Div des Widgets w-full hat, erscheint das TradingView-Widget „Top Stories“ optisch breiter als PriceCards oder CryptoChart.
Ich vermute, dass das Problem damit zusammenhängt, dass das Einbettungsskript von TradingView die übergeordneten Breiten überschreibt, bin mir aber nicht sicher, wie ich das durchsetzen soll die richtige Breite.
Frage:

Wie kann ich dafür sorgen, dass ein TradingView-Widget die Breite seiner übergeordneten Spalte in einem CSS-Rasterlayout berücksichtigt?
So sieht es aus: