Fix aspect ratio in editor

client/src/pages/presentationEditor/components/SlideEditor.tsx

@@ -4,7 +4,7 @@ import { useAppSelector } from '../../../hooks'
 import { ImageComponent, TextComponent } from '../../../interfaces/ApiModels'
 import CheckboxComponent from './CheckboxComponent'
 import ImageComponentDisplay from './ImageComponentDisplay'
-import { SlideEditorContainer } from './styled'
+import { SlideEditorContainer, SlideEditorContainerRatio, SlideEditorPaper } from './styled'
 import TextComponentDisplay from './TextComponentDisplay'
 
 const SlideEditor: React.FC = () => {
@@ -14,19 +14,23 @@ const SlideEditor: React.FC = () => {
   )
   return (
     <SlideEditorContainer>
-      {components &&
-        components.map((component) => {
-          switch (component.type_id) {
-            case ComponentTypes.Checkbox:
-              return <CheckboxComponent key={component.id} component={component} />
-            case ComponentTypes.Text:
-              return <TextComponentDisplay key={component.id} component={component as TextComponent} />
-            case ComponentTypes.Image:
-              return <ImageComponentDisplay key={component.id} component={component as ImageComponent} />
-            default:
-              break
-          }
-        })}
+      <SlideEditorContainerRatio>
+        <SlideEditorPaper>
+          {components &&
+            components.map((component) => {
+              switch (component.type_id) {
+                case ComponentTypes.Checkbox:
+                  return <CheckboxComponent key={component.id} component={component} />
+                case ComponentTypes.Text:
+                  return <TextComponentDisplay key={component.id} component={component as TextComponent} />
+                case ComponentTypes.Image:
+                  return <ImageComponentDisplay key={component.id} component={component as ImageComponent} />
+                default:
+                  break
+              }
+            })}
+        </SlideEditorPaper>
+      </SlideEditorContainerRatio>
     </SlideEditorContainer>
   )
 }

client/src/pages/presentationEditor/components/styled.tsx

@@ -7,11 +7,29 @@ export const SettingsTab = styled(Tab)`
 `
 
 export const SlideEditorContainer = styled.div`
+  height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
+  background-color: rgba(0, 0, 0, 0.08);
+`
+
+export const SlideEditorContainerRatio = styled.div`
+  padding-top: 56.25%;
+  width: 100%;
+  height: 0;
+  overflow: hidden;
+  padding-top: 56.25%;
+  position: relative;
+`
+
+export const SlideEditorPaper = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
   width: 100%;
   height: 100%;
+  background: white;
 `
 
 export const HiddenInput = styled.input`