News: Compact view in Firefox is extremely wide

[DudleyDursley]

IMPORTANT

Read and tick the following checkbox after you have created the issue or place an x inside the brackets ;)

• [x] I have read the CONTRIBUTING.md and followed the provided tips

Explain the Problem

When using the compact view in Firefox, the complete feed content is displayed on the one line, instead of getting cut of, which leeds to an extremely wide site. The problem only occurs when using Firefox. Edge and Epiphany (GNOME Browser) seem to work fine.

Initially I thought this was related to the missing feed list problem and didn't report it, but apparently not (stupid me).

Steps to Reproduce

Explain what you did to encounter the issue

1. install Nextcloud 14 + NC News
2. use Firefox
3. add Feeds
4. set NC News to compact view

System Information

• News app version: 12.0.4 and 13
• Nextcloud version: 14.0.0.19
• PHP version: 7.2.9
• Database and version: PostgreSQL 10.5
• Browser and version: Firefox 61 and 62
• Distribution and version: Fedora 28 Server

I tested a clean Firefox Portable to exclude problems with my Browser-AddOns/settings and the official Nextcloud Docker container, to exclude problems with my server setup. The result was the same.

Contents of nextcloud/data/nextcloud.log

no errors

Contents of Browser Error Console

Unbekannte Pseudoklasse oder Pseudoelement '-webkit-scrollbar'.  Regelsatz wegen ungültigem Selektor ignoriert.
Unbekannte Pseudoklasse oder Pseudoelement '-webkit-scrollbar-track-piece'.  Regelsatz wegen ungültigem Selektor ignoriert. 3eb1-28e4-server.css:1:1940
Unbekannte Pseudoklasse oder Pseudoelement '-webkit-scrollbar-thumb'.  Regelsatz wegen ungültigem Selektor ignoriert. 3eb1-28e4-server.css:1:2001
Fehler beim Verarbeiten des Wertes für 'position'.  Deklaration ignoriert. 3eb1-28e4-server.css:1:2144
Unbekannte Eigenschaft 'user-select'.  Deklaration ignoriert. 3eb1-28e4-server.css:1:2343
Unerkannte at-Regel oder Fehler beim Verarbeiten der at-Regel '@-ms-viewport'. 3eb1-28e4-server.css:1:18101
Unbekannte Eigenschaft 'appearance'.  Deklaration ignoriert. 3eb1-28e4-server.css:1:25428
Unbekannte Eigenschaft 'user-select'.  Deklaration ignoriert.
Unbekannte Eigenschaft 'user-select'.  Deklaration ignoriert. 3eb1-28e4-server.css:1:41135
Fehler beim Verarbeiten des Wertes für 'max-width'.  Deklaration ignoriert. 3eb1-28e4-server.css:1:43256
Unbekannte Eigenschaft 'user-select'.  Deklaration ignoriert. 3eb1-28e4-server.css:1:45249
Unbekannte Pseudoklasse oder Pseudoelement '-webkit-progress-value'.  Regelsatz wegen ungültigem Selektor ignoriert. 3eb1-28e4-server.css:1:46780
Unbekannte Pseudoklasse oder Pseudoelement '-webkit-progress-bar'.  Regelsatz wegen ungültigem Selektor ignoriert. 3eb1-28e4-server.css:1:46843
Unbekannte Pseudoklasse oder Pseudoelement '-webkit-progress-value'.  Regelsatz wegen ungültigem Selektor ignoriert. 3eb1-28e4-server.css:1:47025
Unbekannte Pseudoklasse oder Pseudoelement '-webkit-search-cancel-button'.  Regelsatz wegen ungültigem Selektor ignoriert. 3eb1-28e4-server.css:1:56946
Name einer Medienfunktion erwartet, aber '-webkit-max-device-pixel-ratio' gefunden. 3eb1-28e4-server.css:1:86002
Unbekannte Eigenschaft 'user-select'.  Deklaration ignoriert. 3eb1-28e4-server.css:1:87382
Unbekannte Eigenschaft 'user-select'.  Deklaration ignoriert. 3eb1-28e4-server.css:1:89251
Fehler beim Verarbeiten des Wertes für 'position'.  Deklaration ignoriert. 3eb1-28e4-server.css:1:99481
Fehler beim Verarbeiten des Wertes für 'position'.  Deklaration ignoriert. 3eb1-28e4-server.css:1:123834
Unbekannte Eigenschaft 'user-select'.  Deklaration ignoriert. 3eb1-28e4-server.css:1:130594
Unbekannte Eigenschaft 'user-select'.  Deklaration ignoriert. 3eb1-28e4-server.css:1:131253
Unbekannte Eigenschaft 'line-break'.  Deklaration ignoriert. 3eb1-28e4-server.css:1:136657
Unbekannte Eigenschaft 'user-select'.  Deklaration ignoriert.
Fehler beim Verarbeiten des Wertes für 'margin'.  Deklaration ignoriert. 70e2-28e4-firstrunwizard.css:1:273
Fehler beim Verarbeiten des Wertes für 'color'.  Deklaration ignoriert.
'none', URL oder Filterfunktion erwartet, aber 'Alpha(' gefunden.  Fehler beim Verarbeiten des Wertes für 'filter'.  Deklaration ignoriert. jquery-ui.css:49:9
'none', URL oder Filterfunktion erwartet, aber 'alpha(' gefunden.  Fehler beim Verarbeiten des Wertes für 'filter'.  Deklaration ignoriert. jquery-ui.css:538:10
'none', URL oder Filterfunktion erwartet, aber 'Alpha(' gefunden.  Fehler beim Verarbeiten des Wertes für 'filter'.  Deklaration ignoriert. jquery-ui.css:918:9
'none', URL oder Filterfunktion erwartet, aber 'Alpha(' gefunden.  Fehler beim Verarbeiten des Wertes für 'filter'.  Deklaration ignoriert. jquery-ui.css:925:9
'none', URL oder Filterfunktion erwartet, aber 'Alpha(' gefunden.  Fehler beim Verarbeiten des Wertes für 'filter'.  Deklaration ignoriert. jquery-ui.css:929:9
'none', URL oder Filterfunktion erwartet, aber 'Alpha(' gefunden.  Fehler beim Verarbeiten des Wertes für 'filter'.  Deklaration ignoriert. jquery-ui.css:1177:10
'none', URL oder Filterfunktion erwartet, aber 'Alpha(' gefunden.  Fehler beim Verarbeiten des Wertes für 'filter'.  Deklaration ignoriert. jquery-ui.css:1184:10
Unbekannte Eigenschaft 'zoom'.  Deklaration ignoriert. select2.css:9:10
Deklaration erwartet, aber '*' gefunden.  Übersprungen bis zur nächsten Deklaration select2.css:10:5
Unbekannte Eigenschaft 'user-select'.  Deklaration ignoriert. select2.css:49:27
Fehler beim Verarbeiten des Wertes für 'background-image'.  Deklaration ignoriert. select2.css:53:23
'none', URL oder Filterfunktion erwartet, aber 'progid' gefunden.  Fehler beim Verarbeiten des Wertes für 'filter'.  Deklaration ignoriert. select2.css:55:13
Fehler beim Verarbeiten des Wertes für 'background-image'.  Deklaration ignoriert. select2.css:65:23
'none', URL oder Filterfunktion erwartet, aber 'progid' gefunden.  Fehler beim Verarbeiten des Wertes für 'filter'.  Deklaration ignoriert. select2.css:67:13
'none', URL oder Filterfunktion erwartet, aber 'alpha(' gefunden.  Fehler beim Verarbeiten des Wertes für 'filter'.  Deklaration ignoriert. select2.css:128:13
Fehler beim Verarbeiten des Wertes für 'background-image'.  Deklaration ignoriert. select2.css:193:23
'none', URL oder Filterfunktion erwartet, aber 'progid' gefunden.  Fehler beim Verarbeiten des Wertes für 'filter'.  Deklaration ignoriert. select2.css:195:13
Fehler beim Verarbeiten des Wertes für 'background'.  Deklaration ignoriert. select2.css:239:58
Fehler beim Verarbeiten des Wertes für 'background'.  Deklaration ignoriert. select2.css:251:60
Fehler beim Verarbeiten des Wertes für 'background-image'.  Deklaration ignoriert. select2.css:275:23
'none', URL oder Filterfunktion erwartet, aber 'progid' gefunden.  Fehler beim Verarbeiten des Wertes für 'filter'.  Deklaration ignoriert. select2.css:277:13
Fehler beim Verarbeiten des Wertes für 'background-image'.  Deklaration ignoriert. select2.css:287:23
'none', URL oder Filterfunktion erwartet, aber 'progid' gefunden.  Fehler beim Verarbeiten des Wertes für 'filter'.  Deklaration ignoriert. select2.css:289:13
Unbekannte Eigenschaft 'user-select'.  Deklaration ignoriert. select2.css:350:27
Unbekannte Eigenschaft 'user-select'.  Deklaration ignoriert. select2.css:529:27
'none', URL oder Filterfunktion erwartet, aber 'progid' gefunden.  Fehler beim Verarbeiten des Wertes für 'filter'.  Deklaration ignoriert. select2.css:532:13
Name einer Medienfunktion erwartet, aber '-webkit-min-device-pixel-ratio' gefunden. select2.css:633:25
Unbekannte Pseudoklasse oder Pseudoelement '-webkit-media-controls-enclosure'.  Regelsatz wegen ungültigem Selektor ignoriert. content.css:100:29
Unbekannte Eigenschaft '-moz-webkit-transition'.  Deklaration ignoriert. content.css:128:28
Identifikator für Pseudoklasse oder Pseudoelement erwartet, aber ' ' gefunden.  Regelsatz wegen ungültigem Selektor ignoriert. content.css:142:27
Fehler beim Verarbeiten des Wertes für 'background-image'.  Deklaration ignoriert. content.css:153:23
Fehler beim Verarbeiten des Wertes für 'background-image'.  Deklaration ignoriert. content.css:156:23
Fehler beim Verarbeiten des Wertes für 'background-image'.  Deklaration ignoriert. content.css:170:22
Fehler beim Verarbeiten des Wertes für 'background-image'.  Deklaration ignoriert. content.css:171:22
Fehler beim Verarbeiten des Wertes für 'background-image'.  Deklaration ignoriert. content.css:203:23
Unbekannte Eigenschaft '-moz-filter'.  Deklaration ignoriert. content.css:334:21
Unbekannte Pseudoklasse oder Pseudoelement '-webkit-scrollbar'.  Regelsatz wegen ungültigem Selektor ignoriert. content.css:666:32
Unbekannte Pseudoklasse oder Pseudoelement '-webkit-scrollbar-thumb'.  Regelsatz wegen ungültigem Selektor ignoriert. content.css:670:32
Unbekannte Pseudoklasse oder Pseudoelement '-webkit-scrollbar-track-piece'.  Regelsatz wegen ungültigem Selektor ignoriert. content.css:674:32
Unbekannte Eigenschaft 'user-select'.  Deklaration ignoriert. style.css:72:4496
Unbekannte Pseudoklasse oder Pseudoelement '-webkit-full-screen'.  Regelsatz wegen ungültigem Selektor ignoriert.

[DudleyDursley]

This issue has already been mentioned in #312 apparently, sorry.

[DudleyDursley]

I have decided to reopen this, since #312 is a pull request.

[SMillerDev]

@skjnldsv got any idea what could cause this?

[skjnldsv]

@SMillerDev Dammit, isn't it fixed already? :'(

[SMillerDev]

Would've hoped so too. @DudleyDursley are you sure it can't be caching?

[skjnldsv]

@SMillerDev No, I can reproduce on 13.0

[Revertron]

Upgraded Nc to 14 and News to 13, and having very-very-very wide RSS reader too :)

[oherst]

It looks like this is caused by the use of flex-basis: 100vw on #app-content (turning that rule off fixed FF and didn't break Chrome):

I'd suggest either getting rid of the flex-basis completely (the browser will default to using auto in that case) or using the flex shorthand flex: 1 0 auto

I should mention that I only tested this via chrome/FF inspectors.

Shall I open a PR?

[Revertron]

Tested it - works perfectly!

[skjnldsv]

@oherst do it :)

[IBBoard]

A PR would be great. I think I'm hitting this problem and everything that I do to fix it just results in Nextcloud constantly showing warnings about code integrity!