Responsive visual issues new product page

[mattgoud]

Questions	Answers
Branch?	8.1.x
Description?	see #32218
Type?	bug fix
Category?	BO
BC breaks?	no
Deprecations?	no
How to test?	go to product page and test each tab (fork : https://github.com/mattgoud/PrestaShop/tree/fix/32218-responsive-visual-issues-new-product-page)
UI Tests	https://github.com/florine2623/testing_pr/actions/runs/8797116451 ✅
Fixed issue or discussion?	Fixes #32218 (with the exception of point number 4 : creation of a separate issue see #35765
Related PRs	If theme, autoupgrade or other module change is needed to make this change work, provide a link to related PRs here.
Sponsor company	Your company or customer's name goes here (if applicable).

[prestonBot]

Hello @mattgoud!

This is your first pull request on the PrestaShop project. Thank you, and welcome to this Open Source community!

[prestonBot]

Hi, thanks for this contribution!

I found some issues with the Pull Request description:

• Your pull request does not seem to fix any issue, consider creating one (see note below) and linking it by writing Fixes #1234.

Would you mind having a look at it? This will help us understand how interesting your contribution is, thank you very much!

About linked issues

Please consider opening an issue before submitting a Pull Request:

• If it's a bug fix, it helps maintainers verify that the bug is effectively due to a defect in the code, and that it hasn't been fixed already.
• It can help trigger a discussion about the best implementation path before a single line of code is written.
• It may lead the Core Product team to mark that issue as a priority, further attracting the maintainers' attention.

(Note: this is an automated message, but answering it will reach a real human)

[SharakPL]

I really doubt this requires a selector made of 6 components, including 2 IDs 😱

Did you try adding mt-0 class to that element?

I'm guessing it's not that easy since it's probably nested in some twig partial used in many places, but surely it can be shortened to 2-3 components selector to be specific enough.

[Hlavtox]

I would go for utility classes where we can, maybe not the most performant solution, but it's much safer making changes.

[mattgoud]

hello, ok this is a somewhat specific need (on a single go-to-catalog button). I have reduced the depth of the classes nesting if you prefer.

[jolelievre]

Thanks @mattgoud

[florine2623]

Hello @mattgoud ,

Tested on multiples devices as well as on desktop.

0. Save and publish display problem. ✅

1. Three dots icon is not aligned correctly. ✅

2. We could use a little more spacing there. ✅

3. Features are displayed in a very confusing way. ✅

But on Desktop, the trash icon is not aligned. It should be on the same line as the input ❌ :

5. Customizable product. Problems with spacing and alignment. ✅

6. It is impossible to edit the stock on a mobile device. ✅

7. Alignment problem. ✅

8. Incorrectly displayed prices. ✅

9. Cost price displayed incorrectly (I'm aware that it's a tricky element to display, maybe a responsive table would be better). ❌ The Currency dropdown is displayed too high.

Screen.Recording.2024-04-23.at.11.28.54.mov

Could you check points 3 and 9 please ?
Thanks :D

[MatShir]

Number 3 isn't the native behavior ? @mattgoud
Maybe not worth changing the native implementation if it is a native behavior 🤔

[Hlavtox]

@MatShir He only fixed the responsivity, no change in behavior, all good.

[MatShir]

I was talking of the number 9 🙄

[mattgoud]

I was talking of the number 9 🙄

ok thank you for your feedbacks @MatShir @Hlavtox , yes on mobile it will be a native select. @florine2623 I will only deal with number 3