Openfoodnetwork: [mobile ux] Text wrapping issue in the OC's ready for dropdown

[RachL]

Description

When visiting a shop that has only 1 ready for option, if the ready for field has a long text (requires wrapping onto 2 lines), the box does not wrap up like it should. We should wrap the text on the 2 lines.

Expected Behavior

Actual Behaviour

Steps to Reproduce

1. In /admin/order_cycles
2. Create an order cycle for a shop and insert "As per pick up point instructions (35)" in the "ready for" field
3. Go see the behavior on the open shop

Workaround

No actual workaround, but it's shopfront facing, so not good.

Severity

bug-s3: a feature is broken but there is a workaround

Your Environment

• Version used: v3.2.10
• Browser name and version: both latest Firefox and Chrome
• Operating System and version (desktop or mobile): Both

[Erioldoesdesign]

I did some CSS digging on this because it's good learning ✨

So I managed using chrome inspect and playing with the css to get the overflow to expand the field by adding a height:max content;

But then as above, the 'ready for' section doesn't stretch 😭

So I fixed that by using heigh: inherit (i think)

but then i wanted ready for to be vertically centred aligned. I used padding 10px to do that but if we're using flexbox i think there's more elegant ways to do it

Someone with better FE/CSS knowledge should logical-check this but hopefully I've found what needs editing.

Now if only I had an environment to branch and try doing the FE coding (some day! 😍 )

[jibees]

Hi!
My first issue here, very proud! Please be tolerant ;)
I've managed to fix the issue (thanks a lot @Erioldoesdesign for your feedback, yes, I'm using flex ;)), it now work with one or two lines, but no three. When I tried to change the display of the Order Cycle, I wasn't able to put a string greater than 35 characters (due to html attribute maxlength="35"), so I guess it might not have any string on 3 lines.
Btw, here's the result:

[Erioldoesdesign]

I missed this in my list of unread email notifications about issues 😭 great work @jibees and glad my strange code in Chrome-inspect was helpful 😄