From ffb595572d34b595ad6a210e694ebe264b567381 Mon Sep 17 00:00:00 2001 From: Paul D'Ambra Date: Wed, 20 Mar 2024 12:02:17 +0000 Subject: [PATCH 1/3] fix: padding reset for mobile replay --- ee/frontend/mobile-replay/transformer/transformers.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/ee/frontend/mobile-replay/transformer/transformers.ts b/ee/frontend/mobile-replay/transformer/transformers.ts index 96aea3e36c06e..15f41009624c6 100644 --- a/ee/frontend/mobile-replay/transformer/transformers.ts +++ b/ee/frontend/mobile-replay/transformer/transformers.ts @@ -1383,6 +1383,7 @@ function makeCSSReset(context: ConversionContext): serializedNodeWithId { border: 0; outline: 0; background: transparent; + padding-block: 0; } .input:focus { outline: none; From a6b5d61c387618d7631e85bbe9a16d9acff44cd2 Mon Sep 17 00:00:00 2001 From: Paul D'Ambra Date: Wed, 20 Mar 2024 12:17:37 +0000 Subject: [PATCH 2/3] fix --- ee/frontend/mobile-replay/transformer/transformers.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ee/frontend/mobile-replay/transformer/transformers.ts b/ee/frontend/mobile-replay/transformer/transformers.ts index 15f41009624c6..1527a24d7dbeb 100644 --- a/ee/frontend/mobile-replay/transformer/transformers.ts +++ b/ee/frontend/mobile-replay/transformer/transformers.ts @@ -1383,7 +1383,7 @@ function makeCSSReset(context: ConversionContext): serializedNodeWithId { border: 0; outline: 0; background: transparent; - padding-block: 0; + padding-block: 0 !important; } .input:focus { outline: none; From 0eeb0a56409de1266247b83ec49b7ec435070abf Mon Sep 17 00:00:00 2001 From: Paul D'Ambra Date: Wed, 20 Mar 2024 12:19:42 +0000 Subject: [PATCH 3/3] updat snapshot --- .../__snapshots__/transform.test.ts.snap | 44 +++++++++++++++++++ 1 file changed, 44 insertions(+) diff --git a/ee/frontend/mobile-replay/__snapshots__/transform.test.ts.snap b/ee/frontend/mobile-replay/__snapshots__/transform.test.ts.snap index 889de23db5174..a421f7ff220bf 100644 --- a/ee/frontend/mobile-replay/__snapshots__/transform.test.ts.snap +++ b/ee/frontend/mobile-replay/__snapshots__/transform.test.ts.snap @@ -55,6 +55,7 @@ exports[`replay/transform transform can convert images 1`] = ` border: 0; outline: 0; background: transparent; + padding-block: 0 !important; } .input:focus { outline: none; @@ -214,6 +215,7 @@ exports[`replay/transform transform can convert navigation bar 1`] = ` border: 0; outline: 0; background: transparent; + padding-block: 0 !important; } .input:focus { outline: none; @@ -395,6 +397,7 @@ exports[`replay/transform transform can convert rect with text 1`] = ` border: 0; outline: 0; background: transparent; + padding-block: 0 !important; } .input:focus { outline: none; @@ -551,6 +554,7 @@ exports[`replay/transform transform can convert status bar 1`] = ` border: 0; outline: 0; background: transparent; + padding-block: 0 !important; } .input:focus { outline: none; @@ -718,6 +722,7 @@ exports[`replay/transform transform can ignore unknown wireframe types 1`] = ` border: 0; outline: 0; background: transparent; + padding-block: 0 !important; } .input:focus { outline: none; @@ -860,6 +865,7 @@ exports[`replay/transform transform can process unknown types without error 1`] border: 0; outline: 0; background: transparent; + padding-block: 0 !important; } .input:focus { outline: none; @@ -1006,6 +1012,7 @@ exports[`replay/transform transform can set background image to base64 png 1`] = border: 0; outline: 0; background: transparent; + padding-block: 0 !important; } .input:focus { outline: none; @@ -1199,6 +1206,7 @@ exports[`replay/transform transform child wireframes are processed 1`] = ` border: 0; outline: 0; background: transparent; + padding-block: 0 !important; } .input:focus { outline: none; @@ -1747,6 +1755,7 @@ exports[`replay/transform transform inputs buttons with nested elements 1`] = ` border: 0; outline: 0; background: transparent; + padding-block: 0 !important; } .input:focus { outline: none; @@ -1913,6 +1922,7 @@ exports[`replay/transform transform inputs input - $inputType - hello 1`] = ` border: 0; outline: 0; background: transparent; + padding-block: 0 !important; } .input:focus { outline: none; @@ -2032,6 +2042,7 @@ exports[`replay/transform transform inputs input - button - click me 1`] = ` border: 0; outline: 0; background: transparent; + padding-block: 0 !important; } .input:focus { outline: none; @@ -2168,6 +2179,7 @@ exports[`replay/transform transform inputs input - checkbox - $value 1`] = ` border: 0; outline: 0; background: transparent; + padding-block: 0 !important; } .input:focus { outline: none; @@ -2315,6 +2327,7 @@ exports[`replay/transform transform inputs input - checkbox - $value 2`] = ` border: 0; outline: 0; background: transparent; + padding-block: 0 !important; } .input:focus { outline: none; @@ -2461,6 +2474,7 @@ exports[`replay/transform transform inputs input - checkbox - $value 3`] = ` border: 0; outline: 0; background: transparent; + padding-block: 0 !important; } .input:focus { outline: none; @@ -2609,6 +2623,7 @@ exports[`replay/transform transform inputs input - checkbox - $value 4`] = ` border: 0; outline: 0; background: transparent; + padding-block: 0 !important; } .input:focus { outline: none; @@ -2740,6 +2755,7 @@ exports[`replay/transform transform inputs input - email - $value 1`] = ` border: 0; outline: 0; background: transparent; + padding-block: 0 !important; } .input:focus { outline: none; @@ -2871,6 +2887,7 @@ exports[`replay/transform transform inputs input - number - $value 1`] = ` border: 0; outline: 0; background: transparent; + padding-block: 0 !important; } .input:focus { outline: none; @@ -3002,6 +3019,7 @@ exports[`replay/transform transform inputs input - password - $value 1`] = ` border: 0; outline: 0; background: transparent; + padding-block: 0 !important; } .input:focus { outline: none; @@ -3133,6 +3151,7 @@ exports[`replay/transform transform inputs input - progress - $value 1`] = ` border: 0; outline: 0; background: transparent; + padding-block: 0 !important; } .input:focus { outline: none; @@ -3289,6 +3308,7 @@ exports[`replay/transform transform inputs input - progress - $value 2`] = ` border: 0; outline: 0; background: transparent; + padding-block: 0 !important; } .input:focus { outline: none; @@ -3421,6 +3441,7 @@ exports[`replay/transform transform inputs input - progress - 0.75 1`] = ` border: 0; outline: 0; background: transparent; + padding-block: 0 !important; } .input:focus { outline: none; @@ -3553,6 +3574,7 @@ exports[`replay/transform transform inputs input - progress - 0.75 2`] = ` border: 0; outline: 0; background: transparent; + padding-block: 0 !important; } .input:focus { outline: none; @@ -3685,6 +3707,7 @@ exports[`replay/transform transform inputs input - search - $value 1`] = ` border: 0; outline: 0; background: transparent; + padding-block: 0 !important; } .input:focus { outline: none; @@ -3816,6 +3839,7 @@ exports[`replay/transform transform inputs input - select - hello 1`] = ` border: 0; outline: 0; background: transparent; + padding-block: 0 !important; } .input:focus { outline: none; @@ -3979,6 +4003,7 @@ exports[`replay/transform transform inputs input - tel - $value 1`] = ` border: 0; outline: 0; background: transparent; + padding-block: 0 !important; } .input:focus { outline: none; @@ -4111,6 +4136,7 @@ exports[`replay/transform transform inputs input - text - $value 1`] = ` border: 0; outline: 0; background: transparent; + padding-block: 0 !important; } .input:focus { outline: none; @@ -4242,6 +4268,7 @@ exports[`replay/transform transform inputs input - text - hello 1`] = ` border: 0; outline: 0; background: transparent; + padding-block: 0 !important; } .input:focus { outline: none; @@ -4373,6 +4400,7 @@ exports[`replay/transform transform inputs input - textArea - $value 1`] = ` border: 0; outline: 0; background: transparent; + padding-block: 0 !important; } .input:focus { outline: none; @@ -4504,6 +4532,7 @@ exports[`replay/transform transform inputs input - textArea - hello 1`] = ` border: 0; outline: 0; background: transparent; + padding-block: 0 !important; } .input:focus { outline: none; @@ -4635,6 +4664,7 @@ exports[`replay/transform transform inputs input - toggle - $value 1`] = ` border: 0; outline: 0; background: transparent; + padding-block: 0 !important; } .input:focus { outline: none; @@ -4814,6 +4844,7 @@ exports[`replay/transform transform inputs input - toggle - $value 2`] = ` border: 0; outline: 0; background: transparent; + padding-block: 0 !important; } .input:focus { outline: none; @@ -4993,6 +5024,7 @@ exports[`replay/transform transform inputs input - toggle - $value 3`] = ` border: 0; outline: 0; background: transparent; + padding-block: 0 !important; } .input:focus { outline: none; @@ -5172,6 +5204,7 @@ exports[`replay/transform transform inputs input - toggle - $value 4`] = ` border: 0; outline: 0; background: transparent; + padding-block: 0 !important; } .input:focus { outline: none; @@ -5335,6 +5368,7 @@ exports[`replay/transform transform inputs input - url - https://example.io 1`] border: 0; outline: 0; background: transparent; + padding-block: 0 !important; } .input:focus { outline: none; @@ -5466,6 +5500,7 @@ exports[`replay/transform transform inputs input gets 0 padding by default but c border: 0; outline: 0; background: transparent; + padding-block: 0 !important; } .input:focus { outline: none; @@ -6918,6 +6953,7 @@ exports[`replay/transform transform inputs placeholder - $inputType - $value 1`] border: 0; outline: 0; background: transparent; + padding-block: 0 !important; } .input:focus { outline: none; @@ -7053,6 +7089,7 @@ exports[`replay/transform transform inputs progress rating 1`] = ` border: 0; outline: 0; background: transparent; + padding-block: 0 !important; } .input:focus { outline: none; @@ -7686,6 +7723,7 @@ exports[`replay/transform transform inputs radio group - $inputType - $value 1`] border: 0; outline: 0; background: transparent; + padding-block: 0 !important; } .input:focus { outline: none; @@ -7805,6 +7843,7 @@ exports[`replay/transform transform inputs radio_group - $inputType - $value 1`] border: 0; outline: 0; background: transparent; + padding-block: 0 !important; } .input:focus { outline: none; @@ -7934,6 +7973,7 @@ exports[`replay/transform transform inputs radio_group 1`] = ` border: 0; outline: 0; background: transparent; + padding-block: 0 !important; } .input:focus { outline: none; @@ -8063,6 +8103,7 @@ exports[`replay/transform transform inputs web_view - $inputType - $value 1`] = border: 0; outline: 0; background: transparent; + padding-block: 0 !important; } .input:focus { outline: none; @@ -8198,6 +8239,7 @@ exports[`replay/transform transform inputs web_view with URL 1`] = ` border: 0; outline: 0; background: transparent; + padding-block: 0 !important; } .input:focus { outline: none; @@ -8333,6 +8375,7 @@ exports[`replay/transform transform inputs wrapping with labels 1`] = ` border: 0; outline: 0; background: transparent; + padding-block: 0 !important; } .input:focus { outline: none; @@ -8480,6 +8523,7 @@ exports[`replay/transform transform omitting x and y is equivalent to setting th border: 0; outline: 0; background: transparent; + padding-block: 0 !important; } .input:focus { outline: none;