From 2345d4f7ce1703c74365b1e7b7d808c036e3cec5 Mon Sep 17 00:00:00 2001
From: Albin Henriksson <albhe428@student.liu.se>
Date: Tue, 20 Apr 2021 07:37:29 +0000
Subject: [PATCH] Fix styling of settings container

---
 .../presentationEditor/components/SettingsPanel.tsx      | 9 +++++----
 .../src/pages/presentationEditor/components/styled.tsx   | 9 +++++++++
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/client/src/pages/presentationEditor/components/SettingsPanel.tsx b/client/src/pages/presentationEditor/components/SettingsPanel.tsx
index ac3c45f1..2b214728 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 d91e1db6..32df0ac9 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;
+`
-- 
GitLab