diff --git a/client/src/pages/presentationEditor/components/SettingsPanel.tsx b/client/src/pages/presentationEditor/components/SettingsPanel.tsx index ac3c45f106305d3f09e84c3c133433f582c8ed9f..2b2147282c4afafe69548e515813aaff216f2c26 100644 --- a/client/src/pages/presentationEditor/components/SettingsPanel.tsx +++ b/client/src/pages/presentationEditor/components/SettingsPanel.tsx @@ -3,7 +3,7 @@ import AppBar from '@material-ui/core/AppBar' import React from 'react' import CompetitionSettings from './CompetitionSettings' import SlideSettings from './SlideSettings' -import { SettingsTab } from './styled' +import { SettingsContainer, SettingsTab, ToolbarPadding } from './styled' interface TabPanelProps { activeTab: number @@ -20,15 +20,16 @@ function TabContent(props: TabPanelProps) { const SettingsPanel: React.FC = () => { const [activeTab, setActiveTab] = React.useState(0) return ( - <div> - <AppBar position="static"> + <SettingsContainer> + <AppBar position="static" style={{ position: 'absolute' }}> <Tabs value={activeTab} onChange={(event, val) => setActiveTab(val)} aria-label="simple tabs example"> <SettingsTab label="Tävling" /> <SettingsTab label="Sida" /> </Tabs> </AppBar> + <ToolbarPadding /> <TabContent activeTab={activeTab} /> - </div> + </SettingsContainer> ) } diff --git a/client/src/pages/presentationEditor/components/styled.tsx b/client/src/pages/presentationEditor/components/styled.tsx index d91e1db6f58216b26f56cc153f958afec360c7eb..32df0ac9a0b57c86ef382ddfd2d172315d6fd1b2 100644 --- a/client/src/pages/presentationEditor/components/styled.tsx +++ b/client/src/pages/presentationEditor/components/styled.tsx @@ -35,3 +35,12 @@ export const SlideEditorPaper = styled.div` export const HiddenInput = styled.input` display: none; ` + +export const SettingsContainer = styled.div` + overflow-x: hidden; +` + +export const ToolbarPadding = styled.div` + height: 0; + padding-top: 55px; +`