diff --git a/frontend/src/container/GridGraphLayout/Graph/FullView/GraphManager.styles.scss b/frontend/src/container/GridGraphLayout/Graph/FullView/GraphManager.styles.scss new file mode 100644 index 0000000000..2d594aa8a9 --- /dev/null +++ b/frontend/src/container/GridGraphLayout/Graph/FullView/GraphManager.styles.scss @@ -0,0 +1,21 @@ +.graph-manager-container { + margin-top: 1.25rem; + display: flex; + align-items: flex-end; + overflow-x: scroll; + + .filter-table-container { + flex-basis: 80%; + } + + .save-cancel-container { + flex-basis: 20%; + display: flex; + justify-content: flex-end; + } + + .save-cancel-button { + margin: 0 0.313rem; + } + +} \ No newline at end of file diff --git a/frontend/src/container/GridGraphLayout/Graph/FullView/GraphManager.tsx b/frontend/src/container/GridGraphLayout/Graph/FullView/GraphManager.tsx index 61abbf2aa6..31f528a410 100644 --- a/frontend/src/container/GridGraphLayout/Graph/FullView/GraphManager.tsx +++ b/frontend/src/container/GridGraphLayout/Graph/FullView/GraphManager.tsx @@ -1,3 +1,5 @@ +import './GraphManager.styles.scss'; + import { Button, Input } from 'antd'; import { CheckboxChangeEvent } from 'antd/es/checkbox'; import { ResizeTable } from 'components/ResizeTable'; @@ -8,12 +10,6 @@ import { memo, useCallback, useEffect, useMemo, useState } from 'react'; import { eventEmitter } from 'utils/getEventEmitter'; import { getGraphVisibilityStateOnDataChange } from '../utils'; -import { - FilterTableAndSaveContainer, - FilterTableContainer, - SaveCancelButtonContainer, - SaveContainer, -} from './styles'; import { getGraphManagerTableColumns } from './TableRender/GraphManagerColumns'; import { ExtendedChartDataset, GraphManagerProps } from './types'; import { @@ -169,30 +165,30 @@ function GraphManager({ const dataSource = tableDataSet.filter((item) => item.show); return ( - - +
+
- - - +
+
+ - - + + - - - + +
+
); } diff --git a/frontend/src/container/GridGraphLayout/Graph/FullView/styles.ts b/frontend/src/container/GridGraphLayout/Graph/FullView/styles.ts index 9e5bd09541..b73a2e9112 100644 --- a/frontend/src/container/GridGraphLayout/Graph/FullView/styles.ts +++ b/frontend/src/container/GridGraphLayout/Graph/FullView/styles.ts @@ -31,26 +31,6 @@ export const GraphContainer = styled.div` isGraphLegendToggleAvailable ? '50%' : '100%'}; `; -export const FilterTableAndSaveContainer = styled.div` - margin-top: 1.875rem; - display: flex; - align-items: flex-end; -`; - -export const FilterTableContainer = styled.div` - flex-basis: 80%; -`; - -export const SaveContainer = styled.div` - flex-basis: 20%; - display: flex; - justify-content: flex-end; -`; - -export const SaveCancelButtonContainer = styled.span` - margin: 0 0.313rem; -`; - export const LabelContainer = styled.button` max-width: 18.75rem; cursor: pointer;