diff --git a/src/components/mindset/components/PlayerContols/Controls/index.tsx b/src/components/mindset/components/PlayerContols/Controls/index.tsx
index 8abd7e388..1b4a65a7a 100644
--- a/src/components/mindset/components/PlayerContols/Controls/index.tsx
+++ b/src/components/mindset/components/PlayerContols/Controls/index.tsx
@@ -64,7 +64,7 @@ const Wrapper = styled(Flex).attrs({
height: 54px;
background: ${colors.BG1};
border-radius: 40px;
- margin-right: 54px;
+ margin-right: 30px;
color: ${colors.white};
font-size: 20px;
padding: 12px;
diff --git a/src/components/mindset/components/Sidebar/index.tsx b/src/components/mindset/components/Sidebar/index.tsx
index 22abdce2d..ce63595c3 100644
--- a/src/components/mindset/components/Sidebar/index.tsx
+++ b/src/components/mindset/components/Sidebar/index.tsx
@@ -25,13 +25,15 @@ const Wrapper = styled(Flex)(({ theme }) => ({
[theme.breakpoints.up('sm')]: {
width: MENU_WIDTH,
+ gap: '10px',
},
}))
const MediaWrapper = styled(Flex)(({ theme }) => ({
width: '100%',
- margin: '0 auto 16px',
+ marginBottom: '20px',
[theme.breakpoints.up('sm')]: {
width: '390px',
+ margin: '0 auto',
},
}))
diff --git a/src/components/mindset/index.tsx b/src/components/mindset/index.tsx
index 2c1b24000..29fcad028 100644
--- a/src/components/mindset/index.tsx
+++ b/src/components/mindset/index.tsx
@@ -1,5 +1,6 @@
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { Socket } from 'socket.io-client'
+import styled from 'styled-components'
import { Flex } from '~/components/common/Flex'
import { Universe } from '~/components/Universe'
import { useSocket } from '~/hooks/useSockets'
@@ -248,13 +249,13 @@ export const MindSet = () => {
-
+
{showTwoD ? : }
-
+
>
) : (
@@ -262,3 +263,10 @@ export const MindSet = () => {
)
}
+
+const ContentContainer = styled(Flex)`
+ flex-basis: 100%;
+ flex-shrink: 1;
+ flex-grow: 1;
+ padding: 16px 16px 16px 0;
+`