Виджет TradingView шире других компонентов в том же столбце, несмотря на размер сетки. ⇐ Javascript

[Anonymous]

Я создаю приложение Next.js с сеткой. У меня есть несколько компонентов в одном столбце, но мой виджет «Главные новости» в TradingView шире остальных, хотя они используют один и тот же столбец.
Вот соответствующая часть моего компонента «Главная страница»:

Код: Выделить всё

"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 (












);
}

Компонент TradingView Widget выглядит следующим образом:

Код: Выделить всё

"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);

И специальный хук:

Код: Выделить всё

"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;

И конфигурация:

Код: Выделить всё

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

Пользовательские стили CSS:

Код: Выделить всё

    /* 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;
}

Несмотря на то, что столбец определен как 2fr, а родительский элемент div виджета имеет w-full, виджет TradingView «Главные новости» выглядит визуально шире, чем PriceCards или CryptoChart.
Я подозреваю, что проблема связана с скриптом встраивания TradingView, переопределяющим родительскую ширину, но Я не уверен, как обеспечить правильную ширину.
Вопрос:

Как заставить виджет TradingView учитывать ширину его родительского столбца в макете сетки CSS?
Вот как это выглядит:



Подробнее здесь: https://stackoverflow.com/questions/798 ... te-grid-si