fix media query edge case

[noerw]

Some layouts were failing for 768px width. Now breakpoints strictly separate between 767 and 768 pixels

[silverwind]

Theres also one oddball in _repository.less which probably benefits from the same:

2998:@media only screen and (max-width: 767.98px) {

[gary-kim]

Actually, could we look into putting these values into less variables?

[zeripath]

Theres also one oddball in _repository.less which probably benefits from the same:

2998:@media only screen and (max-width: 767.98px) {

I suspect this is to protect browsers out there that will do something stupid at 767px and/or if they have subpixels do something stupid between 767px and 768px. Are we certain that setting everything to 767.98px would not be better?

[noerw]

@zeripath I'm pretty sure these .98 values originally come from formantic css lib. I have to say that I have never seen such decimal values in other responsive grid systems like bootstrap etc, so I'm not convinced they are necessary. A quick test in firefox shows, that values are rounded to the next integer, so it should be fine.

[noerw]

Actually, could we look into putting these values into less variables?

@gary-kim done. I'm not very experienced with LESS, so if you see a more elegant way let me know

[silverwind]

Not a fan of Less variables in general personally as they can not be changed at runtime and lock us into that specific precompiler. Would suggest to convert to CSS variables.

[silverwind]

Fomantic breakpoints are from here I think:

https://github.com/fomantic/Fomantic-UI/blob/05955c046cd0be135c57c7ba80dffe36e0c49276/src/themes/default/globals/site.variables#L216-L224

We could remap them to the same CSS vars but I guess that's material for another PR.

[noerw]

Not a fan of Less variables in general personally as they can not be changed at runtime and lock us into that specific precompiler. Would suggest to convert to CSS variables.

Sadly, css variables can't be used in media query selectors :(

[gary-kim]

The variables seem fine to me.

[silverwind]

Sadly, css variables can't be used in media query selectors :(

Oh you're right, one of the stupid limitations of them that they can't appear in selectors.

[noerw]

Enough bikeshedding, this one's ready ;)

[codecov-io]

Codecov Report

Merging #13546 (2083643) into master (949e3f5) will increase coverage by 0.01%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##           master   #13546      +/-   ##
==========================================
+ Coverage   42.19%   42.21%   +0.01%     
==========================================
  Files         696      696              
  Lines       76540    76540              
==========================================
+ Hits        32297    32308      +11     
+ Misses      38951    38932      -19     
- Partials     5292     5300       +8     

Impacted Files	Coverage Δ
modules/charset/charset.go	68.53% <0.00%> (-4.50%)	⬇️
modules/log/event.go	59.90% <0.00%> (-1.89%)	⬇️
modules/queue/unique_queue_disk_channel.go	53.84% <0.00%> (-1.54%)	⬇️
modules/queue/workerpool.go	58.77% <0.00%> (-1.23%)	⬇️
models/gpg_key.go	53.33% <0.00%> (-0.58%)	⬇️
services/pull/pull.go	40.78% <0.00%> (ø)
models/pull.go	55.17% <0.00%> (+0.62%)	⬆️
modules/log/file.go	75.20% <0.00%> (+1.60%)	⬆️
modules/process/manager.go	75.00% <0.00%> (+2.50%)	⬆️
services/pull/check.go	48.90% <0.00%> (+15.32%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 949e3f5...2083643. Read the comment docs.

[lafriks]

🚀