feat(DIST-1904): Max width for slider (#553)

Co-authored-by: Marco Scarciofolo <scarmarco@gmail.com>
Typeform · Jan 11, 2023 · 10f9b53 · 10f9b53
1 parent d416fd6
commit 10f9b53
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/packages/embed/src/css/slider.scss b/packages/embed/src/css/slider.scss
@@ -9,6 +9,7 @@
   @include backdrop;
 
   .tf-v1-iframe-wrapper {
+    max-width: calc(100vw - 26px);
     height: 100%;
     position: absolute;
     top: 0;
@@ -60,6 +61,7 @@
 
     .tf-v1-iframe-wrapper {
       width: 100% !important;
+      max-width: 100vw;
       height: 100%;
       transition: unset;
 

diff --git a/packages/embed/src/factories/create-slider/create-slider.ts b/packages/embed/src/factories/create-slider/create-slider.ts
@@ -18,7 +18,9 @@ import { SliderOptions } from './slider-options'
 
 export type Slider = EmbedPopup
 
-const buildSlider = (position: 'right' | 'left') => {
+type Position = 'right' | 'left'
+
+const buildSlider = (position: Position) => {
   const slider = document.createElement('div')
   slider.className = `tf-v1-slider ${position}`
   slider.dataset.testid = 'tf-v1-slider'
@@ -32,7 +34,7 @@ const buildSpinner = () => {
   return spinner
 }
 
-const buildWrapper = (position: 'right' | 'left', width: number) => {
+const buildWrapper = (position: Position, width: number) => {
   const wrapper = document.createElement('div')
   wrapper.className = 'tf-v1-iframe-wrapper'
   wrapper.style[position] = '-100%'