From fae38919be1be5fd7a8e9659bc6ea2e5e85311a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A5var=20Aamb=C3=B8=20Fosstveit?= <havar@fosstveit.net>
Date: Thu, 14 Mar 2024 21:40:05 +0100
Subject: [PATCH] Clean up width of elements

---
 src/components/democratic/Democratic.tsx   |  4 +-
 src/components/maincontent/MainContent.tsx | 45 +---------------------
 src/components/spotlights/Spotlights.tsx   |  4 +-
 src/store/slices/settingsSlice.tsx         |  7 +---
 4 files changed, 6 insertions(+), 54 deletions(-)

diff --git a/src/components/democratic/Democratic.tsx b/src/components/democratic/Democratic.tsx
index f56c3adf..e115cc9a 100644
--- a/src/components/democratic/Democratic.tsx
+++ b/src/components/democratic/Democratic.tsx
@@ -19,8 +19,8 @@ const DemocraticDiv = styled(Box)<DemocraticDivProps>(({
 	horizontal,
 	spotlights,
 }) => ({
-	width: horizontal ? '25%' : '100%',
-	height: headless ? `calc(${horizontal || !spotlights ? '100' : '25'}% - 8px)` : `calc(${horizontal || !spotlights ? '100' : '25'}% - 64px)`,
+	width: horizontal ? '25rem' : '100%',
+	height: headless ? `calc(${horizontal || !spotlights ? '100%' : '25rem'} - 8px)` : `calc(${horizontal || !spotlights ? '100%' : '25rem'} - 64px)`,
 	marginBottom: headless ? 0 : 64,
 	display: 'flex',
 	flexDirection: 'row',
diff --git a/src/components/maincontent/MainContent.tsx b/src/components/maincontent/MainContent.tsx
index be39874d..9cae1572 100644
--- a/src/components/maincontent/MainContent.tsx
+++ b/src/components/maincontent/MainContent.tsx
@@ -41,60 +41,19 @@ const MainContainer = styled(Box)<MainContainerProps>(({ theme, horizontal }) =>
 
 interface SideContentProps {
 	verticaldivide?: number;
-	dynamicwidth?: number;
 	bothopen?: number;
 }
 
 const SideContent = styled(Box)<SideContentProps>(({
 	theme,
 	verticaldivide,
-	dynamicwidth,
 	bothopen,
 }) => ({
 	height: '100%',
 	display: 'flex',
 	flexDirection: verticaldivide ? 'column' : 'row',
 	gap: theme.spacing(0.5),
-	...(dynamicwidth && {
-		width: '40vw',
-		[theme.breakpoints.down('xl')]: {
-			width: '50vw'
-		},
-		[theme.breakpoints.down('lg')]: {
-			width: '60vw'
-		},
-		[theme.breakpoints.down('md')]: {
-			width: '70vw'
-		},
-		[theme.breakpoints.down('sm')]: {
-			width: '80vw'
-		},
-		...(!verticaldivide && {
-			...(bothopen ? {
-				width: '60vw',
-				[theme.breakpoints.down('xl')]: {
-					width: '70vw'
-				},
-				[theme.breakpoints.down('lg')]: {
-					width: '80vw'
-				},
-				[theme.breakpoints.down('md')]: {
-					width: '90vw'
-				},
-			} : {
-				width: '30vw',
-				[theme.breakpoints.down('xl')]: {
-					width: '40vw'
-				},
-				[theme.breakpoints.down('lg')]: {
-					width: '50vw'
-				},
-				[theme.breakpoints.down('md')]: {
-					width: '60vw'
-				},
-			}),
-		})
-	}),
+	width: bothopen && !verticaldivide ? '60rem' : '30rem',
 }));
 
 interface SideContainerProps {
@@ -123,7 +82,6 @@ const MainContent = (): JSX.Element => {
 	const eitherOpen = chatOpen || participantListOpen;
 	const bothOpen = chatOpen && participantListOpen;
 	const verticalDivide = useAppSelector((state) => state.settings.verticalDivide);
-	const dynamicWidth = useAppSelector((state) => state.settings.dynamicWidth);
 	const headless = useAppSelector((state) => state.room.headless);
 	const spotlightsVisible = useAppSelector(selectedVideoBoxesSelector) > 0;
 	const videosVisible = useAppSelector(videoBoxesSelector) > 0;
@@ -165,7 +123,6 @@ const MainContent = (): JSX.Element => {
 			{ !isMobile && eitherOpen &&
 				<SideContent
 					verticaldivide={verticalDivide ? 1 : 0}
-					dynamicwidth={dynamicWidth ? 1 : 0}
 					bothopen={bothOpen ? 1 : 0}
 				>
 					{ participantListOpen && <SideContainer height={height} width='100%'><ParticipantList /></SideContainer> }
diff --git a/src/components/spotlights/Spotlights.tsx b/src/components/spotlights/Spotlights.tsx
index b6beb946..85a43682 100644
--- a/src/components/spotlights/Spotlights.tsx
+++ b/src/components/spotlights/Spotlights.tsx
@@ -23,8 +23,8 @@ const SpotlightsDiv = styled(Box)<SpotlightsDivProps>(({
 	horizontal,
 	videos,
 }) => ({
-	width: horizontal ? '75%' : '100%',
-	height: headless || (!horizontal && videos) ? `calc(${horizontal || !videos ? '100' : '75'}% - 8px)` : `calc(${horizontal || !videos ? '100' : '75'}% - 64px)`,
+	width: '100%',
+	height: headless || (!horizontal && videos) ? 'calc(100% - 8px)' : 'calc(100% - 64px)',
 	marginBottom: headless || !horizontal ? 0 : 64,
 	display: 'flex',
 	flexDirection: 'row',
diff --git a/src/store/slices/settingsSlice.tsx b/src/store/slices/settingsSlice.tsx
index 777ce9a0..1e65f88c 100644
--- a/src/store/slices/settingsSlice.tsx
+++ b/src/store/slices/settingsSlice.tsx
@@ -10,7 +10,6 @@ export interface SettingsState {
 	hideNonVideo: boolean;
 	hideSelfView: boolean;
 	verticalDivide: boolean;
-	dynamicWidth: boolean;
 	aspectRatio: number;
 	selectedAudioDevice?: string;
 	selectedAudioOutputDevice?: string;
@@ -53,7 +52,6 @@ const initialState: SettingsState = {
 	hideNonVideo: edumeetConfig.hideNonVideo,
 	hideSelfView: false,
 	verticalDivide: true,
-	dynamicWidth: true,
 	aspectRatio: edumeetConfig.aspectRatio,
 	audioPreset: edumeetConfig.audioPreset,
 	audioPresets: edumeetConfig.audioPresets,
@@ -99,9 +97,6 @@ const settingsSlice = createSlice({
 		setVerticalDivide: ((state, action: PayloadAction<boolean>) => {
 			state.verticalDivide = action.payload;
 		}),
-		setDynamicWidth: ((state, action: PayloadAction<boolean>) => {
-			state.dynamicWidth = action.payload;
-		}),
 		setAspectRatio: ((state, action: PayloadAction<number>) => {
 			state.aspectRatio = action.payload;
 		}),
@@ -181,4 +176,4 @@ const settingsSlice = createSlice({
 });
 
 export const settingsActions = settingsSlice.actions;
-export default settingsSlice;
\ No newline at end of file
+export default settingsSlice;