[mainui] Increase list-item-min-height to avoid scrollbar

[jimtng]

The default --f7-list-item-min-height was 32px
which caused a vertical scrollbar to appear on desktop

Resolve #2113

[relativeci]

Job #1176: Bundle Size — 15.78MiB (+0.11%).

80547fc(current) vs b7270d2 main#1158(baseline)

Warning

Bundle contains 16 duplicate packages - View duplicate packages

Warning

Bundle introduced 13 new packages: @jsep-plugin/regex, @jsep-plugin/arrow, @jsep-plugin/object and 10 more - View changed packages

Bundle metrics (10 changes)

	Current Job #1176	Baseline Job #1158
Initial JS	1.85MiB(+10.75%)	1.67MiB
Initial CSS	608.98KiB(+0.02%)	608.89KiB
Cache Invalidation	93.81%	93.95%
Chunks	217(-0.91%)	219
Assets	683(-0.87%)	689
Modules	2982(+75.41%)	1700
Duplicate Modules	170(+88.89%)	90
Duplicate Code	1.62%(-16.92%)	1.95%
Packages	152(+10.14%)	138
Duplicate Packages	16(+6.67%)	15

Bundle size by type (3 changes)

	Current Job #1176	Baseline Job #1158
CSS	860KiB (+0.06%)	859.49KiB
Fonts	526.1KiB	526.1KiB
HTML	1.23KiB	1.23KiB
IMG	140.74KiB	140.74KiB
JS	9.27MiB (+0.14%)	9.25MiB
Media	295.6KiB	295.6KiB
Other	4.73MiB (+0.08%)	4.73MiB

---

View job #1176 report View jimtng:list-item-min-height branch activity

[florian-h05]

I cannot reproduce the linked issue on Fedora 38 with Chromium and on Windows 11 with Chrome.

On which OS/Browser does the issue do you experience that issue?

[jimtng]

On which OS/Browser does the issue do you experience that issue?

MacOS 13.5
Chrome 117.0.5938.149
Also on Edge (which uses Chrome engine)
Also on Opera

Does not occur on Safari (i.e. it looks good on Safari)

[florian-h05]

Hmm thanks. Can you then try it with this code?

Suggested change

	--f7-list-item-min-height 36px
	.device-macos .chrome
	--f7-list-item-min-height 36px

I do not want to change the height for all desktops, but rather only the affected ones.

[jimtng]

This is what I have:

.device-desktop
  --f7-navbar-title-line-height 1.3
  --f7-navbar-subtitle-line-height 1.3
  --f7-subnavbar-title-line-height 1.3
  --f7-list-item-header-line-height 1.3
  --f7-label-line-height 1.3
  --f7-list-item-after-line-height 1.3
  .device-macos .chrome
    --f7-list-item-min-height 36px

But this didn't work.

The --f7-list-item-min-height still resolves to 32px in Chrome

[florian-h05]

Hmm in that case leave out .chrome and try again.

@ghys Do you know how to target only specific browsers in CSS?

[jimtng]

Removing .chrome doesn't work either:

.device-desktop
  --f7-navbar-title-line-height 1.3
  --f7-navbar-subtitle-line-height 1.3
  --f7-subnavbar-title-line-height 1.3
  --f7-list-item-header-line-height 1.3
  --f7-label-line-height 1.3
  --f7-list-item-after-line-height 1.3
  .device-macos
    --f7-list-item-min-height 36px

Just .chrome without .device-macos doesn't work either.

[ghys]

Probably best to test with BrowserStack and make sure it's all okay before making such changes.
I don't have this problem either so it might be something related to @jimtng's configuration, which should be addressed, but not in a manner that would add something affecting everybody else.

[florian-h05]

I can not reproduce this with BrowserStack on macOS 13.5 (Ventura) & Sonoma on:

• Chrome Version 117.0.5938.62 (Official Build) (x86_64)
• Edge 117
• Opera 103

Therefore closing this PR.