From e8f0bbc0c4f9a3278f75ee5769f2b291eb75f79d Mon Sep 17 00:00:00 2001 From: Inbal Vasserman Date: Thu, 15 Aug 2024 14:28:54 +0300 Subject: [PATCH 1/3] fix(SUP-43778):v7 Player Hotspot Text Formatting --- src/components/Hotspot.tsx | 52 ++++++-------------------------------- src/hotspots-plugin.tsx | 20 +++++++++++++-- src/utils/hotspot.ts | 6 +++++ 3 files changed, 32 insertions(+), 46 deletions(-) diff --git a/src/components/Hotspot.tsx b/src/components/Hotspot.tsx index 13807f8..80cfe46 100644 --- a/src/components/Hotspot.tsx +++ b/src/components/Hotspot.tsx @@ -11,20 +11,21 @@ const defaultContainerStyles = { }; const defaultButtonsStyles = { - position: 'relative', + position: 'absolute', width: '100%', height: '100%', appearance: 'none', border: 'none', - display: 'table-cell', - verticalAlign: 'middle', - textAlign: 'center', + display: 'flex', cursor: 'pointer', wordBreak: 'break-all', textRendering: 'geometricPrecision', overflow: 'hidden', textOverflow: 'ellipsis', - whiteSpace: 'nowrap' + padding: '3px', + alignItems: 'center', + justifyContent: 'center', + outline: 0, }; type Props = { @@ -164,42 +165,6 @@ export default class Hotspot extends Component { } }; - getFontSize = (layout: any, hotspot: any, label: string): number => { - let textEl = this.createDivElement(); - textEl.style.top = `${layout.y}px`; - textEl.style.fontSize = `${hotspot.styles['font-size']}px`; - textEl.style.fontFamily = `${hotspot.styles['font-family']}`; - textEl.textContent = label || ''; - document.body.appendChild(textEl); - - const textWidth = textEl.clientWidth; - let initialFontSize = parseInt(hotspot.styles['font-size']); - let fontSizeToUse = initialFontSize; - if (textWidth > layout.width) { - for (fontSizeToUse = initialFontSize - 1; fontSizeToUse >= MINIMAL_FONT_SIZE; fontSizeToUse--) { - textEl.style.fontSize = `${fontSizeToUse}px`; - const newTextWidth = textEl.clientWidth; - if (newTextWidth <= layout.width) { - break; - } - } - } - - document.body.removeChild(textEl); - return fontSizeToUse; - }; - - createDivElement = (): HTMLDivElement => { - let divEl = document.createElement('div'); - divEl.id = 'textDivTest'; - divEl.style.position = 'absolute'; - divEl.style.display = 'table-cell'; - divEl.style.textAlign = 'center'; - divEl.style.wordBreak = 'break-all'; - divEl.style.textRendering = 'geometricPrecision'; - return divEl; - }; - render() { const {hotspot} = this.props; const {layout, label} = hotspot; @@ -217,14 +182,13 @@ export default class Hotspot extends Component { width: layout.width }; - const fontSizeToUse = `${this.getFontSize(layout, hotspot, label || '')}px`; - const buttonStyles = { ...defaultButtonsStyles, ...hotspot.styles, cursor: disableClick ? 'default' : 'pointer', maxWidth: `${layout.width}px`, - fontSize: fontSizeToUse + fontSize: `${hotspot.relativeStyle.fontSize}px`, + borderRadius: `${hotspot.relativeStyle.radiusBorder}px`, }; return ( diff --git a/src/hotspots-plugin.tsx b/src/hotspots-plugin.tsx index c919435..72728fe 100644 --- a/src/hotspots-plugin.tsx +++ b/src/hotspots-plugin.tsx @@ -2,7 +2,14 @@ import {h, ComponentChildren} from 'preact'; import {FloatingItem, FloatingManager, FloatingItemProps} from '@playkit-js/ui-managers'; import {ContribServices, CuePoint, TimedMetadataEvent} from '@playkit-js/common'; -import {RawLayoutHotspot, LayoutHotspot, Canvas, RawFloatingCuepoint, Layout} from './utils/hotspot'; +import { + RawLayoutHotspot, + LayoutHotspot, + Canvas, + RawFloatingCuepoint, + Layout, + Style +} from './utils/hotspot'; import HotspotWrapper from './components/HotspotWrapper'; import {ScaleCalculation, scaleVideo} from './utils/scale-video'; @@ -105,6 +112,14 @@ export class HotspotsPlugin extends KalturaPlayer.core.BasePlugin { }; } + private _calculateStyle(cuepoint: LayoutHotspot, scaleCalculation: ScaleCalculation): Style { + const {rawLayout, styles} = cuepoint; + return { + fontSize: parseInt(styles['font-size'])/ rawLayout.stageWidth * scaleCalculation.width, + radiusBorder: parseInt(styles['border-radius'])/ rawLayout.stageWidth * scaleCalculation.width, + }; + } + private _recalculateCuepointLayout = (hotspots: RawLayoutHotspot[] | LayoutHotspot[]): LayoutHotspot[] => { this.logger.debug('calculating cuepoint layout based on video/player sizes'); @@ -127,7 +142,8 @@ export class HotspotsPlugin extends KalturaPlayer.core.BasePlugin { this.logger.debug('recalculate cuepoint layout based on new sizes'); return hotspots.map(cuepoint => ({ ...cuepoint, - layout: this._calculateLayout(cuepoint as any, scaleCalculation) + layout: this._calculateLayout(cuepoint as any, scaleCalculation), + relativeStyle: this._calculateStyle(cuepoint as any, scaleCalculation) })); }; diff --git a/src/utils/hotspot.ts b/src/utils/hotspot.ts index 66f4e63..e7eb3e8 100644 --- a/src/utils/hotspot.ts +++ b/src/utils/hotspot.ts @@ -5,6 +5,11 @@ export interface Layout { height: number; } +export interface Style { + radiusBorder: number; + fontSize: number; +} + export interface RawFloatingCuepoint { id: string; startTime: number; @@ -21,6 +26,7 @@ export interface RawFloatingCuepoint { export interface FloatingCuepoint extends RawFloatingCuepoint { layout: Layout; + relativeStyle : Style; } export interface OpenUrl { From 1957603fb5e5bf25c537cd4f005d44d84ebaf3d6 Mon Sep 17 00:00:00 2001 From: Inbal Vasserman Date: Thu, 15 Aug 2024 14:40:22 +0300 Subject: [PATCH 2/3] update cypress version --- package.json | 2 +- yarn.lock | 108 +++++++++++++++++++++++++++++---------------------- 2 files changed, 63 insertions(+), 47 deletions(-) diff --git a/package.json b/package.json index b15e7e4..fedc5c5 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "conventional-github-releaser": "3.1.3", "cross-env": "^7.0.3", "css-loader": "^6.7.1", - "cypress": "^12.12.0", + "cypress": "13.13.1", "playwright-webkit": "^1.33.0", "prettier": "^2.6.2", "sass": "^1.52.3", diff --git a/yarn.lock b/yarn.lock index f577a56..81c44e0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -43,10 +43,10 @@ resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9" integrity sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ== -"@cypress/request@^2.88.10": - version "2.88.11" - resolved "https://registry.yarnpkg.com/@cypress/request/-/request-2.88.11.tgz#5a4c7399bc2d7e7ed56e92ce5acb620c8b187047" - integrity sha512-M83/wfQ1EkspjkE2lNWNV5ui2Cv7UCv1swW1DqljahbzLVWltcsexQh8jYtuS/vzFXP+HySntGM83ZXA9fn17w== +"@cypress/request@^3.0.0": + version "3.0.1" + resolved "https://registry.yarnpkg.com/@cypress/request/-/request-3.0.1.tgz#72d7d5425236a2413bd3d8bb66d02d9dc3168960" + integrity sha512-TWivJlJi8ZDx2wGOw1dbLuHJKUYX7bWySw377nlnGOW3hP9/MUKIsEdXT/YngWxVdgNCHRBmFlBipE+5/2ZZlQ== dependencies: aws-sign2 "~0.7.0" aws4 "^1.8.0" @@ -61,9 +61,9 @@ json-stringify-safe "~5.0.1" mime-types "~2.1.19" performance-now "^2.1.0" - qs "~6.10.3" + qs "6.10.4" safe-buffer "^5.1.2" - tough-cookie "~2.5.0" + tough-cookie "^4.1.3" tunnel-agent "^0.6.0" uuid "^8.3.2" @@ -340,11 +340,6 @@ resolved "https://registry.yarnpkg.com/@types/node/-/node-18.7.14.tgz#0fe081752a3333392d00586d815485a17c2cf3c9" integrity sha512-6bbDaETVi8oyIARulOE9qF1/Qdi/23z6emrUh0fNJRUmjznqrixD4MpGDdgOFk5Xb0m2H6Xu42JGdvAxaJR/wA== -"@types/node@^14.14.31": - version "14.18.46" - resolved "https://registry.yarnpkg.com/@types/node/-/node-14.18.46.tgz#ffc5a96cbe4fb5af9d16ac08e50229de30969487" - integrity sha512-n4yVT5FuY5NCcGHCosQSGvvCT74HhowymPN2OEcsHPw6U1NuxV9dvxWbrM2dnBukWjdMYzig1WfIkWdTTQJqng== - "@types/normalize-package-data@^2.4.0": version "2.4.1" resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz#d3357479a0fdfdd5907fe67e17e0a85c906e1301" @@ -904,7 +899,7 @@ buffer-from@^1.0.0: resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5" integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ== -buffer@^5.6.0: +buffer@^5.7.1: version "5.7.1" resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.7.1.tgz#ba62e7c13133053582197160851a8f648e99eed0" integrity sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ== @@ -1619,20 +1614,19 @@ cyclist@^1.0.1: resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9" integrity sha512-NJGVKPS81XejHcLhaLJS7plab0fK3slPh11mESeeDq2W4ZI5kUKK/LRRdVDvjJseojbPB7ZwjnyOybg3Igea/A== -cypress@^12.12.0: - version "12.12.0" - resolved "https://registry.yarnpkg.com/cypress/-/cypress-12.12.0.tgz#0da622a34c970d8699ca6562d8e905ed7ce33c77" - integrity sha512-UU5wFQ7SMVCR/hyKok/KmzG6fpZgBHHfrXcHzDmPHWrT+UUetxFzQgt7cxCszlwfozckzwkd22dxMwl/vNkWRw== +cypress@13.13.1: + version "13.13.1" + resolved "https://registry.yarnpkg.com/cypress/-/cypress-13.13.1.tgz#860c1142a6e58ea412a764f0ce6ad07567721129" + integrity sha512-8F9UjL5MDUdgC/S5hr8CGLHbS5gGht5UOV184qc2pFny43fnkoaKxlzH/U6//zmGu/xRTaKimNfjknLT8+UDFg== dependencies: - "@cypress/request" "^2.88.10" + "@cypress/request" "^3.0.0" "@cypress/xvfb" "^1.2.4" - "@types/node" "^14.14.31" "@types/sinonjs__fake-timers" "8.1.1" "@types/sizzle" "^2.3.2" arch "^2.2.0" blob-util "^2.0.2" bluebird "^3.7.2" - buffer "^5.6.0" + buffer "^5.7.1" cachedir "^2.3.0" chalk "^4.1.0" check-more-types "^2.24.0" @@ -1650,7 +1644,7 @@ cypress@^12.12.0: figures "^3.2.0" fs-extra "^9.1.0" getos "^3.2.1" - is-ci "^3.0.0" + is-ci "^3.0.1" is-installed-globally "~0.4.0" lazy-ass "^1.6.0" listr2 "^3.8.3" @@ -1659,11 +1653,12 @@ cypress@^12.12.0: minimist "^1.2.8" ospath "^1.2.2" pretty-bytes "^5.6.0" + process "^0.11.10" proxy-from-env "1.0.0" request-progress "^3.0.0" - semver "^7.3.2" + semver "^7.5.3" supports-color "^8.1.1" - tmp "~0.2.1" + tmp "~0.2.3" untildify "^4.0.0" yauzl "^2.10.0" @@ -2776,7 +2771,7 @@ is-binary-path@~2.1.0: dependencies: binary-extensions "^2.0.0" -is-ci@^3.0.0: +is-ci@^3.0.1: version "3.0.1" resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-3.0.1.tgz#db6ecbed1bd659c43dac0f45661e7674103d1867" integrity sha512-ZYvCgrefwqoQ6yTyYUbQu64HsITZ3NfKX1lzaEYdkTDcfKzzCI/wthRRYKkdjHKFVgNiXKAKm65Zo1pk2as/QQ== @@ -3971,6 +3966,11 @@ process-nextick-args@~2.0.0: resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2" integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag== +process@^0.11.10: + version "0.11.10" + resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182" + integrity sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A== + promise-inflight@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3" @@ -4008,7 +4008,7 @@ prr@~1.0.1: resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476" integrity sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw== -psl@^1.1.28: +psl@^1.1.33: version "1.9.0" resolved "https://registry.yarnpkg.com/psl/-/psl-1.9.0.tgz#d0df2a137f00794565fcaf3b2c00cd09f8d5a5a7" integrity sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag== @@ -4060,10 +4060,10 @@ qs@6.10.3: dependencies: side-channel "^1.0.4" -qs@~6.10.3: - version "6.10.5" - resolved "https://registry.yarnpkg.com/qs/-/qs-6.10.5.tgz#974715920a80ff6a262264acd2c7e6c2a53282b4" - integrity sha512-O5RlPh0VFtR78y79rgcgKK4wbAI0C5zGVLztOIdpWX6ep368q5Hv6XRxDvXuZ9q3C6v+e3n8UfZZJw7IIG27eQ== +qs@6.10.4: + version "6.10.4" + resolved "https://registry.yarnpkg.com/qs/-/qs-6.10.4.tgz#6a3003755add91c0ec9eacdc5f878b034e73f9e7" + integrity sha512-OQiU+C+Ds5qiH91qh/mg0w+8nwQuLjM4F4M/PbmhDOoYehPh+Fb0bDjtR1sOvy7YKxvj28Y/M0PhP5uVX0kB+g== dependencies: side-channel "^1.0.4" @@ -4076,6 +4076,11 @@ query-string@^5.0.1: object-assign "^4.1.0" strict-uri-encode "^1.0.0" +querystringify@^2.1.1: + version "2.2.0" + resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6" + integrity sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ== + quick-lru@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-1.1.0.tgz#4360b17c61136ad38078397ff11416e186dcfbb8" @@ -4337,7 +4342,7 @@ rimraf@^2.5.4, rimraf@^2.6.3: dependencies: glob "^7.1.3" -rimraf@^3.0.0, rimraf@^3.0.2: +rimraf@^3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a" integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA== @@ -4461,12 +4466,10 @@ semver@^7.1.1, semver@^7.3.4, semver@^7.3.5: dependencies: lru-cache "^6.0.0" -semver@^7.3.2: - version "7.5.0" - resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.0.tgz#ed8c5dc8efb6c629c88b23d41dc9bf40c1d96cd0" - integrity sha512-+XC0AD/R7Q2mPSRuy2Id0+CGTZ98+8f+KvwirxOKIEyid+XSx6HbC63p+O4IndTHuX5Z+JxQ0TghCkO5Cg/2HA== - dependencies: - lru-cache "^6.0.0" +semver@^7.5.3: + version "7.6.3" + resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.3.tgz#980f7b5550bc175fb4dc09403085627f9eb33143" + integrity sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A== send@0.18.0: version "0.18.0" @@ -4948,12 +4951,10 @@ timed-out@^4.0.1: resolved "https://registry.yarnpkg.com/timed-out/-/timed-out-4.0.1.tgz#f32eacac5a175bea25d7fab565ab3ed8741ef56f" integrity sha512-G7r3AhovYtr5YKOWQkta8RKAPb+J9IsO4uVmzjl8AZwfhs8UcUwTiD6gcJYSgOtzyjvQKrKYn41syHbUWMkafA== -tmp@~0.2.1: - version "0.2.1" - resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.1.tgz#8457fc3037dcf4719c251367a1af6500ee1ccf14" - integrity sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ== - dependencies: - rimraf "^3.0.0" +tmp@~0.2.3: + version "0.2.3" + resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.3.tgz#eb783cc22bc1e8bebd0671476d46ea4eb32a79ae" + integrity sha512-nZD7m9iCPC5g0pYmcaxogYKggSfLsdxl8of3Q/oIbqCqLLIO9IAF0GWjX1z9NZRHPiXv8Wex4yDCaZsgEw0Y8w== to-regex-range@^5.0.1: version "5.0.1" @@ -4967,13 +4968,15 @@ toidentifier@1.0.1: resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35" integrity sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA== -tough-cookie@~2.5.0: - version "2.5.0" - resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.5.0.tgz#cd9fb2a0aa1d5a12b473bd9fb96fa3dcff65ade2" - integrity sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g== +tough-cookie@^4.1.3: + version "4.1.4" + resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.1.4.tgz#945f1461b45b5a8c76821c33ea49c3ac192c1b36" + integrity sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag== dependencies: - psl "^1.1.28" + psl "^1.1.33" punycode "^2.1.1" + universalify "^0.2.0" + url-parse "^1.5.3" trim-newlines@^1.0.0: version "1.0.0" @@ -5099,6 +5102,11 @@ unique-slug@^2.0.0: dependencies: imurmurhash "^0.1.4" +universalify@^0.2.0: + version "0.2.0" + resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.2.0.tgz#6451760566fa857534745ab1dde952d1b1761be0" + integrity sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg== + universalify@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.0.tgz#75a4984efedc4b08975c5aeb73f530d02df25717" @@ -5136,6 +5144,14 @@ url-parse-lax@^3.0.0: dependencies: prepend-http "^2.0.0" +url-parse@^1.5.3: + version "1.5.10" + resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.10.tgz#9d3c2f736c1d75dd3bd2be507dcc111f1e2ea9c1" + integrity sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ== + dependencies: + querystringify "^2.1.1" + requires-port "^1.0.0" + url-to-options@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/url-to-options/-/url-to-options-1.0.1.tgz#1505a03a289a48cbd7a434efbaeec5055f5633a9" From 19982d5f5f0b84813e10b7b276356915a4b19073 Mon Sep 17 00:00:00 2001 From: Inbal Vasserman Date: Mon, 2 Sep 2024 16:16:55 +0300 Subject: [PATCH 3/3] replace change in position to change in height --- src/components/Hotspot.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Hotspot.tsx b/src/components/Hotspot.tsx index 80cfe46..93ef189 100644 --- a/src/components/Hotspot.tsx +++ b/src/components/Hotspot.tsx @@ -11,9 +11,9 @@ const defaultContainerStyles = { }; const defaultButtonsStyles = { - position: 'absolute', + position: 'relative', width: '100%', - height: '100%', + height: 'inherit', appearance: 'none', border: 'none', display: 'flex',