When there are too many cigarettes, show 2 full lines

[amaury1093]

Right now, when the number of cigarettes is >50, we limit to show only 50 cigarettes:
https://github.com/amaurymartiny/shoot-i-smoke/blob/f1c67a4cf04d87d9bc82b3414453f582e8b18c46/App/components/Cigarettes/Cigarettes.tsx#L54-L55

However, it's 40 cigarettes and 180 cigarettes seem to have the same number of cigarettes:

The small challenge is we don't know how many cigarettes to show to fill 2 lines, it depends on the phone's screen size. On my small phone, 50 almost fills 2 lines. On the above one, it seems like we need ~64.

What we can probably do is

• either put a max of ~80 cigarettes, and hide the 3rd line
• alternatively, dynamically calculate a cigarette's width, the screen width, and do a division

[sarthakpranesh]

Hey @amaurymartiny I would like to work on this issue. Also, I would like to have a bit more information about what remains constant, the number of maximum cigarettes filling two rows or the width of the cigarettes

[amaury1093]

Hey @sarthakpranesh, thanks for stepping up! Go ahead for this issue, I assigned you.

Also, I would like to have a bit more information about what remains constant, the number of maximum cigarettes filling two rows or the width of the cigarettes

What remains constant:

• the number of rows (2) to show
• the width of one cigarette

What is variable:

• the number of actual cigarettes
• the width of the user's screen

One more thing: I recently moved this Cigarette component to another repo, so that it can be re-used, it's here now: https://github.com/shootismoke/common/blob/master/packages/ui/src/Cigarettes/Cigarettes.tsx. This may make testing this component a bit harder, let me know if you need help.